easyui数据格子与分页
easyui数据网格与分页
easyui中的数据网格应用
1.页面代码：
【注：】
使用easyui不要自己加分页，在table属性中加：pagination:true，即可添加分页栏
2.后台代码：
后台代码将list集合与total（总条数传到页面），很重要，很好用，很方便
easyui中默认：page：第几页
rows：每页条数
以上代码将list集合与total封装到json中，页面即可获取值，具体怎么获得在easyui的js中，没兴趣去研究
3.要点：
【1】：页面中的data-options中的url写要请求的后台，先加载页面后请求后台
【2】：请求后台后返回的是json数据，json数据是由后台查询的实体集合转换而来，实体最好不要有主外键关联，如有关联
4.如果不需要在页面显示主外键关联数据也可以使用以下过滤器：
【用法：】
要过滤的字段如果是多个就可以传数组
【注：】表格中的数据是后台返回的json，页面得到后台返回的json后自己搞的
【注：】：还有待完善，部分内容还没学会
easyui中的数据网格应用
1.页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>">
<link rel="stylesheet" type="text/css" href="<%=basePath %>jquery-easyui-1.3.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath %>jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath %>jquery-easyui-1.3.6/themes/demo.css">
<script type="text/javascript" src="<%=basePath %>js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=basePath %>jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body style="text-align: center;height: 100%;">
<table class="easyui-datagrid" title="" style="width:auto;height: auto;" id="dg"
data-options="singleSelect:true,url:'<%=basePath %>system/person_testt.do',method:'post',toolbar: '#tb',onClickRow: onClickRow,onRowContextMenu:onRowContextMenu">
<thead>
<tr>
<th data-options="field:'id',width:'65px',align:'center'">编号</th>
<th data-options="field:'name',width:'65px',align:'center',editor:'text'">姓名</th>
<th data-options="field:'sex',width:'65px',align:'center',editor:'text'">性别</th>
<th data-options="field:'age',width:'65px',align:'center',editor:'text'">age</th>
<th data-options="field:'phone',width:'65px',align:'center',editor:'text'">电话</th>
<th data-options="field:'email',width:'65px',align:'center',editor:'text'">email</th>
</tr>
</thead>
</table>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">插入行</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="doSearch()">查询</a>
<br>
<span>姓名:</span>
<input id="name" style="line-height:26px;border:1px solid #ccc">
<span>email:</span>
<input id="email" style="line-height:26px;border:1px solid #ccc">
</div>
<script type="text/javascript">
var editIndex = undefined;
//判断是否可以编辑
function endEditing(){
if (editIndex == undefined){return true;}
if ($('#dg').datagrid('validateRow', editIndex)){
var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'id'});
$('#dg').datagrid('endEdit', editIndex);
return true;
} else {
return false;
}
}
function doSearch(){//分页查询
$('#dg').datagrid('load',{
name:$("#name").val(),
email:$("#email").val()
});
}
//点点击某行时
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
//当点击添加按钮时
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{row:{id:uuid}});
editIndex = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
/* if(editIndex==undefined){
$('#dg').datagrid('appendRow',{row:{id:2,title:2222}});
editIndex = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}else{
$('#dg').datagrid('insertRow',{index:editIndex+1,row:{id:3,title:2222}});
$('#dg').datagrid('selectRow', editIndex+1)
.datagrid('beginEdit', editIndex+1);
} */
}
}
function removeit(){
if (editIndex != null){
var selected = $("#dg").datagrid("getSelected");//获取选中行
alert(selected.name);//获取选中行的某个值
}
var json='[{"CityId":18,"CityName":"西安","ProvinceId":27,"CityOrder":1},{"CityId":53,"CityName":"广州","ProvinceId":27,"CityOrder":1}]';
//eval("data="+json);
alert(eval("data="+json));
}
//保存页面属性但不走后台
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
//撤销为保存页面之前的页面，不走后台，只改页面
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
endEditing();
var rows = $('#dg').datagrid('getChanges');
var effectRow = new Object();
effectRow = JSON.stringify(rows);
alert(effectRow);
}
//右键
function onRowContextMenu(e,rowIndex){
if(window.event.button=="2"){
document.oncontextmenu= function(){
return false;
};
}
}
</script>
</body>
</html>
【注：】
使用easyui不要自己加分页，在table属性中加：pagination:true，即可添加分页栏
2.后台代码：
后台代码将list集合与total（总条数传到页面），很重要，很好用，很方便
easyui中默认：page：第几页
rows：每页条数
ServletActionContext.getResponse().setContentType("application/json; charset=utf-8");
List<Person> list=personService.pageByHql(hql, page, rows);
//转json用以下三行，可以将json中的json得到，即存在主外键关联情况下问题
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
String json=JSONArray.fromObject(list, jsonConfig).toString();
//拼字符串传值
String str="{\"total\":"+list.size()+",\"rows\":"+json+"}";
ServletActionContext.getResponse().getWriter().write(str);
ServletActionContext.getResponse().getWriter().close();
以上代码将list集合与total封装到json中，页面即可获取值，具体怎么获得在easyui的js中，没兴趣去研究
3.要点：
【1】：页面中的data-options中的url写要请求的后台，先加载页面后请求后台
【2】：请求后台后返回的是json数据，json数据是由后台查询的实体集合转换而来，实体最好不要有主外键关联，如有关联
<th data-options="field:'organization',width:'65px',align:'center',editor:'text',
formatter:function(value,rec,index){
var name='';
if(value!=null){
name= value.name;
}
return name;
}">机构</th>
4.如果不需要在页面显示主外键关联数据也可以使用以下过滤器：
import net.sf.json.JsonConfig;
import net.sf.json.util.PropertyFilter;
public class JsonFilter {
public static JsonConfig getFilter(final String[] s){
JsonConfig config=new JsonConfig();
config.setJsonPropertyFilter(new PropertyFilter() {
@Override
public boolean apply(Object source, String name, Object value) {
// TODO Auto-generated method stub
if(juge(s, name)){
return true;
}else{
return false;
}
}
public boolean juge(String[] s,String s2){
boolean b=false;
for(String s1:s){
if(s2.equals(s1)){
b=true;
}
}
return b;
}
});
return config;
}
}
【用法：】
JsonConfig config=JsonFilter.getFilter(new String[]{"organization","user"});
ServletActionContext.getResponse().getWriter().write((JSONArray.fromObject(list, config)).toString());
要过滤的字段如果是多个就可以传数组
【注：】表格中的数据是后台返回的json，页面得到后台返回的json后自己搞的
【注：】：还有待完善，部分内容还没学会