从jqrid4.6升级到4.13.5时遇到的问题创建动态下拉菜单时使用Unique values.dropdown布局会受到干扰

Question

试图创建一个演示来显示Field-source，client的动态下拉列表，但数据返回null。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
 
var columnNameArrayForColumnFilter=["source","name"]; 
 
    $(function() { 
 
     "use strict"; 
 
     var mydata = [ 
 
       {id:"1", invdate:"720:0:0",name:"test", source:"note1", amount:"200.00",tax:"10.00",total:"210.00"}, 
 
       {id:"2", invdate:"34:09:0",name:"test2", source:"note2", amount:"300.00",tax:"20.00",total:"320.00"}, 
 
       {id:"3", invdate:"0:0:0",name:"test3", source:"note1", amount:"400.00",tax:"30.00",total:"430.00"}, 
 
       {id:"4", invdate:"90:08:8",name:"test4", source:"note2", amount:"200.00",tax:"10.00",total:"210.00"}, 
 
       {id:"5", invdate:"09:34:2",name:"test4", source:"note3", amount:"300.00",tax:"20.00",total:"320.00"}, 
 
       {id:"6", invdate:"80:12:02",name:"test6", source:"note3", amount:"400.00",tax:"30.00",total:"430.00"}, 
 
       {id:"7", invdate:"80:12:01",name:"test7", source:"note2", amount:"200.00",tax:"10.00",total:"210.00"}, 
 
       {id:"8", invdate:"112:23:6",name:"test2", source:"note2", amount:"300.00",tax:"20.00",total:"320.00"}, 
 
       {id:"9", invdate:"80:12:1 ",name:"test9", source:"note1", amount:"400.00",tax:"30.00",total:"430.00"}, 
 
       {id:"10",invdate:"112:34:2",name:"test1",source:"note3",amount:"500.00",tax:"30.00",total:"530.00"}, 
 
       {id:"11",invdate:"114:23:2",name:"test11",source:"note2",amount:"500.00",tax:"30.00",total:"530.00"}, 
 
\t \t \t \t {id:"13",invdate:"80:12:4 ",name:"test11",source:"note2",amount:"500.00",tax:"30.00",total:"530.00"}, 
 
\t \t \t \t {id:"14",invdate:"0:1:0",name:"test11",source:"note12",amount:"500.00",tax:"30.00",total:"530.00"} , 
 
\t \t \t \t {id:"15",invdate:"80:12:3",name:"test11",source:"note12",amount:"500.00",tax:"30.00",total:"530.00"} 
 
      ]; 
 
      
 
    
 
     $("#grid").jqGrid({ 
 
      data: mydata, 
 
      colNames:['Inv No','Duration', 'Client', 'Amount','Tax','Total','source'], 
 
       colModel:[ 
 
        {name:'id',index:'id', search:false,width:65, sorttype: 'int'}, 
 
        {name:'invdate',index:'invdate', width:120, align:'center', sorttype:'datetime', datefmt:'H:i:s',searchoptions: { sopt:['inbetween','eq','lt','le','gt','ge'] }}, 
 
        {name:'name',index:'name', width:90,search:true,}, 
 
        {name:'amount',index:'amount', width:70, formatter:'number', align:"right",search:false,}, 
 
        {name:'tax',index:'tax', width:60, formatter:'number', align:"right",search:false,}, 
 
        {name:'total',index:'total', width:60, formatter:'number',align:"right",search:false,}, 
 
        {name:'source',index:'source', width:100, search:true,} 
 
       ], 
 
      pager: true, 
 
      autoencode: true, 
 
      viewrecords: true, 
 
      rowNum: 10, 
 
      rowList: [5, 10, 20, "10000:All" ], 
 
      caption: "Demonstration custom searching operation (Duration Range)", 
 
      customSortOperations: { 
 
       
 
       inbetween: { 
 
        operand: "inbetween",  
 
        text: "in between", 
 
        filter: function (options) { 
 
        } 
 
       } 
 
      } 
 
      
 
     }).jqGrid("filterToolbar", 
 
      {stringResult: true, searchOnEnter: true, searchOperators : true}); 
 
applyColumnFilterOnGrid(columnNameArrayForColumnFilter,'grid'); 
 
    }); 
 

 
function applyColumnFilterOnGrid(columnNameArrayForColumnFilterInGrid) 
 
{ 
 
\t for(var i=0;i<columnNameArrayForColumnFilterInGrid.length;i++) 
 
\t { 
 
\t \t setSearchSelect.call("#grid",columnNameArrayForColumnFilterInGrid[i]); 
 
\t } 
 
} 
 

 

 

 
// this function return unique value for column filter on grid 
 
var getUniqueNames = function(columnName) { 
 

 

 
var data = $('#grid').jqGrid('getGridParam', 'data'); 
 
var uniqueTexts = [], text, textsMap = {}, i; 
 

 
for (i = 0; i < data.length; i++) { 
 

 
       text = data[i][columnName]; 
 

 
       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; 
 
} 
 
// this method add All value in column filter values and return value map 
 
var buildSearchSelect = function(uniqueNames) { 
 
     var values=":All"; 
 
     $.each (uniqueNames, function() { 
 
      values += "," + this + ":" + this; 
 
\t \t \t 
 
     }); 
 
     return values; 
 
    }; 
 
// this function is create drop down for column filter functionlity on grid and set values 
 
    var setSearchSelect = function(columnName) { 
 
\t 
 
     $("#grid").jqGrid("setColProp", columnName, 
 
        { 
 
         stype:"select", 
 
         searchoptions: { 
 
          value:buildSearchSelect(getUniqueNames.call("#grid",columnName)), 
 
          sopt:["eq"] 
 
         } 
 
        } 
 
     ); 
 
    };

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css"> 
 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
    <!--<link rel="stylesheet" href="../jqGrid/css/ui.jqgrid.css">--> 
 
    <link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/OK/ui.jqgrid.css">

<html lang="en"> 
 
<head> 
 
    </head> 
 
<body> 
 
<div id="outerDiv" style="margin:5px;"> 
 
    <table id="grid"></table> 
 
</div> 
 
</body> 
 
</html>

当我尝试升级，从4.6〜4.13.5 ..我现有的动态下拉独特的价值得到不安。

Answer 1

当前的代码有一些简单的类似错误的$("grid")代替$("#grid")的getUniqueNames和setSearchSelect内使用，并与data填充searchoptions.value之前创建filterToolbar：你filterToolbar代替filterToolbar之前后打电话applyColumnFilterOnGrid。

下一个问题存在于buildSearchSelect中，我最初发布在the old answer。你改了行

values += ";" + this + ":" + this; 

到

values += "," + this + ":" + this; 

这是不对的。应该使用;而不是,作为分隔符（参见jqGrid 4.6的the documentation）。如果您将","更换为";"，则问题将解决。一般来说，你可以使用,代替;作为value分隔，但你应该通知的jqGrid有关通过使用delimiter: ","选项：

var setSearchSelect = function(columnName) { 

    $("#grid").jqGrid("setColProp", columnName, 
       { 
        stype:"select", 
        searchoptions: { 
         delimiter: ",", 
         value:buildSearchSelect(getUniqueNames.call("#grid",columnName)), 
         sopt:["eq"] 
        } 
       } 
    ); 
};