我有一個jqGrid,它具有服務器端數據,有成千上萬行。我使用jqGrids原生multiselect = true
,然後在各種jqgrid事件上推/拼接選定行的ID ...所有這些都可以很好地工作。我想進一步採取這一步,並有一個「查看選定的」選項,用戶可以選擇哪個將以編程方式創建一個過濾器,只顯示在我的選定行數組中包含一個id的行。只顯示選中的行jqGrid
因此,如果用戶在選擇「查看所選內容」選項時選擇了125行10000行,我將創建一個過濾器,僅顯示那些在我所選行的數組中有id的行。
嘗試了幾種方式來顯示未經過濾的選定內容,通過隱藏行但遇到了用戶選擇第57頁上的行的問題......然後他們選擇「查看所選內容」,然後查看所選內容的唯一方法是導航到57頁
嘗試dataformat=json
和dataformat=local
之間切換...但是這給我造成了一些麻煩與S型濾波的jqGrid代碼一路下滑。
如果有人有辦法創建這個神奇的過濾器......或更好的方法來篩選/分類選定的服務器端數據,所有幫助表示讚賞。
我的醜陋的格式,我們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