很多后台项目中都是使用easyUI的 那就要使用到数据显示 这样表格就不可缺少
下面就介绍一下easyUI 中表格的使用
$(document).ready(function(){
$('#cityList').datagrid({ //easyUI中表格使用
url:'queryCityList.do', //方法 都知道
method:'post',
queryParams:{},//传到后台的参数
contentType : 'application/json;charset=UTF-8',//类型
title:'城市信息列表',//表格的头 表头
iconCls:'icon-grid',//加载数据时 的提示
loadMsg:'数据加载中.....',
rownumbers:false,//是否显示列号
singleSelect:true, //只允许选中一行
pagination:true, //分页
pageList:[10,20,30,40,50],//每页显示多少
toolbar:[{//表头下的操作
text : '添加城市信息',
iconCls:'icon-save',
handler : function(){
addCityDialog();
}
}],
columns:[[ //cityid 对应的是bean的属性 会自动装备进来
{field:'cityid',title:'城市ID',width:100,align:'center'},
{field:'cityname',title:'城市名称',width:250,align:'center'},
{field:'createtimeStr',title:'创建时间',width:150,align:'center'},
{field:'operatorStr',title:'操作',width:200,align:'center',formatter:function(value,rec){ var str="<a href='javascript:void(0)' class='l-btn l-btn-plain'><span class='l-btn-center'><span class='l-btn-text icon-edit' style='padding-left: 20px;' onClick='updateCity(\""+rec.cityname+"\","+rec.cityid+","+rec.provinceid+")'>修改</span></span></a><a href='javascript:void(0)' class='l-btn l-btn-plain'><span class='l-btn-center'><span class='l-btn-text icon-cut' style='padding-left: 20px;' onClick='deleteCity("+rec.cityid+",\""+rec.cityname+"\")'>删除</span></span></a>"; return str;}}
]]
});