javascript - 当数据类型为 url 时，jqgrid setColProp 不起作用

Question

我们正在使用 jquery grid 4.6。我们想为过​​滤器工具栏设置一个选择框。选择框应该有列唯一名称，这个问题已经得到解答，解决方案可以在: https://jsfiddle.net/4k0xgxok/ 找到。

当我们将data从local更改为url时，搜索框根本不会出现。我尝试制作一个简单的示例，仅将 searchoptions:value 更改为硬编码的内容，但它不起作用。 https://jsfiddle.net/xdbw5hmy/

代码是

    var getUniqueNames = function(columnName) {
      var texts = $("#jqGrid").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;
    };
    var  buildSearchSelect = function(uniqueNames) {
        var values=":All";
        $.each (uniqueNames, function() {
            values += ";" + this + ":" + this;
        });
        console.log(values);
        return values;
    };
    var mydata = [{
      "OrderId": "1",
      "CategoryName": "Beverages",
      "ProductName": "Steeleye Stout"
    }, {
      "OrderId": "2",
      "CategoryName": "Beverages",
      "ProductName": "Laughing Lumberjack Lager"
    }];
    $("#jqGrid").jqGrid({
      datatype: 'local',
      data: mydata,
      colModel: [{
        label: 'OrderID',
        name: 'OrderID',
        key: true,
        width: 75
      }, {
        label: 'ProductName',
        name: 'ProductName',
        width: 150
      }, {
        label: 'CategoryName',
        name: 'CategoryName',
        width: 150
      }],
      gridComplete: function() {
        $('#jqGrid').jqGrid("setColProp", "ProductName", {
          stype: "select",
          align: "center",
          searchoptions: {
            value: buildSearchSelect(getUniqueNames("ProductName")),
          }
        });
      },
      viewrecords: true,
      height: 250,
      rowNum: 20,
    });
    $('#jqGrid').jqGrid('filterToolbar');
  });

Answer 1

代码中的主要问题: gridComplete 的使用设置列属性和 getCol 的用法getUniqueNames里面。方法getCol仅使用当前页面中的数据，但您应该考虑从服务器返回的所有数据。第二个问题:你应该设置searchoptions.value从服务器加载数据后仅一次。另一边gridComplete每次分页、排序等之后都会被调用。最后非常重要的是调用filterToolbar 新设置之后 searchoptions.value已经设置了。您的演示中的代码 https://jsfiddle.net/xdbw5hmy/将首先创建过滤器工具栏，然后从服务器加载数据和searchoptions.value之前已设置。

你应该做的是使用beforeProcessing回调而不是 gridComplete 。回调beforeProcessing获取从服务器返回的完整数据作为参数。扫码即可调用setColProp修改searchoptions.value 。之后，可以通过调用 filterToolbar 创建过滤器工具栏。 。您将得到如下代码

var getUniqueNames = function(columnName, mydata) {
        var texts = $.map(mydata, function(item) {
            return item[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 = "";
        $.each(uniqueNames, function() {
            values += this + ":" + this + ";";
        });
        values = values.slice(0, -1);
        return values;
    },
    setSearchSelect = function(columnName, data) {
        $(this).jqGrid("setColProp", columnName, {
            stype: "select",
            align: "center",
            searchoptions: {
                value: buildSearchSelect(getUniqueNames.call(this, columnName, data)),
                sopt: ["eq", "ne"]
            }
        });
    },
    myDefaultSearch = "cn";

$("#jqGrid").jqGrid({
    url: 'https://api.myjson.com/bins/42mdc',
    datatype: 'json',
    colModel: [
        { name: 'OrderID', key: true, width: 75 },
        { name: 'ProductName' },
        { name: 'CategoryName' }
    ],
    beforeProcessing: function (data) {
        // !!! it will be called only after loading from the server
        // datatype is always "json" here
        setSearchSelect.call(this, "ProductName", data.rows);

        if (this.ftoolbar === true) {
            // if the filter toolbar already exist: we have to recreate it
            $(this).jqGrid('destroyFilterToolbar');
        }
        $(this).jqGrid("filterToolbar", {
            stringResult: true,
            defaultSearch: myDefaultSearch
        });
    },
    viewrecords: true,
    height: "auto",
    autoencode: true,
    rowNum: 20,
    loadonce: true
});

查看修改后的演示 https://jsfiddle.net/OlegKi/xdbw5hmy/1/

顺便说一句，我建议您考虑使用 select2而不是标准<select> 。如果用户拥有许多数据项，这对用户来说会更舒服，因为 select2具有集成的搜索输入字段，并且在用户键入文本期间所选数据将被减少。查看 the answer 中的演示, this one 。我建议您另外阅读the answer ，它演示了 beforeProcessing .