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来创建。用表格创建会出现选择框选中之后再次点击无法取消选择的问题