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

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

    1. @{
    2.     Layout = "~/Views/Shared/_Index.cshtml";
    3.  }
    4. <div class="container-div">
    5.     <div class="row">
    6.         <div id="searchDiv" class="col-sm-12 search-collapse">
    7.             <div class="select-list">
    8.                 <ul>
    9.                     <li>
    10.                         合同名称：<input id="name" col="name" type="text" />
    11.                     li>
    12.                     <li>
    13.                         签订时间：<input id="signDate" col="signDate" type="text" />
    14.                     li>
    15.                     <li>
    16.                         负责人：<input id="headUser" col="headUser" type="text" />
    17.                     li>
    18.                     <li>
    19.                         审核状态：<input id="status" col="status" type="text" />
    20.                     li>
    21.                     <li>
    22.                         <a id="btnSearch" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search">i> 搜索a>
    23.                     li>
    24.                 ul>
    25.             div>
    26.         div>
    27.         <div class="btn-group-sm hidden-xs" id="toolbar">
    28.             <a id="btnAdd" class="btn btn-success" onclick="showSaveForm(true)"><i class="fa fa-plus">i> 新增a>
    29.             <a id="btnEdit" class="btn btn-primary disabled" onclick="showSaveForm(false)"><i class="fa fa-edit">i> 修改a>
    30.             <a id="btnDelete" class="btn btn-danger disabled" onclick="deleteForm()"><i class="fa fa-remove">i> 删除a>
    31.         div>
    32.         <div class="btn-group-sm hidden-xs" id="toolbar">
    33.             <a id="btnAddDetail" class="btn btn-success" onclick="showSaveDetailForm(true)"><i class="fa fa-plus">i> 新增a>
    34.             <a id="btnEditDetail" class="btn btn-primary disabled" onclick="showSaveDetailForm(false)"><i class="fa fa-edit">i> 修改a>
    35.             <a id="btnDeleteDetail" class="btn btn-danger disabled" onclick="deleteDetailForm()"><i class="fa fa-remove">i> 删除a>
    36.         div>
    37.         <div class="col-sm-12 select-table table-striped" style="min-height: 47%;max-height: 47%">
    38.             <table id="gridTable" data-mobile-responsive="true">table>
    39.         div>
    40.         <div class="col-sm-12 select-table table-striped" style="min-height: 47%;max-height: 47%">
    41.             <table id="gridTable1" data-mobile-responsive="true">table>
    42.         div>
    43.     div>
    44. div>
    45.  
    46. <script type="text/javascript">
    47.     var curContractId = '0'
    48.     $(function () {
    49.         initGrid();
    50.         initDetailGrid('0');
    51.         
    52.         
    53.     });
    54.  
    55.     function initGrid() {
    56.         var queryUrl = '@Url.Content("~/ContractManage/Salesmanagement/GetPageListJson")';
    57.         $('#gridTable').ysTable({
    58.             url: queryUrl,
    59.             height:'350',
    60.             onClickRow: function (row) {//单击事件，点击触发gridTable1表数据更新
    61.                 console.log('click',row.Id)
    62.                 refreshDetailGrid({ ContractId :row.Id});//渲染详细列表数据
    63.             },
    64.             columns: [
    65.                 { checkbox: true, visible: true },
    66.                 { field: 'Id', title: 'Id', visible: false },
    67.                 { field: 'name', title: '合同名称' },
    68.                 { field: 'signDate', title: '签订时间' },
    69.                 //{ field: 'contractNum', title: '合同编码' },
    70.                 //{ field: 'internalcontractNum', title: '内部合同编号' },
    71.                 { field: 'internalUnit', title: '需求单位' },
    72.                 { field: 'batchName', title: '批次名称' },
    73.                 //{ field: 'proId', title: '产品id', visible: false },
    74.                 //{ field: 'proName', title: '产品名称' },
    75.                 //{ field: 'model', title: '型号' },
    76.                 { field: 'businessType', title: '业务类型' },
    77.                 //{ field: 'numbers', title: '数量' },
    78.                 //{ field: 'unit', title: '单位' },
    79.                 { field: 'contractAllMonwy', title: '合同总额' },
    80.                 { field: 'mateMoney', title: '匹配总额' },
    81.                 { field: 'performanceMoney', title: '履约金额' },
    82.                 { field: 'unPerformanceMoney', title: '未履约金额' },
    83.                 { field: 'invoicingMoney', title: '开票金额' },
    84.                 { field: 'unInvoicingMoney', title: '已匹配未开票金额' },
    85.                 {
    86.                     field: 'documentLink', title: '合同文件',
    87.                     formatter: function (value, row, index) {
    88.                         if (value != '') {
    89.                             return ''">下载'
    90.                         }
    91.                     }
    92.                 },
    93.                 { field: 'headUser', title: '负责人' },
    94.                 { field: 'addDate', title: '添加时间' },
    95.                 {
    96.                     field: 'status', title: '审核状态',
    97.                     formatter: function (value, row, index) {
    98.                         if (value == "@VerifyEnum.Pass.ParseToInt()") {
    99.                             return '' + "@VerifyEnum.Pass.GetDescription()" + '';
    100.                         }
    101.                         else if (value == "@VerifyEnum.UnPass.ParseToInt()") {
    102.                             return '' + "@VerifyEnum.UnPass.GetDescription()" + '';
    103.                         }
    104.                         else {
    105.                             return '' + "@VerifyEnum.Wait.GetDescription()" + '';
    106.                         }
    107.                     }
    108.                 },
    109.                 {
    110.                     field: 'orderStatus', title: '订单状态',
    111.                     formatter: function (value, row, index) {
    112.                         if (value == "@SalesOrderEnum.Ordered.ParseToInt()") {
    113.                             return '' + "@SalesOrderEnum.Ordered.GetDescription()" + '';
    114.                         }
    115.                         else if (value == "@SalesOrderEnum.Produced.ParseToInt()") {
    116.                             return '' + "@SalesOrderEnum.Produced.GetDescription()" + '';
    117.                         }
    118.                         else if (value == "@SalesOrderEnum.Shipped.ParseToInt()") {
    119.                             return '' + "@SalesOrderEnum.Shipped.GetDescription()" + '';
    120.                         }
    121.                         else if (value == "@SalesOrderEnum.Received.ParseToInt()") {
    122.                             return '' + "@SalesOrderEnum.Received.GetDescription()" + '';
    123.                         }
    124.                         else if (value == "@SalesOrderEnum.Invoiced.ParseToInt()") {
    125.                             return '' + "@SalesOrderEnum.Invoiced.GetDescription()" + '';
    126.                         }
    127.                         else {
    128.                             return '' + "@SalesOrderEnum.Wait.GetDescription()" + '';
    129.                         }
    130.                     }
    131.                 },
    132.                 {
    133.                     title: '操作',
    134.                     align: 'center',
    135.                     formatter: function (value, row, index) {
    136.                         var actions = [];
    137.                         if (row.status == 0) {
    138.                             actions.push('Id + '\')">审核  ');
    139.                         }
    140.                         actions.push('Id + '\')" style="margin-left:2px">合同归档文件');
    141.                         actions.push('Id + '\')" style="margin-left:2px">详情 ');
    142.                         return actions.join('');
    143.                     }
    144.                 }
    145.             ],
    146.             queryParams: function (params) {
    147.                 var pagination = $('#gridTable').ysTable('getPagination', params);
    148.                 var queryString = $('#searchDiv').getWebControls(pagination);
    149.                 return queryString;
    150.             }
    151.         });
    152.     }
    153.     function initDetailGrid() {
    154.         
    155.         var queryUrl = '@Url.Content("~/ContractManage/SealsManagementDetail/GetPageListJson")';
    156.         console.log("initDetailGrid");
    157.         $('#gridTable1').ysTable({
    158.             url: queryUrl,
    159.             height: '350',
    160.             columns: [
    161.                 { checkbox: true, visible: true },
    162.                 { field: 'Id', title: 'Id', visible: false },
    163.                 { field: 'Name', title: '名称' },
    164.                 { field: 'BatchName', title: '批次名称' },
    165.                 { field: 'Model', title: '型号' },
    166.                 { field: 'Specs', title: '规格' },
    167.                 { field: 'Unit', title: '单位' },
    168.                 { field: 'Number', title: '数量' },
    169.             ],
    170.             queryParams: function (params) {
    171.                 var pagination = $('#gridTable1').ysTable('getPagination', params);
    172.                 var queryString = $('#searchDiv1').getWebControls(pagination);
    173.                 queryString.ContractId = curContractId;//检索明细参数
    174.                 console.log('queryString', queryString);
    175.                 return queryString;
    176.             }
    177.         });
    178.     }
    179.  
    180.     function searchGrid() {
    181.         $('#gridTable').ysTable('search');
    182.         resetToolbarStatus();
    183.         refreshDetailGrid({ ContractId: '0' });//初始化gridTable时清空gridTable1列表数据
    184.         
    185.     }
    186.     function refreshDetailGrid(params){//点击主表行触发事件，刷新明细表数据为当前点击主表行明细数据
    187.         curContractId = params.ContractId//赋值检索明细参数
    188.         $('#gridTable1').ysTable('search');//更具条件查询gridTable1表
    189.     }
    190.  
    191.     function showSaveForm(bAdd) {
    192.         var id = 0;
    193.         if (!bAdd) {
    194.             var selectedRow = $('#gridTable').bootstrapTable('getSelections');
    195.             if (!ys.checkRowEdit(selectedRow)) {
    196.                 return;
    197.             }
    198.             else {
    199.                 id = selectedRow[0].Id;
    200.             }
    201.         }
    202.         ys.openDialog({
    203.             title: id > 0 ? '编辑' : '添加',
    204.             content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementForm")' + '?id=' + id,
    205.             width: '968px',
    206.             height: '750px',
    207.             callback: function (index, layero) {
    208.                 var iframeWin = window[layero.find('iframe')[0]['name']];
    209.                 iframeWin.saveForm(index);
    210.             }
    211.         });
    212.     }
    213.  
    214.     
    215.  
    216.     function deleteForm() {
    217.         var selectedRow = $('#gridTable').bootstrapTable('getSelections');
    218.         if (ys.checkRowDelete(selectedRow)) {
    219.             ys.confirm('确认要删除选中的' + selectedRow.length + '条数据吗？', function () {
    220.                 var ids = ys.getIds(selectedRow);
    221.                 ys.ajax({
    222.                     url: '@Url.Content("~/ContractManage/Salesmanagement/DeleteFormJson")' + '?ids=' + ids,
    223.                     type: 'post',
    224.                     success: function (obj) {
    225.                         if (obj.Tag == 1) {
    226.                             ys.msgSuccess(obj.Message);
    227.                             searchGrid();
    228.                         }
    229.                         else {
    230.                             ys.msgError(obj.Message);
    231.                         }
    232.                     }
    233.                 });
    234.             });
    235.         }
    236.     }
    237.     function showSaveDetailForm(bAdd) {
    238.         if (curContractId == '0') {
    239.             ys.msgError('请先选择合同！');
    240.             return false;
    241.         }
    242.         var id = 0;
    243.         if (!bAdd) {
    244.             var selectedRow = $('#gridTable1').bootstrapTable('getSelections');
    245.             if (!ys.checkRowEdit(selectedRow)) {
    246.                 return;
    247.             }
    248.             else {
    249.                 id = selectedRow[0].Id;
    250.             }
    251.         }
    252.         ys.openDialog({
    253.             title: id > 0 ? '编辑' : '添加',
    254.             content: '@Url.Content("~/ContractManage/SealsManagementDetail/SealsManagementDetailForm")' + '?id=' + id + '&ContractId=' + curContractId,
    255.             width: '50%',
    256.             height: '30%',
    257.             callback: function (index, layero) {
    258.                 var iframeWin = window[layero.find('iframe')[0]['name']];
    259.                 iframeWin.saveForm(index);
    260.             }
    261.         });
    262.     }
    263.     function deleteDetailForm() {
    264.         var selectedRow = $('#gridTable1').bootstrapTable('getSelections');
    265.         if (ys.checkRowDelete(selectedRow)) {
    266.             ys.confirm('确认要删除选中的' + selectedRow.length + '条数据吗？', function () {
    267.                 var ids = ys.getIds(selectedRow);
    268.                 ys.ajax({
    269.                     url: '@Url.Content("~/ContractManage/SealsManagementDetail/DeleteFormJson")' + '?ids=' + ids,
    270.                     type: 'post',
    271.                     success: function (obj) {
    272.                         if (obj.Tag == 1) {
    273.                             ys.msgSuccess(obj.Message);
    274.                             searchGrid();
    275.                         }
    276.                         else {
    277.                             ys.msgError(obj.Message);
    278.                         }
    279.                     }
    280.                 });
    281.             });
    282.         }
    283.     }
    284.  
    285.     //详情
    286.     function detail(id) {
    287.         ys.openDialog({
    288.             title: '查看详情',
    289.             content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementForm")' + '?id=' + id +'&sType=1',
    290.             width: '968px',
    291.             height: '750px',
    292.             callback: function (index, layero) {
    293.                 var iframeWin = window[layero.find('iframe')[0]['name']];
    294.                 iframeWin.saveForm(index);
    295.             }
    296.         });
    297.     }
    298.  
    299.     //审核
    300.     function SubVaild(id) {
    301.         ys.openDialog({
    302.             title: '审核',
    303.             content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementVaild")' + '?id=' + id,
    304.             width: '668px',
    305.             height: '450px',
    306.             callback: function (index, layero) {
    307.                 var iframeWin = window[layero.find('iframe')[0]['name']];
    308.                 iframeWin.saveForm(index);
    309.             }
    310.         });
    311.     }
    312.  
    313.     //合同归档文件
    314.     function address(id) {
    315.         ys.openDialog({
    316.             title: '上传合同归档文件',
    317.             content: '@Url.Content("~/ContractManage/Salesmanagement/SalesmanagementContract")' + '?id=' + id,
    318.             width: '768px',
    319.             height: '450px',
    320.             callback: function (index, layero) {
    321.                 var iframeWin = window[layero.find('iframe')[0]['name']];
    322.                 iframeWin.saveForm(index);
    323.             }
    324.         });
    325.     }
    326. script>

  • 相关阅读:
    Ubuntu 20.04上docker安装Redis
    理解前端工程化
    猴子也能学会的jQuery第十二期——jQuery遍历（上）
    Aztec.nr：Aztec的隐私智能合约框架——用Noir扩展智能合约功能
    Java错误：找不到或无法加载主类
    C++编程语言的深度解析: 从零开始的学习路线
    Ant Design Vue 注册全局消息通知组件
    人工智能知识全面讲解：感知机原理
    Filter(过滤器)与Listener(监听器)详解
    从零开始学习Dubbo5——让模块独立运行下
  • 原文地址：https://blog.csdn.net/MoFe1/article/details/134006246