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}