easyui表格的属性
easyUI的表格如何显示数据库里的数据啊
因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据，就可以在前台页面数据表格中，以一定形式显示数据库中的数据。此处，我们使用Struts2框架整合DataGrid，实现数据的显示。
一、页面内容
为了在页面中显示数据库中字段内容，需要定义一个table，通过EasyUI内部设计，自动显示数据，如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path= request.getContextPath();
String basePath= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>房产信息管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<table id="housesManage" style="height: 100%"></table>
<div id="addHouse"></div>
<div id="updateHouse"></div>
<script type="text/javascript">
$(document).ready(function(){
//datagrid设置
$('#housesManage').datagrid({
title:'房产列表',//表格标题
iconCls:'icon-list',//表格图标
nowrap: false,//是否只显示一行，即文本过多是否省略部分。
striped: true,
fitColumns:true,//防止水平滚动
scrollbarSize:0,//去掉右侧滚动条列
url:"houses/showHouses!show",//action地址
idField:'id',
collapsible:false,//是否可折叠的
singleSelect:true,//只能单选
frozenColumns:[[
{field:'ck',checkbox:true}
]],
pagination:true,//包含分页
pageSize: 10,
pageList: [10,20,30],//可以设置每页记录条数的列表
rownumbers:true,
singleSelect:true,//只能单选
columns:[[{
field:'id',
title:'ID',
align:'center',
hidden: true
},{
field:'unitNum',
title:"楼栋号",
width: 100,
align:'center',
sortable: true,
},{
field:'doorCard',
title:"门牌号",
width: 100,
align:'center',
sortable: true,
},{
field:'roomArea',
title:"房屋面积(平米)",
width: 100,
align:'center',
sortable: true,
},{
field:'buildTime',
title:"建筑时间",
width: 150,
align:'center',
sortable: true,
},{
field:'isUse',
title:"使用状态",
width: 80,
align:'center',
sortable: true,
formatter: function(value,row,index){
if(value=="0"){
return'已使用';
}else{
return'<font color="red">空置</font>';
}
}
}]],
toolbar:[{
text:'添加',
iconCls:'icon-add',
handler:function(){
//显示上传界面
$('#addHouse').dialog({
title:'房产管理|添加房屋信息',
width: 500,
iconCls:'icon-add',
height: 300,
closed: false,
cache: false,
href:'houses/addHouse.jsp',
modal: true
});
}
},'-',{
text:"删除",
iconCls:"icon-cut",
handler: function(){
//选中要修改删除的行
var rows=$("#housesManage").datagrid('getSelections');//返回所有选中的行
if(rows.length> 0){//选中几行的话触发事件
$.messager.confirm("提示","您确定要重置该用户密码吗？", function(res){//提示是否删除
if(res){
//获得编号
var id=rows[0].id;
//获得删除行索引
var tableindex=$("#housesManage").datagrid('getRowIndex', id);
$.post('houses/delHouse!delete',{
"house.id":id
},function(data){
if(data.message=="2"){
$.messager.alert('温馨提示','删除失败!','error');
}else{
//删除选中的行
$("#housesManage").datagrid("deleteRow",tableindex);
}
});
}
});
}
}
},'-',{
text:"修改",
iconCls:"icon-edit",
handler: function(){
//选中要修改删除的行
var rows=$("#housesManage").datagrid('getSelections');//返回所有选中的行
if(rows.length> 0){//选中几行的话触发事件
//获得编号
var id=rows[0].id;
//显示修改界面
$('#updateHouse').dialog({
title:'房产管理|修改房屋信息',
width: 500,
iconCls:'icon-edit',
height: 300,
closed: false,
cache: false,
href:'houses/getHouse!get?house.id='+id,
modal: true
});
}
}
},'-',{
text:"刷新列表",
iconCls:"icon-reload",
handler: function(){
$("#housesManage").datagrid('reload');
}
}],onLoadError: function(){
$.messager.alert('温馨提示','数据加载失败!','error');
}
});
displayMsg();
});
//改变分页显示
function displayMsg(){
$('#housesManage').datagrid('getPager').pagination({
displayMsg:'当前显示<font color="red">{from}-{to}</font>条记录共<font color="red">{total}</font>条记录'
});
}
</script>
</body>
</html>
二、struts.xml中配置
<!--显示房产信息-->
<action name="showHouses" class="com.wy.action.HouseAction" method="show">
<result type="json" name="success">
<param name="root">result</param>
</result>
</action>
三、对应的Action处理类
private JSONObject result;//返回的json
private String rows;//每页显示的记录数
private String page;//当前第几页
//显示房产基本信息
public String show(){
//当前页
int intPage= Integer.parseInt((page== null|| page=="0")?"1":page);
//每页显示条数
int number= Integer.parseInt((rows== null|| rows=="0")?"10":rows);
//每页的开始记录第一页为1第二页为number+1
int start=(intPage-1)*number;
HouseDao houseDao=new HouseDao();
ArrayList<THouse> listHouses=houseDao.getHouses(start, number);//从数据库中查询数据
Map<String, Object> jsonMap= new HashMap<String, Object>();//定义map
int count=houseDao.getHouseCount();//求出总记录数
//total键存放总记录数，必须的
jsonMap.put("total", count);
jsonMap.put("rows", listHouses);//rows键存放每页记录 list
result=JSONObject.fromObject(CommonUtil.getJsonNotNull(jsonMap));
return SUCCESS;
}
action类中，rows，page是用于EasyUI分页操作的，EasyUI会自动向后台传入参数：当前页及每页显示记录数，以此实现分页功能，此处只需要定义这两个变量即可。
{"total":5,"rows":[{"doorCard":"1-1101","id":22,"roomArea":"140","unitNum":1,"tusers":[],"isUse":"1","buildTime":"2015-04-01"},{"doorCard":"1-1202","id":29,"roomArea":"160","unitNum":1,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"2-2202","id":28,"roomArea":"160","unitNum":2,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"3-3301","id":26,"roomArea":"150","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-13"},{"doorCard":"3-2102","id":27,"roomArea":"160","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-06"}]}
五、效果截图
相关文章
