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, и вы пытаетесь использовать, если Whiteout JSFiddle. Это не правильно. Вы должны удалить ссылки на службу Echo, если вам нужно использовать местных данных (datatype: "local").

Соответствующий код будет выглядеть

$(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 локальный фильтр не работает

ответ

Смежные вопросы