目标编辑

某order某个值是按弹窗中选中的table项进行回填到form
order对应的交易记录凭证，需要上传图片

效果图

弹窗选择record

拖拽图片.gif

运行代码

order_edit.html （你仅需关注 店铺、上传照片部分的代码即可）

@layout("/common/_container.html",{js:["/assets/modular/sale/order/order_edit.js"]}){

<div class="layui-body-header">
    <span class="layui-body-header-title">编辑订单</span>
</div>

<div class="layui-fluid " style="">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="orderForm" lay-filter="orderForm" class="layui-form model-form" style="max-width: 700px;margin: 40px auto;">
                <input name="orderId" type="hidden"/>

                <div class="layui-form-item">
                    <label class="layui-form-label">店铺<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input name="shopId" type="hidden"/>
                        <input id="shopName" name="shopName" placeholder="请选择店铺。。。" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>

                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">业务名称<span style="color: red;">*</span></label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input name="productId" type="hidden"/>-->
                        <!--<input id="productName" name="productName" placeholder="请选择业务名称。。。" type="text" class="layui-input" lay-verify="required" required/>-->
                    <!--</div>-->
                <!--</div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label">业务名称<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <select name="productId" lay-verify="required" id="productId" lay-filter ="productId" >
                            <option value="">请选择业务</option>
                            <option value="1">短信</option>
                            <option value="2">CRM充值</option>
                            <option value="3">CRM续费</option>
                            <option value="4">欢客订购</option>
                            <option value="5">走心订购</option>
                            <option value="6">定制</option>
                            <option value="99">其他</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item" id = "div_orderTime">
                    <label class="layui-form-label">订购时长<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="orderTime" name="orderTime" placeholder="请输入订购时长" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>


                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">工单进度<span style="color: red;">*</span></label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input name="orderProcessStatus" type="hidden"/>-->
                        <!--<input id="orderProcessStatusDesc" name="orderProcessStatusDesc" placeholder="请选择工单进度。。。" type="text" class="layui-input" lay-verify="required" required/>-->
                    <!--</div>-->
                <!--</div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label">工单进度</label>
                    <div class="layui-input-block">
                        <!--<input name="orderProcessStatus" type="hidden"/>-->
                        <select name="orderProcessStatus" lay-verify="required">
                            <option value="">请选择订单进度</option>
                            <option value="put_on_record">报备</option>
                            <option value="pre_recharge">预充值</option>
                            <option value="created">创建</option>
                            <option value="finance_checked">财务审核完成</option>
                            <option value="recharged">充值完成</option>

                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">代付人<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="payAgent" name="payAgent" placeholder="请输入代付人" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>

                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">是否给代付人转账old<span style="color: red;">*</span></label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="radio" name="payedToAgent" value="true" title="是">-->
                        <!--<input type="radio" name="payedToAgent" value="false" title="否" checked="">-->
                    <!--</div>-->

                <!--</div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label">是否给代付人转账</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="payedToAgent" lay-skin="switch">
                    </div>
                </div>

                <div class="layui-form-item" id = "div_shortMessageNum">
                    <label class="layui-form-label">短信数量<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="shortMessageNum" name="shortMessageNum" placeholder="请输入短信数量" type="text" class="layui-input" lay-verify="required|number" required/>
                    </div>
                </div>

                <div class="layui-form-item" id="div_shortMessageUnit">
                    <label class="layui-form-label">短信单价<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="shortMessageUnit" name="shortMessageUnit" placeholder="请输入短信单价" type="text" class="layui-input" lay-verify="required|number" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">实际到款<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="actualPayment" name="actualPayment" placeholder="请输入实际到款" type="text" class="layui-input" lay-verify="required|number" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">应收款<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="receivables" name="receivables" placeholder="请输入应收款" type="text" class="layui-input" lay-verify="required|number" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">支付图_no<span style="color: red;">*</span></label>
                    <button type="button" class="layui-btn" id="btnUpdate">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <div class="layui-input-block">
                        <input id="payPicUrl" name="payPicUrl" placeholder="请上传支付截图" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">上传照片</label>
                    <div class="layui-input-inline uploadHeadImage">
                        <div class="layui-upload-drag" id="headImg">
                            <i class="layui-icon"></i>
                            <p>点击上传图片，或将图片拖拽到此处</p>
                        </div>
                    </div>
                    预览图：
                    <input name="payPicUrls" type="hidden"/>


                    <div class="layui-upload-list" id="preview_payImgs">
                        <!--<img src="http://p2.qhimg.com/t018091c57348bb063f.png" title="点击放大" height="100px" width="100px" class="layui-upload-img uploadImgPreView"/>-->

                    </div>

                    <input type="text" id="imgUrls" name="imgUrls" style="display: none;" class="layui-input">
                </div>





                <div class="layui-form-item">
                    <label class="layui-form-label">到款时间<span style="color: red;">*</span></label>

                    <div class="layui-inline">
                        <input id="receiveTime"  name="receiveTime"  class="layui-input" type="text" placeholder="请设置到款日期"/>
                    </div>
                </div>




                <div class="layui-form-item">
                    <label class="layui-form-label">赠送内容<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <select name="gift" lay-verify="required" id="gift" lay-filter ="gift" >
                            <option value="">请选择赠送内容</option>
                            <option value="gift_crm_time">赠送CRM时长</option>
                            <option value="gift_sms_num">赠送短信条数</option>
                            <option value="gift_cash_rebate"> 现金返点</option>
                            <option value="gift_happy_time"> 欢客时长</option>
                            <option value="gift_heart_time">走心时长</option>

                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">赠送明细<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="giftDetail" name="giftDetail" placeholder="请输入赠送明细" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">查款人员<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input name="checkUserId" type="hidden"/>
                        <input id="checkUserName" name="checkUserName" placeholder="请选择查款人员。。。" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>





                <div class="layui-form-item">
                    <label class="layui-form-label">合同签署时间<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="contractSignTime" name="contractSignTime" placeholder="请选择合同签署时间" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">打款类型<span style="color: red;">*</span></label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input name="financePayType" type="hidden"/>-->
                        <!--<input id="financePayTypeDesc" name="financePayTypeDesc" placeholder="请选择打款类型。。。" type="text" class="layui-input" lay-verify="required" required/>-->
                    <!--</div>-->
                <!--</div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label">打款类型</label>
                    <div class="layui-input-block">
                        <!--<input name="financePayType" type="hidden"/>-->
                        <select name="financePayType" lay-verify="required">
                            <option value="">请选择。。。</option>
                            <option value="crop2crop">公对公</option>
                            <option value="person2crop">个对公</option>
                            <option value="alipay">支付宝</option>
                            <option value="wechatPly">微信支付</option>
                            <option value="platform_ply">平台支付</option>
                            <option value="pay_by_other">代付</option>

                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">打款用户名<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="financePaymentAccount" name="financePaymentAccount" placeholder="请输入打款用户名" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>

                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">发票类型<span style="color: red;">*</span></label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input name="financeBillType" type="hidden"/>-->
                        <!--<input id="financeBillTypeDesc" name="financeBillTypeDesc" placeholder="请选择发票类型。。。" type="text" class="layui-input" lay-verify="required" required/>-->
                    <!--</div>-->
                <!--</div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label">发票类型</label>
                    <div class="layui-input-block">
                        <!--<input name="financeBillType" type="hidden"/>-->
                        <select name="financeBillType" lay-verify="required">
                            <option value="">请选择。。。</option>
                            <option value="value_added_tax_invoice">增值税普通发票</option>
                            <option value="vat_special_invoice">增值税专用发票</option>

                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">发票抬头等<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="financeBillDetail" name="financeBillDetail" placeholder="请输入发票抬头等" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">创建时间<span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input id="createTime" name="createTime" placeholder="不可更改" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">创建人</label>
                    <div class="layui-input-block">
                        <input name="createUser" type="hidden"/>
                        <input id="createUserName" name="createUserName" type="text" class="layui-input white-border" disabled="disabled"/>
                    </div>
                </div>



                <div class="layui-form-item text-right">
                    <button class="layui-btn" lay-filter="btnSubmit" lay-submit>保存</button>
                    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog" id="backupPage">返回</button>
                </div>
            </form>
        </div>
    </div>
</div>

@}

order_edit.js （关注拖拽代码var uploadInst = upload.render、renderPayPics、弹出代码$('#shopName').click(function () 部分）

/**
 * 订单编辑对话框
 */

layui.use('upload', function(){
    var upload = layui.upload;

    //执行实例
    var uploadInst = upload.render({
        elem: '#btnUpdate' //绑定元素
        ,url: '/system/upload/' //上传接口
        ,done: function(res){
            //上传完毕回调
            console.log("上传成功" + res)
        }
        ,error: function(){
            //请求异常回调
            console.log("上传异常" + res)
        }
    });
});

var OrderInfo = {
    data: "shopTable",
    payPicUrls:[]  //用于按数组方式存放pic列表

};
/**
 * 根据商品id，决定显示元素
 * @param productId
 */
OrderInfo.showByProductId = function (productId) {
    var $ = layui.jquery;
    var isShowTimeLenght = productId ==2 || productId ==3 ||productId ==4 || productId ==5 ;
    if (isShowTimeLenght){
        $("#div_orderTime").show();
    }else {
        $("#div_orderTime").hide();
    }
    if (productId ==1) {//短信
        $("#div_shortMessageNum").show();
        $("#div_shortMessageUnit").show();
    }else {
        $("#div_shortMessageNum").hide();
        $("#div_shortMessageUnit").hide();
    }
}
/**
 * 渲染根据index渲染图片  ---列表加载图片，绑定添加查看大图、删除
 * @param index_Pic
 */
OrderInfo.renderPayPics = function (index_Pic) {
    console.log(OrderInfo.payPicUrls) ;
    var $ = layui.jquery;
    var list = OrderInfo.payPicUrls;


    console.log(index_Pic)
    //构造新图片的预览dom
    var newInput =
        '<div class="image-container" style="display: inline-block" id="container'+index_Pic+'">' +
        '<div class="delete-css">' +
        '<button id="btnImgDel'+index_Pic+'" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>' +
        '</div>' +
        '<img id="showImg'+index_Pic+'"  src="'+OrderInfo.payPicUrls[index_Pic]+'" title="点击放大" height="100px"  width="100px"  class="layui-upload-img uploadImgPreView"/>'+
        // '<img id="showImg'+index+'" style="width: 150px; margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '">' +
        '</div>';


    // 添加图片 ImgPreview-预览的dom元素的id
    ($("#preview_payImgs").append(newInput))



    //某图片放大预览
    $("#showImg"+index_Pic).bind('click',function () {
        var width = $("#showImg"+index_Pic).width();
        var height = $("#showImg"+index_Pic).height();
        var scaleWH = width/height;
        var bigH = 600;
        var bigW = scaleWH*bigH;
        if(bigW>900){
            bigW = 900;
            bigH = bigW/scaleWH;
        }

        // 放大预览图片
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            area: [bigW + 'px', bigH + 'px'], //宽高
            content: "<img width='"+bigW+"' height='"+bigH+"' src=" + OrderInfo.payPicUrls[index_Pic] + " />"
        });


    });

    //删除某图片
    $("#btnImgDel"+index_Pic).bind('click', function () {
        //delete files[index_Pic];
        //delete OrderInfo.payPicUrls[index_Pic];
        OrderInfo.payPicUrls.splice(index_Pic,1);
        //todo 删除
        console.log(JSON.stringify(OrderInfo.payPicUrls));
        document.getElementById("payPicUrl").value =JSON.stringify(OrderInfo.payPicUrls);
        $("#container"+index_Pic).remove();
    });


};



layui.use(['form', 'ax', 'laydate', "upload",'element'], function () {

    var $ = layui.jquery;
    var $ax = layui.ax;
    var form = layui.form;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var upload = layui.upload;


    //获取详情信息，填充表单

    var ajax = new $ax(Feng.ctxPath + "/order/detail/"+ Feng.getUrlParam("orderId") );
    var result = ajax.start();
    form.val('orderForm', result.data);

    OrderInfo.data = result.data;
    OrderInfo.payPicUrls = result.data.payPicUrls;
    for( index_Pic in OrderInfo.payPicUrls) {//
        OrderInfo.renderPayPics(index_Pic);
    }

    OrderInfo.showByProductId(OrderInfo.data.productId);


    //渲染时间选择框

    console.log(new Date().getTime());
    laydate.render({

        elem: '#receiveTime'

    });
    laydate.render({

        elem: '#contractSignTime'

    });





    //表单提交事件
    form.on('submit(btnSubmit)', function (data) {
        var ajax = new $ax(Feng.ctxPath + "/order/edit", function (data) {
            Feng.success("更新成功！");
            window.location.href = Feng.ctxPath + "/order";
        }, function (data) {
            Feng.error("更新失败！" + data.responseJSON.message)
        });
        ajax.set(data.field);
        ajax.start();

        return false;
    });


    /**
     * 下拉框--根据选择产品动态调整界面ui元素
     */

    form.on('select(productId)', function(data){
        var productId = data.elem.selectedIndex;
        var value = data.elem.value;
        var titel = data.elem[productId].title;


        OrderInfo.showByProductId(productId)


    });
    // 点击店铺时--在弹出对话框的table中选择
    $('#shopName').click(function () {


        layer.open({
            type: 2,
            title: '店铺选择',
            area: ['1200px', '400px'],
            content: Feng.ctxPath + '/shop/shop_list_for_dlg' ,
            btn: ['确定','关闭'],
            success: function () { //yes //end//success  弹出层打开后的回调函数


            },
            yes: function (index) { //点击“确认”按钮后触发的事件 https://www.cnblogs.com/dingxu/p/9594295.html
                var iframeWindow = window['layui-layer-iframe' + index];

                var res = iframeWindow.layui.table.checkStatus('shopTable').data;
                if (res.length == 1){
                    //var res = window["layui-layer-iframe" + index].selectedData;  //通过变量获取
                    console.log(res)
                    $('#shopId').val(res[0].shopId);
                    $('#shopName').val(res[0].companyName);
                    layer.close(index);//关闭弹层

                }

            }
        });
    });

    //返回按钮
    $("#backupPage").click(function () {
        window.location.href = Feng.ctxPath + "/order";
    });



    var resultJsons = "";

    //拖拽上传
    var uploadInst = upload.render({//用LAYUI实现表单提交（包含图片）-https://www.freesion.com/article/5555423527/
        elem: '#headImg'
        , url: '/system/upload/'
        , size: 1000
        , multiple: true
        , number: 7
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            // obj.preview(function (index, file, result) {
            //     // $('#demo1').attr('src', result); //图片链接（base64）
            //     $('#preview_payImgs').append('<img src="' + result
            //         + '" alt="' + file.name
            //         + '"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')
            //
            //
            // });
        }
        , done: function (res) {
            //根据上次到web返回的情况，添加到预览ui位置
            if (resultJsons == "") {
                resultJsons = JSON.stringify(res);
            } else {
                resultJsons = resultJsons + "&" + JSON.stringify(res); //多条图片记录采用“&”符号继续风格
            };
            console.log("update文件返回数据"+resultJsons);
            OrderInfo.payPicUrls.push(Feng.ctxPath +res.data.picUrl) //添加到图片列表




            //更新到html对应的ui中，该控件hidel隐藏方式
            document.getElementById("payPicUrl").value =JSON.stringify(OrderInfo.payPicUrls);

            index_add = OrderInfo.payPicUrls.length -1;

            //渲染 图片列表，发现这个方式不行，主要是index_add值会变化 ：js 解决循环数组绑定事件时函数中的数组失效 https://codeleading.com/article/16942596039/
            // var newInput =
            //     '<div class="image-container" style="display: inline-block" id="container'+index_add+'">' +
            //     '<div class="delete-css">' +
            //     '<button id="btnImgDel'+index_add+'" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>' +
            //     '</div>' +
            //     '<img id="showImg'+index_add+'"  src="'+OrderInfo.payPicUrls[index_add]+'" title="点击放大" height="100px"  width="100px"  class="layui-upload-img uploadImgPreView"/>'+
            //     // '<img id="showImg'+index+'" style="width: 150px; margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '">' +
            //     '</div>';
            //
            //
            // // 添加图片 ImgPreview-预览的dom元素的id
            // ($("#preview_payImgs").append(newInput))

            OrderInfo.renderPayPics(OrderInfo.payPicUrls.length -1);



            localStorage.setItem("payPicUrls", resultJsons);//本地保存，不过后期没用用的
        }
        , error: function () {//目前没用处理重新update的问题
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }

    });
});

弹出窗口shop_list_dlg.html

@layout("/common/_container.html",{js:["/assets/modular/sale/shop/shop_list_dlg.js"]}){

<div class="layui-body-header">
    <span class="layui-body-header-title">商店管理</span>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form toolbar">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <input id="beginTime" class="layui-input" type="text" placeholder="开始时间" autocomplete="off"/>
                            </div>
                            <div class="layui-inline">
                                <input id="endTime" class="layui-input" type="text"placeholder="结束时间" autocomplete="off"/>
                            </div>
                            <div class="layui-inline">
                                <input id="createUser" class="layui-input" type="text" placeholder="创建人"/>
                            </div>


                            <div class="layui-inline">
                                <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>

                            </div>

                            <div class="layui-inline">
                                <button id="btnGetCheckData" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>获取选中行数据</button>
                            </div>
                        </div>
                    </div>
                    <table class="layui-table" id="shopTable" lay-filter="shopTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="select">选择</a>

</script>

<script type="text/html" id="statusTpl">
    <input type="checkbox" lay-filter="status" value="{{d.clientId}}" lay-skin="switch" lay-text="正常|冻结" {{d.status=='ENABLE'?'checked':''}} />
</script>


@}

弹出窗口shop_list_dlg.js

var ShopsDlg = {
    tableId: "shopTable",   //表格id
    selectedData:null //第二种方式选择--保存行数据

};

/**
 * 第二种方式选择--保存行数据  --后期hide
 * 主要用于
 *  1：直接访问表中被选中的记录 （可以是复选框、单选框）
 *  2：直接访问table中的数据
 */
ShopsDlg.btnGetCheckData = function () {//layui获取table表单中的数据，以及对复选框、单选按钮的操作 https://www.cnblogs.com/zhuyujie/p/12794589.html

    //shopTable-->这里是table表格的Id
    //获取表单选择的复选框中的所有数据
    if (layui.table.checkStatus('shopTable').data.length ==1){
        var checkStatus = layui.table.checkStatus('shopTable').data;
        ShopsDlg.selectedData = layui.table.checkStatus('shopTable').data[0];
        //OrderInfo.selectedShip = layui.table.checkStatus('shopTable').data[0];  //可以定义上级表单中的变量OrderInfo.selectedShip用于存储选中的record
    }

    // let tableData = layui.table.cache["shopTable"]; //获取表单中的所有数据


};
layui.use(['layer', 'table', 'ax', 'laydate', 'admin'], function () {
    var $ = layui.$;
    var $ax = layui.ax;
    var layer = layui.layer;
    var table = layui.table;
    var laydate = layui.laydate;
    var admin = layui.admin;




    /**
     * 商铺列表  -初始化表格的列
     */
    ShopsDlg.initColumn = function () {
        return [[
            // {type: 'checkbox'},
            {type:'radio'},
            {field: 'shopId', hide: true, sort: true, title: 'id'},
            {field: 'companyName', sort: true, title: '商铺名称'},
            {field: 'bussinessType', sort: true, title: '主营类目'},
            {field: 'clientId', title: '客户id'},

            {field: 'createUser', sort: true, title: '创建人'},
            {field: 'createTime', sort: true, title: '创建时间', hide: true},
            {field: 'updateTime', sort: true, title: '更新时间', hide: true}

            //,{align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 100 }
        ]];
    };

    /**
     * 点击查询按钮
     */
    ShopsDlg.search = function () {
        var queryData = {};
        queryData['beginTime'] = $("#beginTime").val();
        queryData['endTime'] = $("#endTime").val();
        queryData['createUser'] = $("#createUser").val();

        table.reload(ShopsDlg.tableId, {where: queryData});
    };



    //渲染时间选择框
    laydate.render({
        elem: '#beginTime'
    });

    //渲染时间选择框
    laydate.render({
        elem: '#endTime'
    });

    // 渲染表格
    var tableResult = table.render({
        elem: '#' + ShopsDlg.tableId,
        url: Feng.ctxPath + '/shop/list',
        page: true,
        height: "full-98",
        cellMinWidth: 100,
        cols: ShopsDlg.initColumn()
    });




    // 搜索按钮点击事件
    $('#btnSearch').click(function () {
        ShopsDlg.search();
    });

    // 搜索按钮点击事件
    $('#btnGetCheckData').click(function () {
        ShopsDlg.btnGetCheckData();
    });


    // 添加按钮点击事件
    $('#btnAdd').click(function () {
        ShopsDlg.openAddCustomer();
    });

    /**
     * 点击编辑用户按钮
     *
     * @param data 点击按钮时候的行数据
     */
    ShopsDlg.onSelect = function (data) {
        ShopsDlg.selectedData = data;



    };



    // 工具条点击事件 ---测试用代码，该工具hide
    table.on('tool(' + ShopsDlg.tableId + ')', function (obj) {
        //JSON.stringify(data)  ="{"bussinessType":"鞋类222","clientId":1243,"createTime":"2020-12-15 13:43:20","companyName":"耐克京东店2222","createUser":"1338373521894236162","updateTime":"2020-12-15 17:11:12","shopId":5,"userName":"--","regularMessage":""}"
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent === 'select'){
            ShopsDlg.onSelect(data);

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);//关闭本当前窗口

        }
    });





});

参考

layui文档
layui-使用手册
layui demo----------建议看更多例子
js 解决循环数组绑定事件时函数中的数组失效