我在java中实现jqgrid。
在实施search functionality
时我无法获得搜索结果,它重新加载所有记录的网格数据,而不是过滤结果。请帮助我解决此问题并指导我实现搜索功能以及advanced search function in java
.
我已经完成的部分代码:
var lastselected, lastsel2;
var curRowId = -1;
var gridContainerId = "#data-grid-container";
var la;
var usernames;
$(document).ready(
function() {
$(gridContainerId).jqGrid(
{
url : 'ManageUserServlet?methodName=fetchAllUsers',
datatype : "json",
colNames: ['Email', 'Lastname', 'Firstname', 'Group', 'Active'],
/*colModel: [
{ name: 'Email', width: 100, index: 'Email', searchoptions: { sopt: ['eq', 'ne']} },
{ name: 'Lastname', index: 'LastName', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'Firstname', index: 'FirstName', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'Group', index: 'Group', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'Active', index: 'Active', searchoptions: { sopt: ['eq', 'ne', 'cn']} }
],*/
colNames : [ 'Email', 'Lastname', 'Firstname', 'Group',
'Active'],
colModel : [ {
name : 'email',
index : 'email',
width : 85,
sortable : true,
sorttype : "text",
editable : true,
editoptions : {
size : "20",
maxlength : "30"
},
sopt : ['cn','bw','eq','ne','lt','gt','ew']
}, {
name : 'lastname',
index : 'lastname',
width : 75,
editable : true,
edittype : "text",
editoptions : {
size : "20",
maxlength : "30"
},
sopt : ['cn','bw','eq','ne','lt','gt','ew']
}, {
name : 'firstname',
index : 'firstname',
width : 85,
sortable : true,
sorttype : "text",
editable : true,
edittype : "text",
editoptions : {
size : "20",
maxlength : "30"
},
sopt : ['cn','bw','eq','ne','lt','gt','ew']
}, {
name : 'groupname',
index : 'groupname',
width : 80,
sortable : true,
sorttype : "text",
editable : true,
edittype : "text",
editoptions : {
size : "20",
maxlength : "30"
},
sopt : ['cn','bw','eq','ne','lt','gt','ew']
}, {
name : 'isactive',
index : 'isactive',
width : 80,
sortable : true,
sorttype : "text",
editable : true,
edittype : "text",
editoptions : {
size : "20",
maxlength : "30"
}
} ],
rowNum : jQuery("#data-grid-container").jqGrid(
'getRowData'),
rowList : [10, 20, 30, 40],
pager : '#data-grid-pager',
sortname : 'username',
viewrecords : true,
sortorder : "desc",
/*
* ondblClickRow : function(id) { if (id && id !==
* lastselected) {
* $(gridContainerId).jqGrid('restoreRow',
* lastselected); $(gridContainerId).jqGrid('editRow',
* id, true); lastselected = id; } },
*/
/*
* onSelectRow : function(username) { if (username &&
* username !== lastselected) {
* $(gridContainerId).jqGrid('restoreRow',
* lastselected); lastselected = null; } },
*/
onSelectRow : function(id) {
curRowId = id;
var ids = jQuery("#data-grid-container").jqGrid(
'getGridParam', 'selarrrow');
// alert("test: " + ids + "Length is::"+ids.length);
/*
* usernames = new Array(ids.length); var row;
* for(var i=0; i<ids.length;i++) { usernames[i] =
* jQuery("#data-grid-container").jqGrid('getCell',
* ids[i], 'username'); } temp='Urvin';
*/
},
caption : "",
height : 500
});
jQuery("#data-grid-container").jqGrid('setGroupHeaders', {
useColSpanStyle : false,
groupHeaders : [ {
startColumnName : 'email',
numberOfColumns : 4,
titleText : '<em>Users' +la+ '</em>' ,
},
{
startColumnName : 'group',
numberOfColumns : 1,
titleText : '<em>Users' +la+ '</em>' ,
}
]
});
$("#data-grid-container").jqGrid(
'navGrid',
'#data-grid-pager',
{
edit : true,
add : true,
del : true,
search : true
},
{
savekey : [ true, 13 ],
reloadAfterSubmit : true,
jqModal : false,
closeOnEscape : true,
closeAfterEdit : true,
caption : "Edit User",
url : 'ManageUserServlet?methodName=editUser',
afterSubmit : function(response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html(
"User get Added Successfully.");
jQuery("#success").fadeOut(6000);
return [ true, response.responseText ];
} else {
return [ false, response.responseText ];
}
}
},
// Add options
{
closeOnEscape : true,
caption : "Add User",
url : 'ManageUserServlet?methodName=addUser',
closeAfterAdd : true
},
// Delete options
{
caption : "Delete User",
onclickSubmit : function(eparams) {
var retarr = {};
// we can use all the grid methods here
// to obtain some data
var ids = jQuery("#data-grid-container").jqGrid(
'getGridParam', 'selarrrow');
// alert("test: " + ids + "Length is::"+ids.length);
var row;
for ( var i = 0; i < ids.length; i++) {
if (i == 0) {
usernames = jQuery("#data-grid-container")
.jqGrid('getCell', ids[i],
'username');
} else {
usernames += ","
+ jQuery("#data-grid-container")
.jqGrid('getCell', ids[i],
'username');
}
}
alert("Usernames :" + usernames);
retarr = {
lstUsername : usernames
};
return retarr;
},
url : 'ManageUserServlet?methodName=deleteUser'
},
{
Find: "Search",
Reset: "Reset",
closeOnEscape : true,
closeAfterSearch : true,
caption : "Search",
multipleSearch : true,
/*onClickFind : jQuery(gridContainerId).searchGrid( {sopt:['cn','bw','eq','ne','lt','gt','ew']})*/
/*var sg = jQuery("#mysearch").filterGrid(...)[0];
sg.triggerSearch();*/
autoSearch : true
});
$(".ui-jqgrid-titlebar").hide();
});
非常感谢在 jqgrid 中实现搜索的指导。
更新:
这是在 servlet 上创建JSON object
填充网格数据的代码:
private void fetchAllUsers() {
List<UserVO> lstUsers = adminServices.fetchAllUsers();
if(lstUsers != null && !lstUsers.isEmpty()) {
try{
JSONObject responseData=new JSONObject();
responseData.put("total",2);
responseData.put("page",1);
responseData.put("records",3);
JSONArray cellArray=new JSONArray();
JSONArray cell = new JSONArray();
JSONObject cellObj=new JSONObject();
int i=1;
for(UserVO userVO : lstUsers) {
if(userVO!= null) {
cellObj.put("id",i);
cell.add(userVO.getEmail());
cell.add(userVO.getLastName());
cell.add(userVO.getFirstName());
cell.add(userVO.getGroupVO().getGroupName());
if(userVO.isActive()){
cell.add("Active");
}else{
cell.add("In-Active");
}
cellObj.put("cell", cell);
cell.clear();
cellArray.add(cellObj);
i++;
}
}
responseData.put("rows", cellArray);
//response.setContentType("applisation/json");
out.print(responseData);
out.flush();
}catch(Exception e) {
System.out.println("There is some error");
}
}