easyui中的数据网格应用

1.页面代码：

class="java" name="code">

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

data-options="singleSelect:true,url:'system/person_testt.do',method:'post',toolbar: '#tb',onClickRow: onClickRow,onRowContextMenu:onRowContextMenu">

编号姓名性别age电话email

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.οncοntextmenu= function(){

return false;

};

}

}

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 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());

要过滤的字段如果是多个就可以传数组

【注：】：还有待完善，部分内容还没学会