guns -10實現layui 彈窗table選中、拖拽圖片上傳、查看大圖 目標編輯 效果圖 運行代碼 參考

目標編輯

某order某個值是按彈窗中選中的table項進行回填到form
order對應的交易記錄憑證，需要上傳圖片

效果圖

運行代碼

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 解決循環數組綁定事件時函數中的數組失效