springmvc+easyui datagrid 数据表格、数据表格分页

easyui可以说是我们后端程序员的好朋友了，在没用这个东西之前，我的页面都是用硬编码以及el表达式来循环的，做的很辛苦，后面自己学习了easyui之后，上手也比较快，都是中文，开发变的快了很多，数据表格可以用两种方式实现。

第一js式实现

前台js代码

$(function() {
		//渲染表格
		$("#userListDG").datagrid({
			title : "用户列表",//表格标题
			iconCls : "icon-search",//图标样式
			singleSelect:"true",
			url : "${pageContext.request.contextPath}/mng/user/usersMng",//请求路径
			columns : [ [ {
				field : 'id',
				width : 40,
				checkbox : true,//选择框
				align:"center"
			}, {
				field : 'userCode',
				title : '用户ID',
				width : 100,
				sortable : true,
				align : "center"
			}, {
				field : 'userName',
				title : '用户名',
				width : 100,
				align:"center"
			},{
				field : 'gender',
				title : '性别',
				width : 80,
				align:"center",
				formatter : formatGender//格式化的方法
			},{
				field : 'phone',
				title : '联系方式',
				width : 140,
				align:"center",
			}, {
				field : 'userRole',
				title : '用户角色',
				width : 100,
				align:"center",
				formatter:formatRole,
			},{
				field : 'email',
				title : '邮箱',
				width : 150,
				align:"center",
			}, {
				field : 'birthday',
				title : '出生日期',
				width : 150,
				align:"center",
			}, {
				field : 'address',
				title : '地址',
				width : 180,
				align:"center"
			}, {
				field : 'state',
				title : '账户状态',
				width : 100,
				align:"center",
				formatter:formatState,
			},
			 ] ],
			pagination : true, //显示底部分页栏
			pageSize : 10, //默认每页记录数
			pageList : [ 10, 20, 30 ], //显示列表记录数的下拉框选项
			//fitColumns:true
			striped : true,//斑马线
			loadMsg : "正在加载数据，请稍后......",//加载信息
			fitColumns : true,//自动适应
			toolbar:"#toolbar"
		});
	});

//格式化性别
	function formatGender(value, row, index) {
		
		if (row.gender == 2) {
			return "女";
		} else if (row.gender == 1) {
			return "男";
		} else {
			return "未知";
		}
	}

后台控制器代码

@RequestMapping(value="路径",method=RequestMethod.POST)
	@ResponseBody
	//page:当前页码  rows:每页显示多少条，这两个参数名是固定的，
	public String toManage(Integer page,Integer rows){
		Map<String, Object> map1=new HashMap<String, Object>();
		try {
			Map<String, Object> map=userBiz.findAllUser(page,row);
			map1.put("rows", map.get("userList"));// rows是固定的
			map1.put("total",map.get("total"));// total是固定的
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return JSONArray.toJSONString(map1);
	}

用table表格实现

页面代码

<table id="proDG" class="easyui-datagrid" style="width:100%;height:auto"   
	        data-options="url:'请求路径',fitColumns:true,singleSelect:true,title : '商品列表',
	        iconCls :'icon-search',pagination : true,pageSize : 10, pageList : [ 10, 20, 30 ],striped : true,loadMsg : '正在加载数据，请稍后......',toolbar:'#toolbar',rownumbers:true,">   
		    <thead>   
		        <tr>   
		            <th data-options="field:'id',checkbox : true,width:100"></th>   
		            <th data-options="field:'proName',width:100">名称</th>   
		            <th data-options="field:'proDesc',width:100,align:'center'">商品</th>   
		            <th data-options="field:'material',width:100,align:'center'">制造材</th>	   

		        </tr>   
		    </thead>   
		</table> 

其中的属性和用js写的是一致的。后台代码也是相同有几个固定的参数名要注意。

建议使用js来创建。用表格创建会出现选择框选中之后再次点击无法取消选择的问题