Layui 多选按钮（可添加，可删除）以及动态添加列和设置某列可编辑_layui表格操作列按钮

Layui 多选按钮（可添加，可删除）

   layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'checkbox'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块
            , $ = layui.$
            , checkbox = layui.checkbox
            //这里是监听外面layuitable操作栏的按钮。点击后就出现上图的弹出框
 table.on('tool(DetailsTable)', function (obj) { 
             var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                var values = data.values
                var typeName = data.Property_name;
                var type = 1;
                if ("光度" == typeName)
                {
                    type = 2;
                }
		//向后台发起请求查询出已有的选中的选项如果已有选中
		 $.ajax({
                    url: '/MarketingManagement/GetMTReatil',
                    data: {
                        List: values, Valuetype:type
                    },
                    type: 'get',
                    async: false,
                    dataType: "Json",
                    success: function (res) {
                        var data = JSON.stringify(res.data);
                        //这里是返回的数据
//"[{"Id":2,"name":"100","on":true,"type":""},{"Id":3,"name":"125","on":true,"type":""},{"Id":4,"name":"150","on":true,"type":""},{"Id":5,"name":"175","on":true,"type":""},{"Id":6,"name":"200","on":true,"type":""},{"Id":7,"name":"225","on":true,"type":""},{"Id":8,"name":"250","on":true,"type":""},{"Id":9,"name":"275","on":true,"type":""},{"Id":10,"name":"300","on":true,"type":""},{"Id":11,"name":"325","on":true,"type":""},{"Id":12,"name":"350","on":true,"type":""},{"Id":13,"name":"375","on":true,"type":""},{"Id":14,"name":"400","on":false,"type":""},{"Id":15,"name":"425","on":false,"type":""},{"Id":16,"name":"450","on":false,"type":""},{"Id":17,"name":"475","on":false,"type":""},{"Id":18,"name":"500","on":false,"type":""},{"Id":19,"name":"550","on":false,"type":""},{"Id":20,"name":"600","on":false,"type":""},{"Id":21,"name":"650","on":false,"type":""},{"Id":22,"name":"700","on":false,"type":""},{"Id":23,"name":"750","on":false,"type":""},{"Id":24,"name":"800","on":false,"type":""},{"Id":25,"name":"850","on":false,"type":""},{"Id":26,"name":"900","on":false,"type":""},{"Id":27,"name":"950","on":false,"type":""},{"Id":28,"name":"1000","on":false,"type":""},{"Id":182,"name":"其他度数请联系客服","on":true,"type":""},{"Id":183,"name":"405","on":true,"type":""}]"
                        var btndata = JSON.parse(data); 
                        layer.open({
                            type: 1,
                            title: typeName,
                            area: ['550px', '350px'],
                            content: '<div id="testbox"></div> ' +
                                ' <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"  style="margin-top:5px;position:relative;width:100px;height:33px;" id="addAttribute"><i class= "layui-icon" >&#xe654;</i></button>' +
                            ' <input type="text" name="password" lay-verify="pass" id="addBox" style="width:100px;height:33px;position:relative; left: 0px;top: -33px;z-index:-333" class="layui-input">'
                           ,//testbox是装这些选项的容器，addBox是添加时的输入框，addAttribute是添加按钮
                            success: function (layero, index) {
                                $("#addAttribute").click(function () {
                                    $("#addBox").css("z-index", "333");
                                    $("#addBox").blur(function () {//这里是添加时的输入框失去焦点后传入后台做添加操作
                                        var val = $("#addBox").val();
                                        var data = {
                                            app_food_code: code,
                                            val: val,
                                            type: type
                                        }
                                        if (val != '') {
                                            $.post("/MarketingManagement/AddRemetail", data, function (Reldata) {
                                                var data = JSON.parse(Reldata);
                                                layer.msg(data.msg);
                                            })
                                            $("#addBox").val("");
                                        }

                                        $("#addBox").css("z-index", "-333");
                                    });
                                })
                                


                                $("#testbox").children("li").remove();
                                checkbox({
                                    elem: "#testbox"
                                    , nodes: btndata
                                    , click: function (node) {
                                        console.log("点击", node);
                                    }
                                    , del: function (node) {
                                        console.log("删除", node);
                                        var data = {
                                            app_food_code: code,
                                            val: node.name,
                                            type: type
                                        }
                                        $.post("/MarketingManagement/DelRemetail", data, function (Reldata) {
                                            var data = JSON.parse(Reldata);
                                        })
                                        return true;
                                    }
                                });
                            },
                            end: function () {
                                var list = JSON.stringify(btndata);
                                var data = {
                                    app_food_code: code,
                                    List: list,
                                    type: typeName
                                }
                                $.post("/MarketingManagement/ChangeRemetail", data, function (Reldata) {
                                    $("#DetailsTable").html('');
                                    LoadData(Type);
                                   var data= JSON.parse(Reldata);
                                })
                            }
                        });
                        
                    },
                    error: function (data) {
                        layer.msg("查询失败！")
                    }
                })
      })



   })





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

根据具json动态添加layuitable中的数据

 function LoadDetails(data) {
   result = data.data;
            var strs = new Array();
            mycars = new Array();
            var Ishide = false;
            strs = result[0];
            for (var k in strs) {
                var name;
                var isedit = false;
                if (k == "attrId") {
                    name = "销售属性Id";
                } else if (k == "attrName") {
                    name = "销售属性名称"
                } else if (k == "app_food_code") {
                    name = "商品编码"
                }
                else if (k == "valueId") {
                    name = "销售属性值Id"
                } else if (k == "value") {
                    Ishide = false;
                    name = "销售属性值"
                    isedit = true;
                } else if (k == "Property_name") {
                    Ishide = false;
                    name = "商品属性";
                } else if (k == "values") {
                    name = "商品属性值";
                    isedit = true;
                } else if (k == "properties" && Type == 1) {
                    Ishide = true;
                    name = "商品属性"
                    isedit = true;
                }
                mycars.push({
                    field: k, title: name, align: 'center', edit: isedit, sort: false, hide: Ishide
                });
            }
            if (Type == 2) {
                mycars.push({
                    field: 'right', title: '操作', align: 'center', sort: false, toolbar: '#barDemo', width: 200
                });
            }
            table.render({
                elem: '#DetailsTable',
                data: data.data,
                id: "DetailsTable",
                height: 420,
                defaultToolbar: false,
                limits: [10, 15, 20, 25, 50, 100],
                limit: 50,
                page: true,
                cols: [mycars],
            });
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

//监听可编辑单元格，当单元格失去焦点后就往后台传入新的值进行修改操作
   //监听单元格编辑
            table.on('edit(DetailsTable)', function (obj) {
                var list = obj.value;//修改后的数据
                var typeName = obj.data.Property_name;//修改的字段名
                var data = obj.data;//修改的当行数据
                //获取修改行的ID值
                var ID = data.SupplierCategoryDetailsID;
                var data = {
                    app_food_code: code,
                    List: list,
                    type: typeName
                }
                $.post("/MarketingManagement/ChangeRemetail2", data, function (Reldata) {
                    $("#DetailsTable").html('');
                    LoadData(Type);
                    var data = JSON.parse(Reldata);
                })
            });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19