• layUI使用总结


    出错调试:

    1. 按F12查看控制器;
    2. 看调试器,打断点,按F10 逐步执行;
    3. 看网络——参数,参数有获取到值,查看响应;
    4. 以上都没有解决,看代码中是否写错了标点符号,格式等;

    修改保存里的Id:

    目的:为了修改某条数据传入Id,通过Id获取本条数据

    先在窗体中写出Id字段,并隐藏,  <input id="Id" type="hidden"  />

    然后获取数据库中的Id,jquery中的格式    var Id = $("#Id").val();

     

    layui使用方法:

    1. 获得 layui 后,将其完整地部署到你的项目目录,只需要引入下述文件,(1)/layui/css/layui.css   (2)/layui/layui.js ,此处可换成:./layui/layui.all.js
    2. 模块加载名称:table,创建一个table实例最简单的方式是,在页面放置一个元素 <table id="demo"></table>,然后通过 table.render() 方法指定该容器;

    传值方面:可查看layUI的内置模块——数据表格,绑定容器、设置数据接口、在表头设定对应的字段;

      (1)   content: '/AML/Brand/BrandEdit?id=' + data.Id //这里content是一个URL,URL传值

      (2)  $.post("/AML/Brand/OneEdit", {BrandName:c,Id:@ViewBag.b.Id}, function (res) {// 控制器自定义传的值BrandName,从控制器中把获取到的值传给视图

    1、查询思路:可查看layUI数据表格文档——数据表格的重载

    示例代码: //重载
                var $ = layui.$, active = {
                    reload: function () { //执行重载
                        table.reload('demo', {
                            page: { curr: 1 //重新从第 1 页开始 }
                          , where: { //参数
                                  ShipNum: $("#OrId").val(),
                                  UserName: $("#UName").val(), }
                        }, 'data'); }  };
                $("#sea").on("click", function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : ''; })

    2、添加思路:点击新增按钮,弹出弹窗,获取要新增的字段值,输入要新增的数据,点击保存按钮,判断值是否为true,为true,新增一行数据,关闭窗口并刷新页面,为false,给出提示,查看代码是否编译有误;

    示例代码: layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                //监听提交
                form.on('submit(formDemo)', function (data) {
                    var name=$("#BrandName").val();
                    $.post("/AML/Brand/BrandJia", { BrandName: name }, function (res) {
                        if (res.scu) {
                            layer.msg("保存成功");
                            window.setTimeout(function () {
                                //当你在iframe页面关闭自身时
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            }, 2000);   
                        } else {
                            layer.alert(res.msg);
                        }
                    }, "json")
                    return false;
                });

    });

    3、编辑思路:点击编辑按钮,弹出弹窗,并获取行数据的值,把获取到的修改后的数据进行保存,点击保存按钮,判断值是否为true,为true,保存数据,关闭窗口并刷新页面,为false,给出提示,查看代码是否编译有误;

    控制器代码示例:

     var c = db.Order.FirstOrDefault(p => p.Id == OrderId);
                c.State = State;
                int res = db.SaveChanges();
                if (res > 0) { return Json(new { scu = true, msg = "" }); }
                else  {  return Json(new { scu = false, msg = "保存失败" }); }

    视图示例代码:  form.on('submit(save)', function(data){
                    //     var p = $("#newform").serialize();           
                    var c=$("#BrandName").val();// 获取修改后的数据
                    $.post("/AML/Brand/OneEdit", {BrandName:c,Id:@ViewBag.b.Id}, function (res) {// 控制器自定义传的值BrandName
                        if (res.scu) {
                            layer.msg("保存成功", { icon: 6, time: 2000 });
                            window.setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            }, 2000)
                        } else {
                            layer.alert(res.Message, { icon: 5 });
                        }
                    }, "json")
                    return false;
                });

    4、删除思路:  首先要获取到删除依据的字段值,并保存数据,

    ( var b= db.Brand.FirstOrDefault(p => p.Id == id);
                db.Brand.Remove(b);
                int re = db.SaveChanges();),

    弹出弹窗给出提示,是否要删除,点击确定,判断数据,为true,删除数据,关闭窗口并刷新页面,为false,给出提示,查看代码是否编译有误;

    示例代码: layer.confirm('真的删除行么', function (index) {
                            var id = data.Id;
                            $.post("/AML/Brand/BrandDel", {id:data.Id}, function (res) {
                                if (res.success == true) {
                                    alert("删除成功");
                                    window.location.reload();
                                } else {
                                    alert(res.msg);
                                }
                            }, "json");
                            layer.close(index);
                        });

    5、监听头部工具栏时间:工具栏模板:<script type="text/html" id="toolbarDemo"> </script>  

        //JS 调用: table.render({   elem: '#demo'

              ,toolbar: '#toolbarDemo'

              //,…… //其他参数 })

      //监听事件:

      table.on('toolbar(test)', function(obj){

      var checkStatus = table.checkStatus(obj.config.id);

    6、怎样JQuery获取值传入:

      例如:  $('#Id').val(data.Id);

    7、Url传值:用“?id = ” +data.id

    1. layUI字段如何转为string:UserId.ToString();

    2.layUI字段如何转为int: Convert.ToInt32(string)

    3.隐藏列字段: 数据表格中的 hide: true 方法

    4.字符串去空格: ToString().Trim();

    5.方法(值类型)为Null怎么处理:  查看Id字段值是否传输正确, int?Id

    6.自定义模板:可查看layUI数据表格——temple自定义模板

    第一:在数据表格中的列中添加templet方法,templet: '#idTpl',

    {field:'id', title: '文章标题', 200, templet: '#idTpl'}

    第二:在上层加

    <script type="text/html" id="idTpl">

      {{#  if(d.State ==0){ }}
        未付款
        {{#  } else if(d.State ==1){   }}
        已付款
        {{#  } else if(d.State ==2){   }}
        已取消
        {{#  } }}

    </script>

    
    
    
    
    
    

     

  • 相关阅读:
    巧妇难为无米之炊( Model数据)
    jsp后台取出request请求头
    JSP本质的理解(浏览器调试,response里面的文本都是out.write写入网络流)
    【JZOJ6405】【NOIP2019模拟11.04】c
    【JZOJ6404】【NOIP2019模拟11.04】B
    【JZOJ6403】【NOIP2019模拟11.04】a
    【JZOJ6385】【NOIP2019模拟2019.10.23】B
    【JZOJ6379】【NOIP2019模拟2019.10.06】小w与密码(password)
    【JZOJ6373】【NOIP2019模拟2019.10.04】式神[八云蓝]
    【JZOJ6376】【NOIP2019模拟2019.10.05】樱符[完全墨染的樱花]
  • 原文地址:https://www.cnblogs.com/AChongi/p/11369848.html
Copyright © 2020-2023  润新知