• 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();
            }
        });

  • 相关阅读:
    JDK集合框架--LinkedList
    JDK集合框架--ArrayList
    JDK集合框架--综述
    JDK常用类解读--StringBuffer、StringBuilder
    JDK常用类解读--String
    【spring 注解驱动开发】扩展原理
    【spring 注解驱动开发】spring事务处理原理
    【spring 注解驱动开发】Spring AOP原理
    【spring 注解驱动开发】spring自动装配
    【spring 注解驱动开发】spring对象的生命周期
  • 原文地址:https://www.cnblogs.com/wjslw/p/10136387.html
Copyright © 2020-2023  润新知