首先说明一下，本人是在公司先接触使用的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 += ' <a style="cursor: pointer;color:red" onclick="DeleteBankDirectAuto(' + d.pkid + ')">删除</a>';
if (!d.enable) {
alink += ' <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>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);
});
}
来源：oschina
链接：https://my.oschina.net/u/4350311/blog/3311180