【前端开发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:[[]]
            });
        }
    });