首页 / LAYUI / layui-前端框架整体使用实例
layui-前端框架整体使用实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了layui-前端框架整体使用实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含23107字，纯文字阅读大概需要34分钟。
内容图文
首先说明一下，本人是在公司先接触使用的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 });
returnfalse;
}
if (bizType =="") {
layer.close(loadIndex);
layer.msg("请选择单据类型！", { icon: 5 });
returnfalse;
}
if (payCompanyName =="") {
layer.close(loadIndex);
layer.msg("付款公司不能为空！", { icon: 5 });
returnfalse;
}
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 });
}
returnfalse;
} 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);
}
});
returntrue;
}
}
//删除操作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 });
returnfalse;
} 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);
});
}
原文：https://www.cnblogs.com/q994321263/p/12299754.html
内容总结
以上是互联网集市为您收集整理的layui-前端框架整体使用实例全部内容，希望文章能够帮你解决layui-前端框架整体使用实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】