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

[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]

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

要過濾的字段如果是多個就可以傳數組

【注：】：還有待完善，部分內容還沒學會

總結

以上是生活随笔為你收集整理的java 数据网格,easyui数据网格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。