easyui中的数据网格应用
1.页面代码：
class="java" name="code"><%@ 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">
[url=javascript:void(0)]插入行[/url]
[url=javascript:void(0)]删除行[/url]
[url=javascript:void(0)]Accept[/url]
[url=javascript:void(0)]Reject[/url]
[url=javascript:void(0)]GetChanges[/url]
</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 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>
2.后台代码：
public void testt() throws IOException{
ServletActionContext.getResponse().setContentType("application/json");
String hql = "from Person where state ='在职'";
pageNumber = (pageNumber == null || pageNumber.equals("0")) ? "1":pageNumber;
//每页显示条数
pageSize = (pageSize == null || pageSize.equals("0")) ? "10":pageSize;
List<Person> list=personService.pageByHql(hql, Integer.parseInt(pageNumber), Integer.parseInt(pageSize));
// JsonConfig config=JsonFilter.getFilter(new String[]{"organization","user"});
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
ServletActionContext.getResponse().getWriter().write((JSONArray.fromObject(list, jsonConfig)).toString());
// ServletActionContext.getResponse().getWriter().write((JSONArray.fromObject(list, config)).toString());
ServletActionContext.getResponse().getWriter().close();
}
3.要点：
【1】：页面中的data-options中的url写要请求的后台，先加载页面后请求后台
【2】：请求后台后返回的是json数据，json数据是由后台查询的实体集合转换而来，实体最好不要有主
外键关联，如有关联，上方的后台方法中也已经解决，页面中还有点小问题，没法从json中提取json中的数据
【3】：后台代码要注意的是json的转换：
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
ServletActionContext.getResponse().getWriter().write((JSONArray.fromObject(list, jsonConfig)).toString());
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());
要过滤的字段如果是多个就可以传数组
【注：】：还有待完善，部分内容还没学会
相关文章
