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>