LayuiTable动态加载列

@{
    ViewBag.Title = "MTRetailDetails";
}
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
<link href="../../Content/css/checkboxs.css" rel="stylesheet" />
<link href="../../Content/layui/css/modules/layer/default/layer.css" rel="stylesheet" />
<link href="~/Content/css/drawer.css" rel="stylesheet" />
<section class="layui-col-md12" style="margin: 0 auto; float: none;">
    <div class="layui-row larryms-panel">
        <div class="larryms-panel-body layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12" style="height:374px; ">
            <form class="layui-inline fr layui-hide-xs" style="float: left;display:none">
                <div class="larryms-search-box">
                    <div class="layui-input-inline">
                        <input type="text" name="caseName" id="caseName" class="layui-input searchVal layui-inline" placeholder="属性名称" onkeypress="if(event.keyCode==13) {searchBtn.click();return false;}" autocomplete="off">
                    </div>
                    <a class="layui-btn larryms-search" id="searchBtn" data-type="reload">搜索</a>
                </div>
            </form>
            <div class="layui-inline" style="float: right ;">

                <div class="layui-form-mid layui-word-aux"> 保存前请确认商品是否上架，此处只能修改已上架的商品</div>
                <button type="button" name="btnSave" class="layui-btn layui-btn-normal" id="savebtn" data-type="save"><i class="layui-icon layui-icon-ok-circle"></i>保存</button>
                <button type="reset" name="btnReset" class="layui-btn layui-btn-danger" id='tig' style="display:none"><i class="larry-icon larry-cha"></i>编辑组合</button>
            </div>
            <div id="opendetailsBox" class="user-list layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12" style="height: 294px;">
                <table class="larryms-table-id" id="DetailsTable" lay-filter="DetailsTable" data-url="/larryms/data/dataquery/viewjwhistorychoose.json"></table>
            </div>
        </div>

    </div>
</section>
<div id="drawer">
    <div id="side" style="display:none;">
        <div class="drawer-header">
            <div class="drawer-header-title">编辑组合</div>
        </div>
        <div class="drawer-header-content" id="drawerContent">
            <div class="layui-form">
                <div class="layui-form">
                    <div class="-layui-from-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:90px">批量设置库存</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" id="Inventory" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:90px">批量设置价格</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" id="Price" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn " id="changes">提交</button>
                        </div>
                    </div>
                    <div class="-layui-from-item">
                        <table id="combination" lay-filter="combination"></table>
                    </div>
                </div>


            </div>

        </div>
    </div>
</div>
<script src="~/Content/js/jquery-2.0.3.min.js"></script>
<script src="~/Content/layui/layui.js"></script>
<script src="~/Content/js/layDrawer.js"></script>
<script src="~/Content/js/checkbox.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs " id="Update" lay-event="Update">修改</a>
</script>
<script type="text/html" id="soldStatu">
    
    <input type="checkbox" name="soldStatu" data-skuid="{
      
      {d.sku_id}}" data-combinationName="{
      
      {d.combinationName}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="changesoldStatu" {
      
      {
      
      d.is_sold_out==1?"checked":""}}>
</script>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'checkbox', 'drawer'], 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.$,
            drawer = layui.drawer
            , checkbox = layui.checkbox
        var mycars = new Array();
        var form = layui.form;
        //获取URL中的参数
        function getUrlParam(name) {
      
      
            var s = location.href;
            s = s.replace("?", "?&").split("&");
            var re = "";
            for (var i = 0; i < s.length; i++) {
      
      
                if (s[i].indexOf(name + "=") == 0) {
      
      
                    re = s[i].replace(name + "=", "");
                }
            }
            return re;
        }
        var code = "";
        var Type = "";
        layer.ready(function () {
      
      
            code = getUrlParam('code');
            Type = getUrlParam('Type');//1是销售属性，2是商品属性
            if (Type == 2) {
      
      
                $("#tig").css("display", "initial")
            }
            LoadData(Type)

        });

        function LoadData(Type) {
      
      
            $.ajax({
      
      
                type: 'get',
                url: '/MarketingManagement/GetMTRetailDetails',
                dataType: 'json',
                async: true,
                cache: false,
                data: {
      
       app_food_code: code, Type: Type },
                error: function () {
      
      
                    layer.msg("查询失败");
                },
                success: function (json) {
      
      
                    LoadDetails(json);
                }
            });

        }
        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 = false;
                } 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],
            });

            //监听单元格编辑
            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);
                })
            });

            table.on('tool(DetailsTable)', function (obj) {
      
       //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                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;
                //}
                $("#testbox").children("li").remove();
                //向后台发起请求查询库中的颜色是否有这个颜色
                $.ajax({
      
      
                    url: '/MarketingManagement/GetMTReatil',
                    data: {
      
      
                        List: values, Valuetype: typeName, app_food_code: code
                    },
                    type: 'get',
                    async: false,
                    dataType: "Json",
                    success: function (res) {
      
      
                        var data = JSON.stringify(res.data);
                        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">'
                            ,
                            success: function (layero, index) {
      
      
                                $("#addAttribute").click(function () {
      
      
                                    $("#addBox").css("z-index", "333");
                                    $("#addBox").blur(function () {
      
      
                                        var val = $("#addBox").val();
                                        if (val != ''&& val.indexOf("客服") != -1) {
      
      
                                            layer.msg("属性内不能包含'客服'");
                                            $("addBox").focus();
                                            return false;
                                        }
                                        if (val != '' && val.length>8) {
      
      
                                            layer.msg("属性过长");
                                            $("addBox").focus();
                                            return false;
                                        }
                                        var data = {
      
      
                                            app_food_code: code,
                                            val: val,
                                            type: typeName
                                        }
                                        if (val != '') {
      
      
                                            $.post("/MarketingManagement/AddRemetail", data, function (Reldata) {
      
      
                                                var data = JSON.parse(Reldata);
                                                $.ajax({
      
      
                                                    url: '/MarketingManagement/GetMTReatil',
                                                    data: {
      
      
                                                        List: values, Valuetype: typeName, app_food_code: code
                                                    },
                                                    type: 'get',
                                                    async: false,
                                                    dataType: "Json",
                                                    success: function (res) {
      
      
                                                        var data = JSON.stringify(res.data);
                                                        btndata = JSON.parse(data);
                                                        loadselectbtn(btndata);
                                                    }
                                                })
                                            })
                                            $("#addBox").val("");
                                        }

                                        $("#addBox").css("z-index", "-333");
                                    });
                                })
                                loadselectbtn(btndata);
                                function loadselectbtn(data) {
      
      
                                    $("#testbox").children("li").remove();
                                    checkbox({
      
      
                                        elem: "#testbox"
                                        , nodes: data
                                        , click: function (node) {
      
      
                                            console.log("点击", node);
                                        }
                                        , del: function (node) {
      
      
                                            console.log("删除", node);
                                            var data = {
      
      
                                                app_food_code: code,
                                                val: node.name,
                                                type: typeName
                                            }
                                            $.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("查询失败！")
                    }
                })
            });
        }

        $("#savebtn").click(function () {
      
      
            var loading = layer.msg('正在推送', {
      
       icon: 16, shade: 0.3, time: 0 });

            var tableData = layui.table.cache["DetailsTable"];
            var Tdata = JSON.stringify(tableData);
            var data = {
      
      
                Tabledata: Tdata,
                app_food_code: code
            }
            $.post("/MarketingManagement/Save_Initdata", data, function (redata) {
      
      
                var data = JSON.parse(redata);
                layer.close(loading);
                layer.msg(data.msg);

            });
        });

        drawer.render({
      
      
            //trigger和elem只能为id
            trigger: '#tig'
            , elem: '#side'
            //top   bottom   left   right 默认为left
            , position: 'bottom'
            //默认为230  可以填百分比
            , specs: '80%'
            , open: function () {
      
      

                openzhuhe();
                layer.msg("打开")
            }
            , close: function () {
      
      
                //关闭的时候请求后台修改商品表的及价格区间
                var data = {
      
      
                    app_food_code: code
                }
                $.post("/MarketingManagement/ChangeGoodsPrice", data, function (Reldata) {
      
      

                    var data = JSON.parse(Reldata);
                    layer.msg(data.msg);
                })
            }
        });
        function openzhuhe() {
      
      
            var content = $("#drawerContent");
            var loading = layer.msg('正在加载', {
      
       icon: 16, shade: 0.3, time: 0 });

            //查询出颜色和度数组合成单选框。
            var data = {
      
      
                app_food_code: code
            }
            $.post("/MarketingManagement/GetCombination", data, function (data) {
      
      
                layer.close(loading);
                var result = JSON.parse(data).data;
                var strs = new Array();
                var tCombination = new Array();
                var Ishide = false;
                strs = result[0];
                for (var k in strs) {
      
      
                    var name;
                    var isedit = false;
                    if (k == "sku_id") {
      
      
                        name = "组合编码[不能重复]";
                        var isedit = true
                    } else if (k == "price") {
      
      
                        name = "价格";
                        var isedit = true
                    } else if (k == "app_food_code") {
      
      
                        name = "商品编码"
                    } else if (k == "is_sold_out") {
      
      
                        name = "是否可售"
                    } else if (k == "combinationName") {
      
      
                        name = "组合名称"
                    } else if (k == "Vallueids") {
      
      
                        name = "编码组"
                    } else if (k == "stock") {
      
      
                        name = "库存"
                    }
                    if (k == "is_sold_out") {
      
      
                        tCombination.push({
      
      
                            field: 'right', title: name, align: 'center', sort: false, toolbar: '#soldStatu', width: 200
                        });
                    } else {
      
      
                        tCombination.push({
      
      
                            field: k, title: name, align: 'center', edit: isedit, sort: false, hide: Ishide
                        });
                    }
                }
                table.render({
      
      
                    elem: '#combination',
                    data: result,
                    id: "combination",
                    height: 520,
                    defaultToolbar: false,
                    Number.MAX_VALUE,//设置layuitable不分页，全部展示数据
                    cols: [tCombination],
                });
                table.on('edit(combination)', function (obj) {
      
      
                    if (obj.field == "price") {
      
      
                        var list = obj.value;//修改后的数据
                        var Newprice = obj.data.price;//价格
                        var SkuID = obj.data.sku_id;//skuid
                        var data = obj.data;//修改的当行数据
                        //获取修改行的ID值
                        var ID = data.SupplierCategoryDetailsID;
                        var data = {
      
      
                            app_food_code: code,
                            Price: Newprice,
                            SkuID: SkuID
                        }
                        $.post("/MarketingManagement/ChangeCombinationPrice", data, function (Reldata) {
      
      

                            var data = JSON.parse(Reldata);
                            layer.msg(data.msg);
                        })
                    } else if (obj.field == "sku_id") {
      
      
                        var combinationName = obj.data.combinationName;
                        var SkuID = obj.data.sku_id;//skuid
                        var data = {
      
      
                            app_food_code: code,
                            combinationName: combinationName,
                            SkuID: SkuID
                        }
                        $.post("/MarketingManagement/ChangeCombinationSku_id", data, function (Reldata) {
      
      

                            var data = JSON.parse(Reldata);
                            layer.msg(data.msg);
                        })
                    }


                });

                //监听指定开关
                form.on('switch(changesoldStatu)', function (data) {
      
      
                    var is_sold_out = this.checked;//设置1为开启，0为关闭
                    var SkuID = $(this).attr("data-skuid");
                    var combinationName = $(this).attr("data-combinationName");
                    var data = {
      
      
                        app_food_code: code,
                        is_sold_out: is_sold_out,
                        SkuID: SkuID
                    }
                    $.post("/MarketingManagement/ChangeCombinationStatu", data, function (Reldata) {
      
      
                        var satu = !is_sold_out;
                        var data = JSON.parse(Reldata);
                        layer.msg(data.msg);
                    })
                });

              
            })
        }
        $("#changes").click(function () {
      
      
            var Price = $("#Price").val();
            var Inventory = $("#Inventory").val();
            var data = {
      
      
                price: Price,
                inventory: Inventory,
                app_food_code: code
            };//这里是组合详情页面的批量修改操作
            $.post("/MarketingManagement/changes", data, function (Reldata) {
      
      
                openzhuhe();
                $("#Price").val('');
                $("#Inventory").val('');
                var data = JSON.parse(Reldata);
                layer.msg(data.msg);

            });
        })
    });
</script>

效果图展示

这里是进入上面那段html前的页面。也就是说上面那段代码其实是展示两套功能模块的。一个是商品属性，一个是销售属性

点击修改的效果

点击编辑组合的效果