JqGrid本地過濾器不工作

下面這段代碼不適用於本地數據的過濾器工具欄。JqGrid本地過濾器不工作

請幫我解決這個問題。我是jqgrid的新手。我正在嘗試使我的網格在本地進行過濾。下面這段代碼是從小提琴中給出的例子中拿出來的。

我即將做同樣的事情，但會發生什麼，我在我的網格中有兩個過濾器。如果我選擇兩個過濾器，那麼只有網格才能正確過濾數據。但是，如果我只選擇一個過濾器，那麼網格不會獲得過濾器。 Eventhough第二過濾器值是「無濾波器」所有的

var serverResponse = [ 
    {id: 10, label: 10, value: "Abc"}, 
    {id: 20, label: 20, value: "Xyz"}, 
    {id: 30, label: 30, value: "Abc"}, 
    {id: 40, label: 40, value: "Xyz"}, 
    {id: 50, label: 50, value: "Abc"}, 
    {id: 60, label: 60, value: "Abc"}, 
    {id: 70, label: 70, value: "Xyz"}, 
    {id: 80, label: 90, value: "Abc"}, 
    {id: 90, label: 10, value: "Xyz"}, 
    {id: 100, label: 20, value: "Abc"}, 
    {id: 110, label: 10, value: "Abc"}, 
    {id: 120, label: 30, value: "Xyz"}, 
    {id: 130, label: 10, value: "Abc"}, 
    {id: 140, label: 60, value: "Xyz"}, 
    {id: 150, label: 10, value: "Abc"} 
]; 


$("#grid").jqGrid({ 
    url: "/echo/json/", // use JSFiddle echo service 
    postData: { 
     json: JSON.stringify(serverResponse) // needed for JSFiddle echo service 
    }, 
    mtype: "POST", // needed for JSFiddle echo service 
    datatype: "json", 
    colNames: ["Label", "Value"], 
    colModel: [ 
     {name: "label", width: 70, template: "integer" }, 
     {name: "value", width: 200 }  
    ], 
    loadonce: true, 
    pager: true, 
    rowNum: 10, 
    rowList: [5, 10, "10000:All"], 
    iconSet: "fontAwesome", 
    cmTemplate: { autoResizable: true }, 
    shrinkToFit: false, 
    autoResizing: { compact: true }, 
    beforeProcessing: function (data) { 
     var labelMap = {}, valueMap = {}, i, item, labels = ":All", values = [], $self = $(this); 
     for (i = 0; i < data.length; i++) { 
      item = data[i]; 
      if (!labelMap[item.label]) { 
       labelMap[item.label] = true; 
       labels += ";" + item.label + ":" + item.label; 
      } 
      if (!valueMap[item.value]) { 
       valueMap[item.value] = true; 
       values.push(item.value); 
      } 
     } 
     $self.jqGrid("setColProp", "label", { 
      stype: "select", 
      searchoptions: { 
       value: labels, 
       sopt: ["eq"] 
      } 
     }); 
     $self.jqGrid("setColProp", "value", { 
      stype: "select", 
      searchoptions: { 
       value: values, 
       sopt: ["eq"] 
      } 
     }); 

     // one should use stringResult:true option additionally because 
     // datatype: "json" at the moment, but one need use local filtreing later 
     $self.jqGrid("filterToolbar", {stringResult: true }); 
    } 
});

來源

2016-02-05 Jayakumar Natarajan

首先可以看到你得到JFSiddle，它使用的jsfiddle的回聲服務創建的代碼，並嘗試如果白化的jsfiddle使用。這是不對的。如果您需要使用本地數據（datatype: "local"），則應刪除對Echo服務的引用。

相應的代碼看起來像

$(function() { 
    "use strict"; 
    var mydata = [ 
     {id: 10, label: 10, value: "Abc"}, 
     {id: 20, label: 20, value: "Xyz"}, 
     {id: 30, label: 30, value: "Abc"}, 
     {id: 40, label: 40, value: "Xyz"}, 
     {id: 50, label: 50, value: "Abc"}, 
     {id: 60, label: 60, value: "Abc"}, 
     {id: 70, label: 70, value: "Xyz"}, 
     {id: 80, label: 90, value: "Abc"}, 
     {id: 90, label: 10, value: "Xyz"}, 
     {id: 100, label: 20, value: "Abc"}, 
     {id: 110, label: 10, value: "Abc"}, 
     {id: 120, label: 30, value: "Xyz"}, 
     {id: 130, label: 10, value: "Abc"}, 
     {id: 140, label: 60, value: "Xyz"}, 
     {id: 150, label: 10, value: "Abc"} 
    ]; 

    $("#grid").jqGrid({ 
     datatype: "local", 
     data: mydata, 
     colNames: ["Label", "Value"], 
     colModel: [ 
      {name: "label", width: 70, template: "integer" }, 
      {name: "value", width: 200 }  
     ], 
     pager: true, 
     rowNum: 10, 
     rowList: [5, 10, "10000:All"], 
     iconSet: "fontAwesome", 
     cmTemplate: { autoResizable: true }, 
     shrinkToFit: false, 
     autoResizing: { compact: true } 
    }).jqGrid("filterToolbar"); 
});

觀看演示https://jsfiddle.net/0bfnt8ym/

如果你想創建一個具有獨特的價值選擇，那麼你可以做到這一點之前創建的網格：

$(function() { 
    "use strict"; 
    var mydata = [ 
     {id: 10, label: 10, value: "Abc"}, 
     {id: 20, label: 20, value: "Xyz"}, 
     {id: 30, label: 30, value: "Abc"}, 
     {id: 40, label: 40, value: "Xyz"}, 
     {id: 50, label: 50, value: "Abc"}, 
     {id: 60, label: 60, value: "Abc"}, 
     {id: 70, label: 70, value: "Xyz"}, 
     {id: 80, label: 90, value: "Abc"}, 
     {id: 90, label: 10, value: "Xyz"}, 
     {id: 100, label: 20, value: "Abc"}, 
     {id: 110, label: 10, value: "Abc"}, 
     {id: 120, label: 30, value: "Xyz"}, 
     {id: 130, label: 10, value: "Abc"}, 
     {id: 140, label: 60, value: "Xyz"}, 
     {id: 150, label: 10, value: "Abc"} 
    ], 
    buildUniqueValues = function (data, propName) { 
     var i, item, valueMap = {}, values = [":All"], dataLength = data.length, value, lowCaseValue; 
     for (i = 0; i < dataLength; i++) { 
      value = data[i][propName]; 
      if (value !== undefined) { 
       lowCaseValue = typeof value === "string" ? value.toLowerCase() : value; 
       if (valueMap[lowCaseValue] === undefined) { 
        valueMap[lowCaseValue] = lowCaseValue; 
        values.push(lowCaseValue + ":" + value); 
       } 
      } 
     } 
     return values.join(";"); 
    }; 

    $("#grid").jqGrid({ 
     datatype: "local", 
     data: mydata, 
     colNames: ["Label", "Value"], 
     colModel: [ 
      { name: "label", width: 70, template: "integer", 
       stype: "select", 
       searchoptions: { 
        value: buildUniqueValues(mydata, "label"), 
        sopt: ["eq", "ne"] 
       } }, 
      { name: "value", width: 200,stype: "select", 
       searchoptions: { 
        value: buildUniqueValues(mydata, "value"), 
        sopt: ["eq", "ne"] 
       } }  
     ], 
     pager: true, 
     rowNum: 10, 
     rowList: [5, 10, "10000:All"], 
     iconSet: "fontAwesome", 
     cmTemplate: { autoResizable: true }, 
     shrinkToFit: false, 
     autoResizing: { compact: true } 
    }).jqGrid("filterToolbar"); 
});

查看演示https://jsfiddle.net/OlegKi/0bfnt8ym/2/

來源

2016-02-05 16:33:54 Oleg

JqGrid本地過濾器不工作

回答

相關問題