Question

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

我们如何将data从local更改为url search box根本不会出现。我试着制作一个简单的样本，只将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仅使用当前页面中的数据，但您应该考虑从服务器返回的所有数据。第二个问题：从服务器加载数据后，您应该只将<{1>}设置为一次。另一方面，searchoptions.value将在每次分页，排序等后调用。最后，在设置新设置gridComplete之后调用filterToolbar 非常重要。您的演示https://jsfiddle.net/xdbw5hmy/中的代码将首先创建过滤器工具栏，然后从服务器加载数据并在设置searchoptions.value之前。

您应该使用searchoptions.value回调代替beforeProcessing。从服务器返回的回调gridComplete获取完整数据作为参数。可以扫描数据并致电beforeProcessing以修改setColProp。之后，可以通过调用searchoptions.value来创建过滤器工具栏。您将获得如下代码

filterToolbar

请参阅修改后的演示https://jsfiddle.net/OlegKi/xdbw5hmy/1/

顺便说一句，我建议您考虑使用select2代替标准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 });。如果一个人有很多数据项，那么对用户来说会更舒服，因为<select>已经集成了搜索输入字段，并且在用户键入文本期间所选数据将会减少。查看来自the answer，this one的演示。我建议您另外阅读the answer，其中演示了select2。

当数据类型为url时，jqgrid setColProp无效

1 个答案: