knockout 数据绑定，同一个页面table位置加载两个不同的表格数据

1.业务列表

<div class="widget-footer">
            <div class="btns">
                <a href="javascript:;" class="btn btn-primary" data-bind="click: pageVM.query">查询</a>
                <a href="javascript:;" class="btn btn-default" data-bind="click: pageVM.reset">重置</a>
            </div>
        </div>

 <div class="widget mt20">
        <div class="widget-header">
            <div class="widget-caption">业务列表</div>
        </div>
        <div class="widget-body widget-body__result">
            <div id="result_table">
                @Html.Partial("~/Views/KoTemplate/DataTableTemplate.cshtml")
            </div>
            <div id="transfer_table" style="display:none;">
                @Html.Partial("~/Views/KoTemplate/DataTableTemplate.cshtml")
            </div>
        </div>
    </div>

2.条件筛选加入时间变化监测

<div class="form-group col-md-6">
                    <label class="col-sm-6 control-label">统计对象</label>
                    <div class="col-sm-15">
                        <select class="form-control" data-bind="value: pageVM.statisticTarget, select2: {}, event:{change:statisticTargetChange}">
                            <option value="1">开立信息</option>
                            <option value="2">转让信息</option>
                        </select>
                    </div>
 </div>

2.数据绑定

 // 对象变更
        vm.statisticTargetChange = function(){
            if(vm.statisticTarget() == 1){
                $('#transfer_table').hide();
                $('#result_table').show();
            } else if(vm.statisticTarget() == 2){
                $('#result_table').hide();
                $('#transfer_table').show();
               
            }
        };

//对应数据变化

 vm.query = function () {
            var queryParam = {
                ChainBasicID: vm.chainBasicID(),
                BankProductID: vm.bankProductID(),
                BasicCompanyName: vm.basicCompanyName(),
                CompanySysNo: @CurrentUser.CompanySysNo
            };
            result_table.gridView().filter.PageIndex(0);
            result_table.ReLoad(queryParam);
            transfer_table.gridView().filter.PageIndex(0);
            transfer_table.ReLoad(queryParam);
        };

  vm.getChainList = function () {
            result_table.SetTableColumns([
                {
                    cText: '金信编号', cName: 'ChainBasicID', cType: 'html', cWidth: '15%',
                    cRender: function (row) {
                        return '<a href="/Seller/ChainDetail?chainSysNo=' + row.SysNo + '">' + row.ChainBasicID + '</a>';
                    }
                }

 　　]);
            result_table.ReLoad({ CompanySysNo: "@CurrentUser.CompanySysNo" });
        };

vm.getTransferList = function () {
            transfer_table.SetTableColumns([
                { cText: '金信编号', cName: 'ChainBasicID', cWidth: '15%', cType: 'html',
                    cRender: function(row){
                        var result = '';
                        if(row.ChainCreateCompanySysNo == @CurrentUser.CompanySysNo) {
                            result = '<a href="/Chain/ChainTransferDetailForBeginer?chainBasicSysNo='+ row.ChainBasicSysNo +'">'+ row.ChainBasicID +'</a>';
                        } else {
                            result = '<a href="/Chain/ChainTransferDetail?chainBasicSysNo='+ row.ChainBasicSysNo +'">'+ row.ChainBasicID +'</a>';
                        }
                    return result;
                    }
                }

　　　　]);
            result_table.ReLoad({ CompanySysNo: "@CurrentUser.CompanySysNo" });
        };

 var pageVM = new PageVM();
    ko.applyBindings(pageVM, $('.widget-query').get(0));
    var transferQueryUrl = '@Url.Action("QueryChainMyTrancferList", "Chain")';
    var transfer_table = new KODataTable('transfer_table', transferQueryUrl, {
        pager: true
    });
    var queryUrl = '@Url.Action("QueryChainBasicList", "Chain")';
    var result_table = new KODataTable('result_table', queryUrl, {
        pager: true
    });
    // page ready
    $(function(){
        // 获取供金产品列表
        pageVM.getBankList();
        pageVM.getChainList();
        pageVM.getTransferList();
        pageVM.statisticTarget(1);
        if (pageVM.statisticTarget()) {
            $('#treetablewait').show();
        } else {
            $('#treetable').show();
        }
    });

转载于:https://www.cnblogs.com/wjslw/p/10136387.html