【前端開發EasyUI筆記】常用的幾種數據表格加載數據的方式

延遲加載：頁面默認加載頭表數據，點擊詳情實際上是獲得頭表id再去請求對應的詳情加載

示例

define(function(require, exports, module){
	
	var $ = require('jquery');
	var Util = require('../../util/util.js');

	var dataGridUrl = $CONFIG.base_url+'/api/produce/concrete/list'

	// 定義表格
    var conf = {
        options:{
            pagination:true,
            idField:'id',
            url:dataGridUrl,
            rownumbers: false,
            method:'get',
            nowrap:false,
            rowStyler: function(index,row){
                return {class:'double-row'};
            },
            //頭表數據
            columns:[[
                {field:'pieDatTim',title:'生產時間',width:180},
                {field:'betLev',title:'規格型號',width:90},  
                {field:'customer',title:'收料單位',width:160},
                {field:'vehCode',title:'車輛編號',width:100},
                {field:'pieAmnt',title:'數量（方）',width:80},
                {field:'prodMark',title:'生產序號',width:80},
                {field:'prodCode',title:'任務編號',width:200},
            ]],
            onLoadSuccess:function (data) {
               //加載完成後的操作
            },
        },
        //詳情數據
        subgrid:{
            options:{
                pagination:false,
                idField:'id',
                url: $CONFIG.base_url+'/api/produce/concrete/dosage/list',
                method:'get',
                //通過pieceIda加載詳情
                foreignField:function(prow){
                    return {pid: prow.pieceId};
                },
                columns:[[
                    {field:'material',title:'材料名稱',width:100},
                    {field:'code',title:'規格型號',width:100},
                    {field:'strDiff',title:'誤差',width:100}
                ]]
            }
        },

    };

    //加載表格數據
	var dg = $('#tt').datagrid('subgrid', conf);

    
	exports.loadList = function(){
        //傳遞參數
		var params = {
		    prodMark: $('#search-index').textbox('getValue'),
            prodCode: $('#search-no').textbox('getValue'),
            beginDate: $('#begin-date').datebox('getValue'),
            endDate: $('#end-date').datebox('getValue'),
            vehCode:$('#search-vehicle').textbox('getValue'),
            customer:$('#search-customer').textbox('getValue'),
            betLev:$('#search-level').textbox('getValue')
		};
		$('#tt').datagrid({
            url: $CONFIG.base_url+'/api/produce/concrete/list',
            queryParams:params,
        });
    };

	// 搜索
	$("#btn-search").click(function(){
		exports.loadList();
	});

	//重置
	$('#btn-refresh').click(function () {
        $('#begin-date').datebox('setValue', Util.getWeekStartDate());
        $('#end-date').datebox('setValue', Util.getWeekEndDate());
		$('#search-index').textbox('clear');
		$('#search-no').textbox('clear');
		$('#search-customer').textbox('clear');
        $('#search-vehicle').textbox('clear');
        $('#search-level').textbox('clear');

        exports.loadList();
	});

    // 展開搜索
    $("#btn-search-box").click(function(){
        $("#search-box").slideToggle(1000);
    });

    // 展開所有行
    $("#btn-expand").click(function(){
        var rows = $("#tt").datagrid("getRows");
        for (var r = 0; r < rows.length; r++)
        {
            $("#tt").datagrid("expandRow",r);
        }
    });

    // 摺疊所有行
    $("#btn-collapse").click(function(){
        var rows = $("#tt").datagrid("getRows");
        for (var r = 0; r < rows.length; r++)
        {
            $("#tt").datagrid("collapseRow",r);
        }
    });

});

提取的格式爲：

    var conf = {
        options:{
            pagination:true,
            idField:'id',
            url:頭表接口,
            method:'get',
            nowrap:false,
            rowStyler: function(index,row){
                return {class:'double-row'};
            },
            columns:[[]],
        },
        subgrid:{
            options:{
                pagination:false,
                idField:'id',
                url: 詳情接口,
                method:'get',
                foreignField:function(prow){
                    return {pid: prow.pieceId};//頭表詳情關聯id
                },
                columns:[[]]
            }
        },

    };
	var dg = $('#tt').datagrid('subgrid', conf);

同步加載：頁面加載時將頭表所有數據和詳情一塊加載到表格中，無論是否展開表格

示例

define(function(require, exports, module){

    var $ = require('jquery');
    var Util = require('../../util/util.js');
    var util= require('util');
    var dataGridUrl = $CONFIG.base_url+'/api/turnover/amortize/list';

    // 定義表格
    $('#tt').datagrid({
        pagination:true,
        idField:'id',
        url: dataGridUrl,
        method:'get',
        pageSize:100,
        showFooter: true,
        singleSelect:true,
        emptyMsg:"<div style='text-align: left;padding-left: 30px'>無數據顯示</div>",
        columns:[[
            {field:'amortizeNo',title:'攤銷單號',width:'12%', halign:'center', align:'center'},
            {field:'amortizeDate',title:'攤銷日期',width:'12%', halign:'center', align:'center'},
            {field:'amortizeOrg',title:'攤銷單位',width:'12%', halign:'center', align:'center'},
            {field:'modifier',title:'制單/修改人',width:'12%', halign:'center', align:'center'},
            {field:'modifyDate',title:'制單日期',width:'12%', halign:'center', align:'center'},
            {field:'transferDate',title:'轉賬日期',width:'12%', halign:'center', align:'center'},
            {field:'transferVoucher',title:'轉賬憑證',width:'12%', halign:'center', align:'center'},
        ]],
        onLoadSuccess:function () {
        },
        view: detailview,
        detailFormatter:function(index,row){
            return '<div style="padding:2px;position:relative;"><table id="tt-son-'+index+'"></table></div>';
        },
        //同步加載的展開詳情
        onExpandRow: function(index,row){
            $('#tt-son-'+index).datagrid({
                method:'get',
                url: '',
                singleSelect:true,
                rownumbers:true,
                loadMsg:'',
                height:'auto',
                data:row.details,
                emptyMsg:"<div style='text-align: left;padding-left: 30px'>無數據顯示</div>",
                columns:[[
                    {field:'chargeIn',title:'進料日期',width:150,align:'left'},
                    {field:'supplier',title:'供應商',width:120,align:'left'},
                    {field:'materialName',title:'材料名稱',width:120,align:'left'},
                    {field:'type',title:'規格型號',width:120,align:'left'},
                    {field:'unit',title:'計量單位',width:120,align:'left'},
                    {field:'num',title:'數量',width:120,align:'left'},
                    {field:'price',title:'單價',width:120,align:'left'},
                    {field:'fee',title:'原值/採購金額',width:120,align:'left'},
                    {field:'amortizeRate',title:'本次攤銷比例(%)',width:120,align:'left'},
                    {field:'amortizeFee',title:'本次攤銷金額',width:120,align:'left'},
                ]],
                onResize:function(){
                    $('#tt').datagrid('fixDetailRowHeight',index);
                },
                onLoadSuccess:function(){
                    setTimeout(function(){
                        $('#tt').datagrid('fixDetailRowHeight',index);
                    },0);
                }
            });
            $('#tt').datagrid('fixDetailRowHeight',index);
        }
    });

    // 項目部
    $('#belong-project').combotree({
        method:'get',
        url:$CONFIG.base_url+'/api/user/office/tree?type=own&userId='+$CONFIG.uid,
        lines:true,
        panelWidth:300,
        panelAlign:'left'
    });
    $('#belong-project').combotree('setValue',$CONFIG.office);

    // 交接單號
    $("#amortize-no").textbox({
        prompt:'輸入攤銷單號'
    });

    exports.loadList = function(){
        var params = {
            beginDate: $('#begin-date').datebox('getValue'),
            endDate: $('#end-date').datebox('getValue'),
            officeId:$('#belong-project').combotree('getValue'),
            amortizeNo:$('#amortize-no').textbox('getValue'),
        };
        $('#tt').datagrid({
            url: '/api/turnover/amortize/list',
            queryParams:params,
        });

    };

    /*==========================================頁面操作事件=======================================================*/
    // 搜索
    $("#btn-search").click(function(){
        exports.loadList();
    });


    //重置
    $('#btn-refresh').click(function () {
        $('#begin-date').datebox('clear');
        $('#end-date').datebox('clear');
        $('#belong-project').textbox('clear');
        $('#amortize-no').textbox('clear');

        exports.loadList();
    });

    //導出
    $("#btn-export").click(function(){
        //導出數據功能
    });


});

提取的基本格式爲:

    $('#tt').datagrid({
        pagination:true,
        idField:'id',
        url: 包含頭表和詳情的接口
        method:'get',
        pageSize:100,
        showFooter: true,
        singleSelect:true,
        columns:[[]],
        view: detailview,
        detailFormatter:function(index,row){
            return '<div style="padding:2px;position:relative;"><table id="tt-son-'+index+'"></table></div>';
        },
        //同步加載的展開詳情
        onExpandRow: function(index,row){
            $('#tt-son-'+index).datagrid({
                method:'get',
                url: '',
                singleSelect:true,
                rownumbers:true,
                loadMsg:'',
                height:'auto',
                data:row.details,
                columns:[[]]
            });
        }
    });