Jqgrid搜索工具栏过滤器独特的下拉列表

问题描述：

我已经使用了this post中的示例，它非常适合在基于列数据的搜索工具栏中创建唯一的下拉列表。但是，如果我有多页数据，则只会从第一页填充下拉列表。我是jquery和jqgrid的新手，一直无法找到解决方案。有任何想法吗？Jqgrid搜索工具栏过滤器独特的下拉列表

谢谢。

这里是从上面链接的帖子复制的代码。

var mydata = [ 
    {id:"1", Name:"Miroslav Klose",  Category:"sport", Subcategory:"football"}, 
    {id:"2", Name:"Michael Schumacher", Category:"sport", Subcategory:"formula 1"}, 
    {id:"3", Name:"Albert Einstein", Category:"science", Subcategory:"physics"}, 
    {id:"4", Name:"Blaise Pascal",  Category:"science", Subcategory:"mathematics"} 
], 
grid = $("#list"), 
getUniqueNames = function(columnName) { 
    var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [], 
     textsLength = texts.length, text, textsMap = {}, i; 
    for (i=0;i<textsLength;i++) { 
     text = texts[i]; 
     if (text !== undefined && textsMap[text] === undefined) { 
      // to test whether the texts is unique we place it in the map. 
      textsMap[text] = true; 
      uniqueTexts.push(text); 
     } 
    } 
    return uniqueTexts; 
}, 
buildSearchSelect = function(uniqueNames) { 
    var values=":All"; 
    $.each (uniqueNames, function() { 
     values += ";" + this + ":" + this; 
    }); 
    return values; 
}, 
setSearchSelect = function(columnName) { 
    grid.jqGrid('setColProp', columnName, 
       { 
        stype: 'select', 
        searchoptions: { 
         value:buildSearchSelect(getUniqueNames(columnName)), 
         sopt:['eq'] 
        } 
       } 
    ); 
}; 
grid.jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    colModel: [ 
     { name:'Name', index:'Name', width:200 }, 
     { name:'Category', index:'Category', width:200 }, 
     { name:'Subcategory', index:'Subcategory', width:200 } 
    ], 
    sortname: 'Name', 
    viewrecords: true, 
    rownumbers: true, 
    sortorder: "desc", 
    ignoreCase: true, 
    pager: '#pager', 
    height: "auto", 
    caption: "How to use filterToolbar better locally" 
}).jqGrid('navGrid','#pager', 
      {edit:false, add:false, del:false, search:false, refresh:false}); 

setSearchSelect('Category'); 
setSearchSelect('Subcategory'); 

grid.jqGrid('setColProp', 'Name', 
      { 
       searchoptions: { 
        sopt:['cn'], 
        dataInit: function(elem) { 
         $(elem).autocomplete({ 
          source:getUniqueNames('Name'), 
          delay:0, 
          minLength:0 
         }); 
        } 
       } 
      }); 

grid.jqGrid('filterToolbar', 
      {stringResult:true, searchOnEnter:true, defaultSearch:"cn"});

答

如果您使用datatype: 'local'您在mydata已获得您需要的信息。或者，您可以使用var gridData = grid[0].p.data或与var gridData = grid.jqGrid('getGridParam','data')相同的网格包含所有网格页面。因此，您可以使用gridData.length和gridData[columnName]或String(gridData[columnName])代替textsLength和texts[i]在getUniqueNames函数中。

感谢Oleg，这听起来像是朝着正确方向迈出的一步。但是，我不确定如何将这些更改应用到上面的代码以使其工作。再次，我对Jqgrid和Javascript真的很陌生，有很多东西需要学习。所以，如果你不介意你能告诉我更改代码的地方吗？再次感谢。 – kes9 2011-06-20 16:15:44

@ kes9：这并不难。我会在稍后为你准备的（我刚刚从客户手中拿回来，然后在家里做些事情:-)）。 – Oleg 2011-06-20 17:51:12

没问题。谢谢。 – kes9 2011-06-20 18:21:41

答

您必须将列表发送到jqgrid之外的页面。 jqgrid一次只能拉一个页面，并且不知道所有其他数据，如果你在ajax模式下使用它。

如果这只是使用上面的mydata，并且数据全部在js范围内，而只是在另一个页面上（jqgrid上的结果集），为什么不建立列表并使用它var的位置称为文本。您只会浏览页面数据，而不是您加载的所有数据。这是否有意义？

Jqgrid搜索工具栏过滤器独特的下拉列表

相关推荐