【.net core】yisha框架单页面双列表联动效果示例

 gridTable1列表数据为gridTable别表数据的子数据，点击gridTable时gridTable1列表数据更新，

@{Layout = "~/Views/Shared/_Index.cshtml";}
<div class="container-div"><div class="row"><div id="searchDiv" class="col-sm-12 search-collapse"><div class="select-list"><ul><li>合同名称：<input id="name" col="name" type="text" /></li><li>签订时间：<input id="signDate" col="signDate" type="text" /></li><li>负责人：<input id="headUser" col="headUser" type="text" /></li><li>审核状态：<input id="status" col="status" type="text" /></li><li><a id="btnSearch" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search"></i>&nbsp;搜索</a></li></ul></div></div><div class="btn-group-sm hidden-xs" id="toolbar"><a id="btnAdd" class="btn btn-success" onclick="showSaveForm(true)"><i class="fa fa-plus"></i> 新增</a><a id="btnEdit" class="btn btn-primary disabled" onclick="showSaveForm(false)"><i class="fa fa-edit"></i> 修改</a><a id="btnDelete" class="btn btn-danger disabled" onclick="deleteForm()"><i class="fa fa-remove"></i> 删除</a></div><div class="btn-group-sm hidden-xs" id="toolbar"><a id="btnAddDetail" class="btn btn-success" onclick="showSaveDetailForm(true)"><i class="fa fa-plus"></i> 新增</a><a id="btnEditDetail" class="btn btn-primary disabled" onclick="showSaveDetailForm(false)"><i class="fa fa-edit"></i> 修改</a><a id="btnDeleteDetail" class="btn btn-danger disabled" onclick="deleteDetailForm()"><i class="fa fa-remove"></i> 删除</a></div><div class="col-sm-12 select-table table-striped" style="min-height: 47%;max-height: 47%"><table id="gridTable" data-mobile-responsive="true"></table></div><div class="col-sm-12 select-table table-striped" style="min-height: 47%;max-height: 47%"><table id="gridTable1" data-mobile-responsive="true"></table></div></div>
</div><script type="text/javascript">var curContractId = '0'$(function () {initGrid();initDetailGrid('0');});function initGrid() {var queryUrl = '@Url.Content("~/ContractManage/Salesmanagement/GetPageListJson")';$('#gridTable').ysTable({url: queryUrl,height:'350',onClickRow: function (row) {//单击事件，点击触发gridTable1表数据更新console.log('click',row.Id)refreshDetailGrid({ ContractId :row.Id});//渲染详细列表数据},columns: [{ checkbox: true, visible: true },{ field: 'Id', title: 'Id', visible: false },{ field: 'name', title: '合同名称' },{ field: 'signDate', title: '签订时间' },//{ field: 'contractNum', title: '合同编码' },//{ field: 'internalcontractNum', title: '内部合同编号' },{ field: 'internalUnit', title: '需求单位' },{ field: 'batchName', title: '批次名称' },//{ field: 'proId', title: '产品id', visible: false },//{ field: 'proName', title: '产品名称' },//{ field: 'model', title: '型号' },{ field: 'businessType', title: '业务类型' },//{ field: 'numbers', title: '数量' },//{ field: 'unit', title: '单位' },{ field: 'contractAllMonwy', title: '合同总额' },{ field: 'mateMoney', title: '匹配总额' },{ field: 'performanceMoney', title: '履约金额' },{ field: 'unPerformanceMoney', title: '未履约金额' },{ field: 'invoicingMoney', title: '开票金额' },{ field: 'unInvoicingMoney', title: '已匹配未开票金额' },{field: 'documentLink', title: '合同文件',formatter: function (value, row, index) {if (value != '') {return '<a href="' + value + '">下载</a>'}}},{ field: 'headUser', title: '负责人' },{ field: 'addDate', title: '添加时间' },{field: 'status', title: '审核状态',formatter: function (value, row, index) {if (value == "@VerifyEnum.Pass.ParseToInt()") {return '<span class="badge badge-primary">' + "@VerifyEnum.Pass.GetDescription()" + '</span>';}else if (value == "@VerifyEnum.UnPass.ParseToInt()") {return '<span class="badge badge-danger">' + "@VerifyEnum.UnPass.GetDescription()" + '</span>';}else {return '<span class="badge badge-warning">' + "@VerifyEnum.Wait.GetDescription()" + '</span>';}}},{field: 'orderStatus', title: '订单状态',formatter: function (value, row, index) {if (value == "@SalesOrderEnum.Ordered.ParseToInt()") {return '<span class="badge badge-primary">' + "@SalesOrderEnum.Ordered.GetDescription()" + '</span>';}else if (value == "@SalesOrderEnum.Produced.ParseToInt()") {return '<span class="badge badge-primary">' + "@SalesOrderEnum.Produced.GetDescription()" + '</span>';}else if (value == "@SalesOrderEnum.Shipped.ParseToInt()") {return '<span class="badge badge-primary">' + "@SalesOrderEnum.Shipped.GetDescription()" + '</span>';}else if (value == "@SalesOrderEnum.Received.ParseToInt()") {return '<span class="badge badge-primary">' + "@SalesOrderEnum.Received.GetDescription()" + '</span>';}else if (value == "@SalesOrderEnum.Invoiced.ParseToInt()") {return '<span class="badge badge-primary">' + "@SalesOrderEnum.Invoiced.GetDescription()" + '</span>';}else {return '<span class="badge badge-warning">' + "@SalesOrderEnum.Wait.GetDescription()" + '</span>';}}},{title: '操作',align: 'center',formatter: function (value, row, index) {var actions = [];if (row.status == 0) {actions.push('<a class="btn btn-warning btn-xs" href="#" onclick="SubVaild(\'' + row.Id + '\')">审核 </a> ');}actions.push('<a class="btn btn-warning btn-xs" href="#" onclick="address(\'' + row.Id + '\')" style="margin-left:2px">合同归档文件</a>');actions.push('<a class="btn btn-warning btn-xs" href="#" onclick="detail(\'' + row.Id + '\')" style="margin-left:2px">详情 </a>');return actions.join('');}}],queryParams: function (params) {var pagination = $('#gridTable').ysTable('getPagination', params);var queryString = $('#searchDiv').getWebControls(pagination);return queryString;}});}function initDetailGrid() {var queryUrl = '@Url.Content("~/ContractManage/SealsManagementDetail/GetPageListJson")';console.log("initDetailGrid");$('#gridTable1').ysTable({url: queryUrl,height: '350',columns: [{ checkbox: true, visible: true },{ field: 'Id', title: 'Id', visible: false },{ field: 'Name', title: '名称' },{ field: 'BatchName', title: '批次名称' },{ field: 'Model', title: '型号' },{ field: 'Specs', title: '规格' },{ field: 'Unit', title: '单位' },{ field: 'Number', title: '数量' },],queryParams: function (params) {var pagination = $('#gridTable1').ysTable('getPagination', params);var queryString = $('#searchDiv1').getWebControls(pagination);queryString.ContractId = curContractId;//检索明细参数console.log('queryString', queryString);return queryString;}});}function searchGrid() {$('#gridTable').ysTable('search');resetToolbarStatus();refreshDetailGrid({ ContractId: '0' });//初始化gridTable时清空gridTable1列表数据}function refreshDetailGrid(params){//点击主表行触发事件，刷新明细表数据为当前点击主表行明细数据curContractId = params.ContractId//赋值检索明细参数$('#gridTable1').ysTable('search');//更具条件查询gridTable1表}function showSaveForm(bAdd) {var id = 0;if (!bAdd) {var selectedRow = $('#gridTable').bootstrapTable('getSelections');if (!ys.checkRowEdit(selectedRow)) {return;}else {id = selectedRow[0].Id;}}ys.openDialog({title: id > 0 ? '编辑' : '添加',content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementForm")' + '?id=' + id,width: '968px',height: '750px',callback: function (index, layero) {var iframeWin = window[layero.find('iframe')[0]['name']];iframeWin.saveForm(index);}});}function deleteForm() {var selectedRow = $('#gridTable').bootstrapTable('getSelections');if (ys.checkRowDelete(selectedRow)) {ys.confirm('确认要删除选中的' + selectedRow.length + '条数据吗？', function () {var ids = ys.getIds(selectedRow);ys.ajax({url: '@Url.Content("~/ContractManage/Salesmanagement/DeleteFormJson")' + '?ids=' + ids,type: 'post',success: function (obj) {if (obj.Tag == 1) {ys.msgSuccess(obj.Message);searchGrid();}else {ys.msgError(obj.Message);}}});});}}function showSaveDetailForm(bAdd) {if (curContractId == '0') {ys.msgError('请先选择合同！');return false;}var id = 0;if (!bAdd) {var selectedRow = $('#gridTable1').bootstrapTable('getSelections');if (!ys.checkRowEdit(selectedRow)) {return;}else {id = selectedRow[0].Id;}}ys.openDialog({title: id > 0 ? '编辑' : '添加',content: '@Url.Content("~/ContractManage/SealsManagementDetail/SealsManagementDetailForm")' + '?id=' + id + '&ContractId=' + curContractId,width: '50%',height: '30%',callback: function (index, layero) {var iframeWin = window[layero.find('iframe')[0]['name']];iframeWin.saveForm(index);}});}function deleteDetailForm() {var selectedRow = $('#gridTable1').bootstrapTable('getSelections');if (ys.checkRowDelete(selectedRow)) {ys.confirm('确认要删除选中的' + selectedRow.length + '条数据吗？', function () {var ids = ys.getIds(selectedRow);ys.ajax({url: '@Url.Content("~/ContractManage/SealsManagementDetail/DeleteFormJson")' + '?ids=' + ids,type: 'post',success: function (obj) {if (obj.Tag == 1) {ys.msgSuccess(obj.Message);searchGrid();}else {ys.msgError(obj.Message);}}});});}}//详情function detail(id) {ys.openDialog({title: '查看详情',content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementForm")' + '?id=' + id +'&sType=1',width: '968px',height: '750px',callback: function (index, layero) {var iframeWin = window[layero.find('iframe')[0]['name']];iframeWin.saveForm(index);}});}//审核function SubVaild(id) {ys.openDialog({title: '审核',content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementVaild")' + '?id=' + id,width: '668px',height: '450px',callback: function (index, layero) {var iframeWin = window[layero.find('iframe')[0]['name']];iframeWin.saveForm(index);}});}//合同归档文件function address(id) {ys.openDialog({title: '上传合同归档文件',content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementContract")' + '?id=' + id,width: '768px',height: '450px',callback: function (index, layero) {var iframeWin = window[layero.find('iframe')[0]['name']];iframeWin.saveForm(index);}});}
</script>