easyUI datagrid 常用小知识

页面打开立即加载表格标题

$(function(){
    //页面加载完就执行grid，此时url为空，那么显示grid的列标题
    var grid =$('#grid').datagrid({
    title : '',
    url ： '',
    queryParams : '',
    columns : [[{//一个[],这是一行
        title : '列名',
        rowspan : 2,    //跨2行
        field : 'njmc', //值
        align : 'center',   //默认left，
        width : 120
    },{//第一行，第二列
        title : '性别',
        rowspan : 2,
        field : 'xb',
        align : 'right',
        width : 60,
        formatter : function(value){//格式化值的显示
            if(value == 1){
                return '男';
            }else if(value==2){
                return '女';
            }else{
                return '合计';
            }
        }
    },{
        title : '实检人数',
        rowspan : 2,
        field : 'totalnum',
        align : 'center',
        width : 100
    },{
        title : '营养不良',
        colspan : 4
    },{
        field : 'czbl',
        title : '超重%',
        align : 'center',
        width : 80,
        rowspan : 2
    },{
        field : 'fpbl',
        title : '肥胖%',
        align : 'center',
        width : 80,
        rowspan : 2
    }],[ {//第二行，第一列
        field : 'szchbl',
        title : '生长迟滞%',
        align : 'center',
        width : 80
    }, {
        field : 'qdxsbl',
        title : '轻度消瘦%',
        align : 'center',
        width : 80
    }, {
        field : 'zdxsbl',
        title : '中重度消瘦%',
        align : 'center',
        width : 80
    }, {
        field : 'yyblbl',
        title : '小计',
        align : 'center',
        width : 80
    } ]],
    onBeforeLoad : function(param) {
    },
    onLoadSuccess : function(data) {//加载成功的回调函数
        $('.iconImg').attr('src', bsc.pixel_0);
        var flag = $('#flag').combobox('getValue');
        if(flag==3){
            grid.datagrid('showColumn','njmc');//显示年纪名称列
            grid.datagrid('hideColumn','age');
            mergeCellsByField('grid','njmc');
        }else{
            grid.datagrid('hideColumn','njmc');
            grid.datagrid('showColumn','age');
            mergeCellsByField('grid','age');
        }
    },
    onSelect : function(rowIndex,rowData){
    }

    });
});

执行查询方法，获取表格数据

grid.datagrid({
            title : txt+'——'+$('#xn').combobox('getValue'),
            url : bsc.contextPath + '/biz/biz_tjfx!doNotNeedSecurity_StudentYyZk.action',
            queryParams : bsc.serializeObject($('#searchForm'))
        });

表格加载完成触发的回调函数（此处动态控制列的显示与隐藏）

onLoadSuccess : function(data) {//加载成功的回调函数
        $('.iconImg').attr('src', bsc.pixel_0);
        var flag = $('#flag').combobox('getValue');
        if(flag==3){
            grid.datagrid('showColumn','njmc');//显示年纪名称列
            grid.datagrid('hideColumn','age');
            mergeCellsByField('grid','njmc');
        }else{
            grid.datagrid('hideColumn','njmc');
            grid.datagrid('showColumn','age');
            mergeCellsByField('grid','age');
        }
    }

格式化显示数据值，如：性别

{//第一行，第二列
        title : '性别',
        rowspan : 2,
        field : 'xb',
        align : 'right',
        width : 60,
        formatter : function(value){//格式化值的显示
            if(value == 1){
                return '男';
            }else if(value==2){
                return '女';
            }else{
                return '合计';
            }
        }
    }

页面

//border:false,不显示表格外边框
//fit:true  表格最大化
<table id="grid" data-options="fit:true,border:false"></table>

默认选中表格第一行数据

onLoadSuccess : function(data) {
                $('.iconImg').attr('src', bsc.pixel_0);
                 debugger;
                if(data.rows.length>0){
                    var row = grid.datagrid('getSelected');
                    if(row){
                        grid.datagrid('clearSelections');
                        var index = grid.datagrid('getRowIndex',row.id);
                        if(index!=-1){
                            $('#grid').datagrid('selectRow',index);
                        }else{
                            $('#grid').datagrid('selectRow',0);
                        }
                    }else{
                        $('#grid').datagrid('selectRow',0);
                    }
                }else{
                    grid.datagrid('clearSelections');
                } 
            },

删除数据后刷新表格

grid.datagrid('load');

刷新后选中行，获取的总是上次删除是选中的删除数据。解决方法：onloadsuccess中清除已选

grid.datagrid('clearSelections');