EasyUi datagrid

1、datagrid 属性说明 http://blog.sina.com.cn/s/blog_a4c8274a0102v9lo.html

注意：easyui-layout的div是必须要有的，不然后面高度无法直营整个屏幕
JS:
$("#dg").datagrid({
    url :  path + '/AddressBook/sendinfojson',
    pagination : true,   //分页控件
    pageList: [10, 20, 30, 40, 50],  // 页码选项设置
    fit: true,           //自适应大小
    border:false,        // table 表格
    nowrap: true,        //数据长度超出列宽时将会自动截取。
    rownumbers:true,     //行号
    fitColumns:true,     //自动使列适应表格宽度以防止出现水平滚动。
    columns:[[
             {field : 'ck',checkbox : true,width : 80},
             {field : 'ImgUrl',title:'图片',width : 30,align:'center',
                 formatter: function(value, row, index){
                    return '';
                 }
             },
             {field:'Title',title:'标题',width:100},  
             {field:'Messages',title:'内容',width:350,
                 formatter: function(value, row, index){
                    if(value.length>30){
                        return ''+value.substring(0,30)+'...';
                    }else{
                        return ''+value+'';
                    }
                 }  
             },
             {field:'SendName',title:'发送人',width:50},
             {field:'CreateTime',title:'创建时间',width:100}
    ]]
});
注意：fit: true,是让表格高度适应屏幕高度，为FALSE是适应内容。
试一下效果就一目了然啦。
这个必须跟class=easyui-layout的div同时存在，不然连高度都没了，

我的demo

<table id="dg" class="easyui-datagrid" title="作者列表"
data-options="pagination:true,pageList: [10,15,20,30],url:'/getAuthor/',method:'get',toolbar:'#tb',
rownumbers:true,fit:true,nowrap:true,
        ">
         <thead>
             <tr>
                 <th data-options="field:'id',align:'center'" width="5%">id</th>
                 <th data-options="field:'name'" width="10%">姓名</th>
                 <th data-options="field:'email'" width="15%">邮箱</th>
                 <th data-options="field:'sex'" width="5%" formatter="formatSex">性别</th>
                 <th data-options="field:'depart'" width="15%" formatter="formatDepart">部门</th>
                 <th data-options="field:'pthone'" width="15%">手机号</th>
                 <th data-options="field:'publish_date'" width="15%">更新时间</th>
                 <th data-options="field:'_operate',align:'center',formatter:formatOper" width="15%">操作</th>
             </tr>
         </thead>
     </table>

2、datagrid中 formatter的用法及失效原因： 与ajax加载速度有关

<th data-options="field:'department'" width="15%" formatter="formatDepart">部门</th>

function formatDepart(val,row){
    $(dataDepart).each(function(item,i){
        return item.id
    })
}

解决办法：common.js

var departList = []
function setDepartComboboxList(){
    $('[name="depart"]').combobox({
        url: '/showTreeDepart/',
       method: 'get',
        valueField: 'id',
        textField: 'name',
        panelHeight:'auto',
        onLoadSuccess: function (data){
            departList = data;
        }
    });
}

用到部门信息的表格页面：

function formatDepart(val,row){
    if(departList){
        for(var i=0;i<departList.length;i++){
            if(departList[i].id==val){
                return departList[i].name
            }
        }
        return '--'
    }
}

3、添加表格序号排列

<table id="dg" class="easyui-datagrid" title="作者列表" style="width:100%;height:420px"
data-options="pagination:true,url:'/getAuthor/',method:'get',toolbar:'#tb',rownumbers:true">

4、通过条件查询更新表格数据并分页，分页失败

 

解决办法：我这里只读取了rows，并没有读取到total，所以页码总是显示1

$('#dg').datagrid('loadData',data);

data格式： {'rows':[{}], 'total': num}