layui-前端框架整體使用實例（三級聯動）

本文轉載自查看原文 2020-02-12 17:09 1500 前端 UI 框架/ JS/ Jquery

首先說明一下，本人是在公司先接觸使用的layui，一個功能需求下來之后是能夠完成的，但是在使用過程中對layui沒有一個整體的理解，遇到問題不能靈活的變通。趁着假期對layui來一個整體的梳理與理解，有不對的地方希望能指正。同時在理解的時候也上網搜了很多博文，遇到一些好的，在文章中都會記錄下來，並給出鏈接。參考layui官網(https://www.layui.com/doc/base/infrastructure.html)

1.非模塊化和模塊化的區別是（參考博文：https://www.cnblogs.com/qlqwjy/p/8975931.html）

　　　　非模塊化使用時加載相應的模塊。不用每次都調用layui.use([],fun...)引入對應模塊，引入的JS是/layui/layui.all.js
　　　　模塊化一次性加載所有的模塊。必須每次都調用layui.use([],fun...)引入對應模塊，引入的JS是/layui/layui.js　　(推薦這種，但是寫起來不太方便)

2.渲染常用的方法：

有些時候，你的有些表單元素可能是動態插入的。這時 form 模塊的自動化渲染是會對其失效的。雖然我們沒有雙向綁定機制（因為我們叫經典模塊化框架，偷笑.gif）但沒有關系，你只需要執行 form.render(type, filter); 方法即可,詳細的使用請查看 https://www.layui.com/doc/modules/form.html#render

table中我們更推薦采用“方法級渲染”的做法，其最大的優勢在於你可以脫離HTML文件，而專注於JS本身。尤其對於項目的頻繁改動及發布，其便捷性會體現得更為明顯。而究竟它與“自動化渲染”的方式誰更簡單，也只能由各位猿猿們自行體味了。詳細的使用請查看 https://www.layui.com/doc/modules/table.html#methodRender

3. 事件監聽：

form模塊在 layui 事件機制中注冊了專屬事件

默認情況下，事件所監聽的是全部的form模塊元素，但如果你只想監聽某一個元素，使用事件過濾器即可。
如：<select lay-filter="test"></select>

form.on('select(test)', function(data){console.log(data)})

4. 在工作中使用到的實例解析：

HTML前台展示用例

統一模板中使用的是模塊化的layui的js
<script src="/Scripts/plugins/layer/laydate/laydate.js"></script>
<script src="/Scripts/plugins/layer/layer.min.js"></script>
<script src="/plugins/layer/layer.ext.js"></script>



<script>
layui.config({
base: '/Scripts/'
}).extend({
formSelects: 'formSelects-v4'
});
</script>



------子頁面中的使用
@{
    Layout = "/Views/Shared/_NewIframeLayout.cshtml";
    ViewBag.Title = "銀企自動付款配置列表";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>調整返利數據</title>
    <style>
        .formContainer .formItem .layui-input {
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="newNav-fadeIn-wrapper">
        <div class="title">銀企自動付款配置列表</div>
        <hr class="layui-bg-gray">
        <div>
            <form class="layui-form formContainer">
                <div class="formItem">
                    <label>費用所屬公司:</label>
                    <div>
                        @Html.DropDownList("ReceiveOrgId", new SelectList(ViewBag.CompanyInfo as System.Collections.IEnumerable, "ReceiveOrgId", "ReceiveOrgName"), "-請選擇-")
                    </div>
                </div>

                <div class="formItem">
                    <label>單據類型:</label>
                    <div>
                        <input type="text" name=" bizType" class="layui-input">
                    </div>
                </div>
                <div class="formItem">
                    <label>銀行賬號:</label>
                    <div>
                        <input type="text" name="payBankaccountNo" class="layui-input">
                    </div>
                </div>
                <div class="formItem">
                    <label>自動推送:</label>
                    <div>
                        <select name="isAllowSubmit" class="selectopts input-text">
                            <option value="" selected="selected">-請選擇- </option>
                            <option value="true">是 </option>
                            <option value="false">否 </option>
                        </select>
                    </div>
                </div>
                <div class="formItem">
                    <label>自動付款:</label>
                    <div>
                        <select name="isAllowPay" class="selectopts input-text">
                            <option value="" selected="selected">-請選擇- </option>
                            <option value="True">是 </option>
                            <option value="False">否</option>
                        </select>
                    </div>
                </div>

                <div class="formItem">
                    <label>狀態:</label>
                    <div>
                        <select name="isEnable" class="selectopts input-text">
                            <option value="" selected="selected">-請選擇- </option>
                            <option value="True">啟用 </option>
                            <option value="False">未啟用</option>
                        </select>
                    </div>
                </div>
                <div class="formItem">
                    <button class="layui-btn" id="searchBtn">查找</button>
                    <button class="layui-btn" id="addBtn">新增</button>
                    <button class="layui-btn" id="addImportBtn">導入</button>
                    <button class="layui-btn" id="addExportBtn">導出導入模板</button>
                </div>
                <div class="formItem">
                    <label>自動推送:</label>
                    <button class="layui-btn layui-btn-normal" id="autoSubmitOpen">打開</button>
                    <button class="layui-btn layui-btn-warm" id="autoSubmitClose">關閉</button>
                </div>
                <div class="formItem">
                    <label>自動付款:</label>
                    <button class="layui-btn layui-btn-normal" id="autoPayOpen">打開</button>
                    <button class="layui-btn layui-btn-warm" id="autoPayClose">關閉</button>
                </div>
            </form>
            <div>
                <table id="dataTable"></table>
            </div>
            ---------編輯界面有個layui的4級聯動的功能
            <div id="editArea" style="display: none; padding: 10px">
                <form class="layui-form" action="">
                    <input type="text" class="layui-input" id="PKID" style="display: none;" />
                    <div class="formItemVertical">
                        <label class="layui-form-label"><span style="color: red">*</span>單據類型：</label>
                        <div class="layui-input-block">
                            <select id="editBizType" name="editBizType" lay-filter="editBizType">
                                <option value="">--請選擇--</option>
                                <option value="用款申請單">用款申請單</option>
                                <option value="差旅報銷單">差旅報銷單</option>
                                
                            </select>
                        </div>
                    </div>
                    <div class="formItemVertical">
                        <label class="layui-form-label"><span style="color: red">*</span>費用所屬公司：</label>
                        <div class="layui-input-block">
                            <select id="ReceiveOrg" name="ReceiveOrg" lay-filter="ReceiveOrg"></select>
                        </div>
                    </div>
                    <div class="formItemVertical">
                        <label class="layui-form-label"><span style="color: red">*</span>開戶銀行：</label>
                        <div class="layui-input-block">
                            <select id="Bank" name="Bank" lay-filter="Bank"><option value="">--請選擇--</option></select>
                        </div>
                    </div>
                    <div class="formItemVertical">
                        <label class="layui-form-label"><span style="color: red">*</span>銀行賬號：</label>
                        <div class="layui-input-block">
                            <select id="Account" name="Account" lay-filter="Account"><option value="">--請選擇--</option></select>
                        </div>
                    </div>
                    <div class="formItemVertical">
                        <label class="layui-form-label"><span style="color: red">*</span>付款公司：</label>
                        <div class="layui-input-block">
                            <input type="text" id="PayBankName" name="PayBankName" class="layui-input" readonly>
                        </div>
                    </div>

                    <div class="formItemVertical">
                        <label class="layui-form-label">自動推送：</label>
                        <div class="layui-input-block">
                            <select id="AutoSubmit" name="AutoSubmit">
                                <option value="false">否</option>
                                <option value="true">是</option>
                            </select>
                        </div>
                    </div>
                    <div class="formItemVertical">
                        <label class="layui-form-label">自動付款：</label>
                        <div class="layui-input-block">
                            <select id="AutoPay" name="AutoPay">
                                <option value="false">否</option>
                                <option value="true">是</option>
                            </select>
                        </div>
                    </div>

                    <div class="formItemVertical">
                        <label class="layui-form-label">備注：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="SpecialRemark" name="SpecialRemark" />
                        </div>
                    </div>
                </form>
            </div>
           ----文件上傳功能
            <div id="importExcel" style="display: none; padding: 30px 30px 10px;">
                <form class="bs-example bs-example-form" role="form">
                    <div class="input-group">
                        <input type="text" id="fileName" class="form-control" />
                        <a id="selectFile" class="input-group-addon" onclick="openFile()">選擇文件</a>
                    </div>
                </form>
                <input style="display: none" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="_selectFile" onchange="changeFile(this)" />
            </div>
        </div>
    </div>
     
---PayCompanyInfo.js  中為封裝的銀行配置子項
<script src="~/Scripts/PayBankInfo/PayCompanyInfo.js"></script> <script>
        
        //定義全局table變量
        var dataTable = null;
         //編輯中組織下拉框的內容，屬於
        GetCompanyInfo("XXX", "1");

        //模塊化使用 layui 
        layui.use(['form', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
            //綁定日期控件
            document.querySelectorAll('.dateSelect').forEach(e => layui.laydate.render({ elem: e }));

            //生成table表數據
            dataTable = renderTable(getTableParam());
            //綁定按鈕搜索事件
            bindSearchEvent(dataTable);
            //綁定下拉框事件
            bindSelectChange(layui.form);
        });

        //渲染table的參數設置：https://www.layui.com/doc/modules/table.html  基礎參數一覽表 
        function getTableParam() {
            return {
                url: '/PurchaseOrder/XXX',
                // 異步數據接口   接口返回的數據格式並不一定都符合 table 默認規定的格式，需要用 parseData來裝換成需要的參數格式
                parseData: r => {
                    return {
                        code: 0,
                        count: r.data.total,
                        data: r.data.list
                    }
                },
                loading: true, //翻頁加loading
                 // cols - 表頭參數一覽表
                 //templet 自定義模板
                cols: [[
                    { type: 'checkbox' },
                    { field: 'pkid', title: 'pkid' },
                    { field: 'companyName', title: '費用所屬公司' },
                    { field: 'bizType', title: '單據類型' },
                    { field: 'payBankaccountNo', title: '賬號' },
                    { field: 'payBankName', title: '開戶行' },
                    { field: 'payCompanyName', title: '付款公司' },
                    {
                        field: 'allowSubmit', title: '自動推送', templet: function (d) {
                            if (d.allowSubmit) {
                                return "是";
                            } else {
                                return "否";
                            }
                        }
                    },
                    {
                        field: 'enable', title: '狀態', templet: function (d) {
                            if (d.enable) {
                                return "啟用";
                            } else {
                                return "未啟用";
                            }
                        }
                    },
                    {
                        field: 'allowPay', title: '自動付款', templet: function (d) {
                            if (d.allowPay) {
                                return "是";
                            } else {
                                return "否";
                            }
                        }
                    },
                    { field: 'createTime', title: '創建時間', templet: function (d) { return _.dateFormat(new Date(d.createTime)) } },
                    { field: 'createdBy', title: '創建人' },
                    { field: 'lastUpdateTime', title: '最后更新時間', templet: function (d) { return _.dateFormat(new Date(d.lastUpdateTime)) } },
                    {
                        field: '操作', title: '操作', templet: function (d) {
                            var alink = "<a style='cursor: pointer; color: blue'  onclick=\"AuditBankDirectAutoPay('" + d.pkid + "')\" style='cursor:pointer''>編輯</a>";
                            alink += '&nbsp;&nbsp;<a style="cursor: pointer;color:red" onclick="DeleteBankDirectAuto(' + d.pkid + ')">刪除</a>';
                            if (!d.enable) {
                                alink += '&nbsp;&nbsp;<a style="cursor: pointer;color:red" onclick="AuditBankDirectStatus(' + d.pkid + ')">審核</a>';
                            }
                            return alink;
                        }
                    },
                ]],
                where: { TransType: 'RECHARGE' }
            }
        }
        //生成表格的渲染方法 
        function renderTable(param) {
            var p = {
                elem: '#dataTable',
                page: true,
                style: 'line',
                size: 'sm',
                id: 'pkid'
            };
            // 將所有可枚舉屬性的值從一個或多個源對象復制到目標對象,它將返回目標對象。  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
            Object.assign(p, param);
            return layui.table.render(p);
        }
        //重載表格
        function reloadTable(table, param) {
            var p = Object.assign({ page: { curr: 1 } }, param);
            var where = { TransType: 'RECHARGE' };
            var form = $('.formContainer').serializeArray();
            for (var kv of form) {
                if (!where[kv.name]) {
                    where[kv.name] = kv.value;
                }
            }
            p.where = Object.assign(where, p.where)
            table.reload(p);
        }
        //按鈕綁定事件
        function bindSearchEvent(table) {
            $('#searchBtn').click(function (e) {
                reloadTable(table);
                e.preventDefault(); //阻止原來的提交表單操作
            })
            $("#addBtn").click(function (e) {
                AddBankDirectAutoPay();
                e.preventDefault(); //阻止原來的提交表單操作
            });
            $("#autoSubmitOpen").click(function (e) {
                BankDirectAutoOptionSetting("批量自動推送打開", true, null);
                e.preventDefault(); //阻止原來的提交表單操作
            });
            $("#autoSubmitClose").click(function (e) {
                BankDirectAutoOptionSetting("批量自動推送關閉", false, null);
                e.preventDefault(); //阻止原來的提交表單操作
            });
            $("#autoPayOpen").click(function (e) {
                BankDirectAutoOptionSetting("批量自動付款打開", null,true);
                e.preventDefault(); //阻止原來的提交表單操作
            });
            $("#autoPayClose").click(function (e) {
                BankDirectAutoOptionSetting("批量自動付款關閉", null, false);
                e.preventDefault(); //阻止原來的提交表單操作
            });
       
            //導入配置信息
            $("#addImportBtn").click(function (e){
                ImportBankDirectAutoSetting();
                e.preventDefault();
            });
            //導出導入模板
            $("#addExportBtn").click(function (e) {
                ExportImportBankDirectTemplate();
                e.preventDefault();
            });
        }
        //select變化之后的監聽事件
        function bindSelectChange(form) {

            form.on('select(editBizType)', function (data) {
                //console.log(data.value);
                //if (data.value == "差旅報銷單") {
                //   //簡單賦值與操作
                //    //$("#ReceiveOrg").val("1004");
                //    //GetBankInfo("1");
                //    //$("#Bank").val("3");
                //    //GetAccountInfo("1");
                //    //layui.form.render('select');
                //}
            });
             //form.on 為事件監聽事件，發現下拉框有變動的話，就進行聯動的下級select元素中的值變動，修改變動之后的from表單元素要進行重新的渲染
            form.on('select(ReceiveOrg)', function (data) {
                GetBankInfo("1");
                form.render('select');
            });
            form.on('select(Bank)', function (data) {
                GetAccountInfo("1");
                form.render('select');
            });
            form.on('select(Account)', function (data) {
                GetPayAccountName();
                form.render('select');
            });
        }

        //新增
        function AddBankDirectAutoPay() {
            var load = layer.load();
            $.ajax({
                type: 'post',
                url: '/PurchaseOrder/XXX',
                success: function (data) {
                    //彈出層
                    var index1 = layer.open({
                        type: 1,
                        title: '銀企自動付款編輯',
                        content: $('#editArea'),
                        area: ['500px', '450px'],
                        btn: ['確認', '取消'],
                        success: function () {
                            $("#PKID").val('0')
                            $("#editBizType").val('');
                            $("#ReceiveOrg").val('1001');
                            GetBankInfo("1");
                            $("#Bank").val('');
                            GetAccountInfo("1");
                            $("#Account").val('');
                            $("#AutoSubmit").val('false');
                            $("#AutoPay").val('false');
                            $("#SpecialRemark").val('');
                            $("#PayBankName").val('');
                            //對新增彈框中form表單賦初值，同時重新進行渲染操作
                            layui.form.render();
                            //對form表單中的額所有下拉列表進行重新的渲染
                           // layui.form.render('select');
                        },
                        yes: function () {
                            var resultbool = BankDirectAutoPaySubmit();
                            if (resultbool) {
                                layer.closeAll();
                            };
                        },
                        btn2: function () {
                            layer.close(index1);
                        }
                    });
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    layer.msg("服務器出錯！" + errorThrown, { icon: 5 });
                    layer.close(load);
                }
            });
        }
        //修改
        function AuditBankDirectAutoPay(pkid) {
            var load = layer.load();
            $.ajax({
                type: 'post',
                url: '/PurchaseOrder/XXX',
                data: { pkid: pkid },
                success: function (data) {
                    layer.close(load);
                    var index1 = layer.open({
                        type: 1,
                        title: '銀企自動付款編輯',
                        content: $('#editArea'),
                        area: ['500px', '450px'],
                        btn: ['確認', '取消'],
                        success: function () {
                            $("#PKID").val(data.PKID);
                            $("#editBizType").val(data.BizType);
                            $("#ReceiveOrg").val(data.Companyid);
                            //三級聯動的效果
                            GetBankInfo("1");
                            $("#Bank").val(data.Bankid);
                            GetAccountInfo("1");
                            $("#Account").val(data.Accountid);
                            $("#AutoSubmit").val(data.AutoSubmit.toString());
                            $("#AutoPay").val(data.AutoPay.toString());
                            $("#SpecialRemark").val(data.Remark);
                            $("#PayBankName").val(data.PayCompanyName);
                            layui.form.render();
                            layui.form.render('select');
                        },
                        yes: function () {
                            var resultbool = BankDirectAutoPaySubmit();
                            if (resultbool) {
                                layer.closeAll();
                            };
                        },
                        btn2: function () {
                            layer.close(index1);
                        }
                    });
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    layer.msg("服務器出錯！" + errorThrown, { icon: 5 });
                    layer.close(load);
                }
            });
        }

        //確認要增加或者修改配置文件中的信息
        function BankDirectAutoPaySubmit() {
            var loadIndex = layer.load();
            var pkid = $("#PKID").val();
            var bizType = $("#editBizType").val();
            var companyid = $("#ReceiveOrg").val();
            var companyname = $("#ReceiveOrg").find("option:selected").text();
            var bankid = $("#Bank").val();
            var bankname = $("#Bank").find("option:selected").text();
            var accountid = $("#Account").val();
            var accountdata = $("#Account").find("option:selected").text();
            var specialRemark = $("#SpecialRemark").val().trim();
            var autoSubmit = $("#AutoSubmit").val();
            var autoPay = $("#AutoPay").val();
            var payCompanyName = $("#PayBankName").val();

            if (specialRemark.length > 120) {
                layer.close(loadIndex);
                layer.msg("特殊說明不能超過120字！", { icon: 5 });
                return false;
            }
            if (bizType == "") {
                layer.close(loadIndex);
                layer.msg("請選擇單據類型！", { icon: 5 });
                return false;
            }
            if (payCompanyName == "") {
                layer.close(loadIndex);
                layer.msg("付款公司不能為空！", { icon: 5 });
                return false;
            }


            if (companyid === "" || bankid === "" || accountid === "") {
                layer.close(loadIndex);
                if (companyid === "") {
                    layer.msg("請選擇付款組織！", { icon: 5 });
                }
                if (bankid === "") {
                    layer.msg("請選擇付款銀行！", { icon: 5 });
                }
                if (accountid === "") {
                    layer.msg("請選擇付款銀行賬號！", { icom: 5 });
                }
                return false;
            } else {
                var load1 = layer.load();
                $.ajax({
                    type: 'post',
                    async: true,
                    data: {
                        "pkid": pkid, "bizType": bizType, "companyname": companyname,
                        "companyid": companyid, "bankid": bankid, "bankname": bankname,
                        "accountid": accountid, "accountdata": accountdata, "Remark": specialRemark, "autoSubmit": autoSubmit, "autoPay": autoPay,
                        "payCompanyName": payCompanyName
                    },
                    url: '/PurchaseOrder/XXX',
                    success: function (result) {
                        if (result.Success) {
                            layer.msg("操作成功", { icon: 6 });
                            layer.closeAll();
                        } else {
                            layer.msg("操作失敗！" + result.Result, { icon: 5 });
                        }
                        layer.close(loadIndex);
                        reloadTable(dataTable);
                        layer.close(load1);
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        layer.close(loadIndex);
                        layer.msg("操作失敗：" + errorThrown, { icon: 6 });
                        layer.close(load1);
                    }
                });
                return true;
            }
        }

        //刪除操作
        function DeleteBankDirectAuto(pkid) {
            layer.confirm('確認要刪除嗎？', function (i) {
                $.ajax({
                    type: 'post',
                    data: { "pkid": pkid },
                    url: '/PurchaseOrder/XXX',
                    success: function (result) {
                        if (result.Success) {
                            layer.msg("刪除成功！");
                        } else {
                            layer.msg("刪除失敗！" + result.Message);
                        }
                        layer.close(i);
                        reloadTable(dataTable);
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        layer.msg("刪除失敗！" + errorThrown);
                    }
                });
            });
        }
        //批量進行打開與關閉操作
        function BankDirectAutoOptionSetting(text,autoSubmit, autoPay) {
            layer.confirm(text+'確定進行批量操作？', function (i) {
                //批量操作
                var checkIDs = layui.table.checkStatus('pkid') //idTest 即為基礎參數 id 對應的值
                var pkidstr = ''; 
                var data = checkIDs.data;
                if (data.length == 0) {
                    layer.msg('請選擇數據！', { icon: 5 });
                    return false;
                } else {
                    for (var i = 0; i < data.length; i++) {
                        pkidstr += data[i].pkid + ',';
                    }
                }
                $.ajax({
                    type: 'post',
                    data: { "pkidstr": pkidstr, "autoSubmit": autoSubmit, "autoPay": autoPay },
                    url: '/PurchaseOrder/XXX',
                    success: function (result) {
                        if (result.Success === true) {
                            layer.msg(text+"批量操作成功！");
                        } else {
                            layer.msg(text+"批量操作失敗！" + result.Message);
                        }
                        layer.close(i);
                        reloadTable(dataTable);
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        layer.msg(text+"批量操作失敗！" + errorThrown);
                    }
                });
            });
        }

        //導入配置信息
        function ImportBankDirectAutoSetting() {
            var create = layer.open({
                type: 1,
                title: '導入銀企自動付款配置',
                skin: 'layui-layer-rim', //加上邊框
                area: ['400px', '200px'], //寬高
                content: $('#importExcel'),
                btn: ['確認', '取消'],
                yes: function (i, e) {
                    //遮罩層
                    var mask = _.showMask();
                    var form = new FormData();
                    var file = $('#_selectFile')[0].files[0];
                    if (!file)
                        layer.msg("文件不能為空");
                    form.append('file', file);
                    $.ajax({
                        url: '/PurchaseOrder/XXX',
                        data: form,
                        method: 'POST',
                        contentType: false,
                        processData: false,
                        success: function (r) {
                            if (r.error) {
                                layer.msg("導入失敗！" + r.message);
                            }
                            else {
                                layer.msg("導入成功！");
                            }

                            mask.close();
                            layer.close(create);
                            reloadTable(dataTable);
                        },
                        error: function () {
                            close();
                            layer.msg('網絡錯誤');
                        }
                    });
                },
                btn2: function () {
                    layer.close(create);
                }
            });
        }
        //導出導入模板
        function ExportImportBankDirectTemplate() {
            window.location.href = '/ExexlModel/銀企自動付款配置導入模板.xlsx';
        }
        // 選擇文件事件
        function openFile() {
            $('#_selectFile').click();
        };
        //顯示上傳的文件名
        function changeFile(target) {
            if (target.files[0]) {
                $('#fileName').val(target.files[0].name);
            }
        };
        //更新審核狀態
        function AuditBankDirectStatus(pkid) {
            layer.confirm('確認要審核通過嗎？', function (i) {
                $.ajax({
                    type: 'post',
                    data: { "pkid": pkid },
                    url: '/PurchaseOrder/XXX',
                    success: function (result) {
                        if (result.Success) {
                            layer.msg("審核通過！");
                        } else {
                            layer.msg("審核失敗！" + result.Message);
                        }
                        layer.close(i);
                        reloadTable(dataTable);
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        layer.msg("審核失敗！" + errorThrown);
                    }
                });
            });
        }

    </script>
</body>
</html>

View Code

4級聯動的內嵌JS代碼

----生成


//初始化企業信息
function GetCompanyInfo(companyName, isBankDirect) {
    $.ajaxSettings.async = false;
    //得到企業下拉列表
    $.getJSON('/PurchaseOrder/XXXX', function (receiveorgs) {
        var sb = '<option value="">--請選擇--</option>';
        for (var index = 0; index < receiveorgs.ReceiveOrg.length; index++) {
            var receiveorg = receiveorgs.ReceiveOrg[index];
            if (receiveorg.ReceiveOrgName == companyName) {
                sb += '<option selected="selected" value="' + receiveorg.ReceiveOrgId + '">' + receiveorg.ReceiveOrgName + '</option>';
            }
            else {
                sb += '<option value="' + receiveorg.ReceiveOrgId + '">' + receiveorg.ReceiveOrgName + '</option>';
            }
        }
        $("#ReceiveOrg").html(sb);
    });
    GetBankInfo(isBankDirect);
    GetAccountInfo(isBankDirect);
}
//初始化企業信息
function GetAllCompanyInfo(companyName, isBankDirect) {
    $.ajaxSettings.async = false;
    //得到企業下拉列表
    $.getJSON('/PurchaseOrder/XXX', function (receiveorgs) {
        var sb = '<option value="">--請選擇--</option>';
        for (var index = 0; index < receiveorgs.ReceiveOrg.length; index++) {
            var receiveorg = receiveorgs.ReceiveOrg[index];
            if (receiveorg.ReceiveOrgName == companyName) {
                sb += '<option selected="selected" value="' + receiveorg.ReceiveOrgId + '">' + receiveorg.ReceiveOrgName + '</option>';
            }
            else {
                sb += '<option value="' + receiveorg.ReceiveOrgId + '">' + receiveorg.ReceiveOrgName + '</option>';
            }
        }
        $("#ReceiveOrg").html(sb);
    });
    GetAllBankInfo(isBankDirect);
    GetAccountInfo(isBankDirect);
}
//銀行信息
function GetBankInfo(isBankDirect) {
    var companyId = $("#ReceiveOrg").val();
    var bankname = "";
   xSettings.async = false;
    //得到關聯銀行信息
    $.getJSON('/PurchaseOrder/XXX?CompanyId=' + companyId + "&&IsBankDirect=" + isBankDirect, function (banks) {
        var sb = '<option value="">--請選擇--</option>';
        for (var index = 0; index < banks.Bank.length; index++) {
            var bank = banks.Bank[index];
            if (bank.BankName == bankname) {
                sb += '<option selected="selected" value="' + bank.BankId + '">' + bank.BankName + '</option>';
            }
            else {
                sb += '<option value="' + bank.BankId + '">' + bank.BankName + '</option>';
            }
        }
        $("#Bank").html(sb);
    });
    GetAccountInfo();
}

//銀行+其他貨幣資金信息
function GetAllBankInfo(isBankDirect) {
    var companyId = $("#ReceiveOrg").val();
    var bankname = "";
    
    $("#Bank").html("");
    $.ajaxSettings.async = false;
    //得到關聯銀行信息
    $.getJSON('/PurchaseOrder/XXX?CompanyId=' + companyId + "&&IsBankDirect=" + isBankDirect, function (banks) {
        var sb = '<option value="">--請選擇--</option>';
        for (var index = 0; index < banks.Bank.length; index++) {
            var bank = banks.Bank[index];
            if (bank.BankName == bankname) {
                sb += '<option selected="selected" value="' + bank.BankId + '">' + bank.BankName + '</option>';
            }
            else {
                sb += '<option value="' + bank.BankId + '">' + bank.BankName + '</option>';
            }
        }
        $("#Bank").html(sb);
    });
    GetAccountInfo();
}
//銀行賬號信息
function GetAccountInfo(isBankDirect) {
    var BankId = $("#Bank").val();
    var companyId = $("#ReceiveOrg").val();
    var account = "";
   
    $.ajaxSettings.async = false;
    $.getJSON('/PurchaseOrder/XXX?BankId=' + BankId + '&&CompanyId=' + companyId + "&&IsBankDirect=" + isBankDirect, function (bankaccounts) {
        var sb = '<option value="">--請選擇--</option>';
        for (var index = 0; index < bankaccounts.Account.length; index++) {
            var bankaccount = bankaccounts.Account[index];
            if (bankaccount.AccountName == account) {
                sb += '<option selected="selected" value="' + bankaccount.AccountId + '">' + bankaccount.AccountName + '</option>';
            }
            else {
                sb += '<option value="' + bankaccount.AccountId + '">' + bankaccount.AccountName + '</option>';
            }
        }
        $("#Account").html(sb);
    });
}

//根據銀行賬戶查詢付款銀行名稱
function GetPayAccountName() {
    //銀行賬戶
    var bankAccount = $("#Account").find("option:selected").text();
    $.getJSON('/PurchaseOrder/XXX?bankAccount=' + bankAccount, function (bankAccountName) {
        $("#PayBankName").val(bankAccountName);
    });
}

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Layui實現三級聯動 layui的省市縣三級聯動 JS三級聯動實例三級聯動（前端代碼） Layui的省市區三級聯動關於layui 三級聯動渲染報錯解決方法使用JSon實現三級聯動 layui 下拉框三級聯動 layui省市區三級聯動 layui省市區三級聯動城市選擇