easyUI中的表格使用

很多后台项目中都是使用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;}} 
       ]]   
	});