我有一个jqGrid,它有服务器端数据,有10行。我使用jqGrids本地multiselect = true
,然后在各种jqgrid事件上推送/拼接所选行的id ...所有这些都完美无缺。我想更进一步,并且有一个“查看选定”选项,用户可以选择以编程方式创建过滤器,以仅显示在我选定行的数组中包含id的行。
因此,如果用户在选择“查看所选项”选项时选择了125行10,000,我将创建一个过滤器,仅显示在我选定行数组中具有id的125行。
尝试了一些方法来显示所选内容而不进行过滤,通过隐藏行但遇到用户选择第57页的行的问题...然后他们选择“查看所选”然后查看所选内容的唯一方法是导航到第57页。
尝试在dataformat=json
和dataformat=local
之间切换...但是这让我在jqGrid代码中使用sType过滤方式感到头疼。
如果有人有办法创建这个神奇的过滤器...或者更好的过滤/排序所选服务器端数据的方法,那么所有的帮助都会受到赞赏。
我为丑陋的格式化道歉,我们CRUD了网格创建,我们不打印它=)
var selectedIDs = [], viewSelectedOnly = false;
var WrapperDivID = $('#grid_wrapper'),
GridDivID = $('#BatchBatchGrid');
//used to help us get gridid out for shiftclick of header
WrapperDivID.attr('data-id', '120');
var _AppType = Enum.GridArray(Enums.Security_ApplicationType);
$(document).ready(function () {
GridDivID.jqGrid({
colNames:[
'LocationID'
,
'ChannelID'
,
'Post'
,
'Actions'
,
'ID'
,
'Posted'
,
'Channel'
,
'StoreCode'
,
'Location'
,
'Reference#'
,
'Remote Ref#'
,
'Open Date'
,
'Close Date'
,
'Sales + Tax'
,
'Status'
,
'Register #'
],
colModel:
[
{
name:
'Account_Location.ID'
,
index:
'Account_Location.ID'
,
width:
10 ,
align:
'left'
,
hidden:
true }
,
{
name:
'Channel_Channel.ID'
,
index:
'Channel_Channel.ID'
,
width:
10 ,
align:
'left'
,
hidden:
true }
,
{
name:
'Post'
,
index:
'Post'
,
width:
5 ,
align:
'center'
,
search:
false ,
sortable:
false ,
hidden:
true }
,
{
name:
'Action'
,
index:
'Action'
,
width:
10 ,
align:
'center'
,
search:
false ,
sortable:
false }
,
{
name:
'ID'
,
index:
'ID'
,
width:
10 ,
align:
'left'
,
hidden:
true }
,
{
name:
'Posted'
,
index:
'Batch_Batch.Posted'
,
width:
10 ,
align:
'left'
,
search:
true ,
stype:
'select'
,
searchoptions:
'{value: ddPosted }'
}
,
{
name:
'Channel_Channel.Name'
,
index:
'Channel_Channel.Name'
,
width:
15 ,
align:
'left'
}
,
{
name:
'Account_Location.StoreCode'
,
index:
'Account_Location.StoreCode'
,
width:
7 ,
align:
'left'
}
,
{
name:
'Account_Location.Name'
,
index:
'Account_Location.Name'
,
width:
40 ,
align:
'left'
}
,
{
name:
'BatchNumber'
,
index:
'Batch_Batch.BatchNumber'
,
width:
15 ,
align:
'left'
}
,
{
name:
'RemoteReferenceNumber'
,
index:
'RemoteReferenceNumber'
,
width:
15 ,
align:
'left'
}
,
{
name:
'OpeningTime'
,
index:
'OpeningTime'
,
width:
15 ,
align:
'left'
}
,
{
name:
'ClosingTime'
,
index:
'ClosingTime'
,
width:
15 ,
align:
'left'
,
search:
'true'
}
,
{
name:
'SalesPlusTax'
,
index:
'SalesPlusTax'
,
width:
15 ,
align:
'left'
}
,
{
name:
'Status'
,
index:
'Batch_Batch.Open'
,
width:
15 ,
align:
'left'
,
search:
true ,
stype:
'select'
,
searchoptions:
'{value:ddStatuses}'
}
,
{
name:
'RegisterNumber'
,
index:
'RegisterNumber'
,
width:
15 ,
align:
'left'
}
],
pager :$('#pager') ,
rowNum :"50"
,
rowList :[10,20,50,100] ,
sortname :'Batch_Batch.Closingtime'
,
sortorder :"desc"
,
viewrecords :true ,
url :'../Grid/BatchBatchGetData'
,
datatype :'json'
,
mtype :'GET'
,
autowidth :true ,
autoheight :true ,
height :400 ,
multiselect :true ,
rownumbers :true ,
gridComplete: function(){
var ids = GridDivID.jqGrid('getDataIDs');
for(var i = 0; i < ids.length; i ++){
var id = ids[i];
var link = '<a href="../Accounting/BatchView?BatchID=' + id + '" target="_new">View</a>';
GridDivID.jqGrid('setRowData',id,{Action:link});
if (viewSelectedOnly) {
if(selectedIDs.indexOf(id) === -1){
$('#' + id).css('display','none');
}
}
}
var curr_width = WrapperDivID.width();
GridDivID.jqGrid('setGridWidth', curr_width);
},
onSelectRow: function(id, status){
var p = this.p, item = $(this).getRowData(id), _index = selectedIDs.indexOf(id);
if(status){
if(selectedIDs.indexOf(id) === -1)
selectedIDs.push(id);
}else{
selectedIDs.splice(_index, 1);
}
},
loadComplete: function(gridData){
var p = this.p, data = p.data, item, grid = $(this), index = p._index, rowid, i, selCount;
//Logic for view selected
if (gridData.rows.length > 0) {
for (var i = 0; i < gridData.rows.length; i++) {
if(selectedIDs.indexOf(gridData.rows[i].id) !== -1){
grid.jqGrid('setSelection', gridData.rows[i].id, true);
}
}
}
},
onSelectAll: function(aRowids,status){
var p = this.p;
for (var i = 0; i < aRowids.length; i++) {
var _index = selectedIDs.indexOf(aRowids[i])
if(status){
if(selectedIDs.indexOf(aRowids[i]) === -1)
selectedIDs.push(aRowids[i]);
}else{
selectedIDs.splice(aRowids[i], 1);
}
}
}
}); //Ends jqGrid instantiation
GridDivID.jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:true},{closeAfterAdd: true,closeAfterEdit: true},{closeAfterAdd: true,closeAfterEdit: true});
GridDivID.jqGrid('filterToolbar',{stringResult: true,searchOnEnter:true});
//GridDivID.jqGrid('gridResize',{minWidth:350,minHeight:100});
}); //Ends Document Ready
答案 0 :(得分:0)
我找到了一个适合我们的解决方案,可能不一定很容易为其他人实施。 我们有一些服务器端代码,它接受这样的查询字符串并将其解析为我们用于SQL的过滤语言。
查询字符串参数
nd:1354661490131
rows:50
page:1
sidx:Batch_Batch.Closingtime
sord:desc
filters:{"groupOp":"OR","rules":[{"field":"Batch_Batch.ID","op":"in","data":"'fa8d00f6-3faf-47a5-a0b0-b21879f2e54f', '8a59b8a5-66de-4ad1-ac89-81e645303b8c'"}]}
我发现victorz的这篇文章 http://www.trirand.com/blog/?page_id=393/discussion/extendig-default-search-operators-list/ 它给出了所有潜在的jqGrid运算符
jqGrid运算符
['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']
and correspndent list of aliases declared by sopt option:
['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
我最初没有意识到有一个'in'运算符,这正是我所需要的=)。为了使它与过滤器解析器一起使用,我必须将它从数组更改为字符串...所以["1", "2" "3"]
到"'1', '2', '3'"
Javascript如何创建过滤器
var grid = $('#BatchBatchGrid');
f = { groupOp: "OR", rules: [] };
// String that is used to store array values for server side filtering
var arrayToString= '';
for (var i = 0; i < selectedIDs.length; i++) {
arrayToString+= (i != selectedIDs.length - 1) ? "'" + selectedIDs[i] + "', " : "'" + selectedIDs[i] + "'";
}
f.rules.push({ field: "Batch_Batch.ID", op: "in", data: arrayToString});
grid[0].p.search = true;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1, current: true}]);
上次停止过滤器构建器 - 服务器端
当它到达控制器端时,代码被擦除并最终写出一些类似于'('1','2','3')中的ID的SQL语法
希望这可以帮助其他人尝试使用服务器端数据来完成此任务。如果有人有任何更简单的解决方案,我不介意看到它们,这个很好用......但总是喜欢看其他方法=)