2012-12-04 118 views
1

我有一個jqGrid,它具有服務器端數據,有成千上萬行。我使用jqGrids原生multiselect = true,然後在各種jqgrid事件上推/拼接選定行的ID ...所有這些都可以很好地工作。我想進一步採取這一步,並有一個「查看選定的」選項,用戶可以選擇哪個將以編程方式創建一個過濾器,只顯示在我的選定行數組中包含一個id的行。只顯示選中的行jqGrid

因此,如果用戶在選擇「查看所選內容」選項時選擇了125行10000行,我將創建一個過濾器,僅顯示那些在我所選行的數組中有id的行。

嘗試了幾種方式來顯示未經過濾的選定內容,通過隱藏行但遇到了用戶選擇第57頁上的行的問題......然後他們選擇「查看所選內容」,然後查看所選內容的唯一方法是導航到57頁

嘗試dataformat=jsondataformat=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 

回答

0

我發現,爲我們有效的解決方案,未必輕易爲他人實施THO 。 我們有一些服務器端代碼,它接受這樣的查詢字符串並將其解析爲我們針對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}]); 

最後一站過濾器製造商 - 服務器端

當它擊中控制器端的代碼被擦洗,並最終寫出類似於「凡在ID(」 1' ,‘2’,‘3’)」

一些SQL語法

希望這可以幫助其他人嘗試使用服務器端數據完成此操作。如果有人有任何更簡單的解決方案,我不介意看到他們,這一個很好...但總是喜歡看其他方法=)