layui-前端框架整体使用实例

首先说明一下，本人是在公司先接触使用的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

layui-前端框架整体使用实例

猜你喜欢