【.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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值