如何从 buildSelect 返回选择选项作为对象

Question

根据

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config

value 属性可以是对象：

If set as object it should be defined as pair value:name - editoptions:{value:{1:'One',2:'Two'}}

Json API 返回 JSON 对象

{"total":2,"page":1,"rows":[
     {"Id":"L-10020","Liik":"10020","Artlnimi":"C vesinikud","Grupp":"L"},
     {"Id":"L-10072","Liik":"10072","Artlnimi":"C D-Perm","Grupp":"L"}
     ... ] }

Artlnimi 属性值应用作搜索中的选择选项。 我尝试使用它来使用免费的 jqgrid 4.13.6 创建选择列表

$grid.jqGrid('setColProp', 'Artliik_artlnimi', {
  searchoptions : {
  dataUrl: 'API/ArtliikL',
  buildSelect: function(response){
    var tulem={ '':'All' }, res=JSON.parse(response);
    $.each(res.rows, function(i, item) {
        tulem[item.Artlnimi]=item.Artlnimi;
        }
      );
    return tulem;
    },
  sopt: ['eq']
  },
  stype:"select"
});

那个错误之后

Uncaught TypeError: Cannot read property 'multiple' of undefined
    at Object.success (jquery.jqgrid.src.js:9680)
    at fire (jquery-1.12.4.js:3232)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
    at done (jquery-1.12.4.js:9840)
    at XMLHttpRequest.callback (jquery-1.12.4.js:10311)

出现在免费 jqgrid 4.13.6 源代码的第 9680 行，其中包含：

 if ($select[0].multiple && $select.find("option[selected]").length === 0 && $select[0].selectedIndex !== -1) {

如何解决此问题，以便搜索元素显示来自 buildSelect 返回的对象的数据。 Ifbild select 返回包含选择元素 html 的字符串。

Answer 1

URL dataUrl 应该返回带有 <select> 和所有选项的 HTML 片段。回调buildSelect 允许使用dataUrl，它以任何其他格式返回有关选项的信息，但buildSelect 必须将dataUrl 的响应转换为<select> 和所有选项。在editoptions.buildSelect的the old documentation中可以找到buildSelect回调的如下描述：

仅当设置了 dataUrl 参数时，此选项才相关。当。。。的时候 服务器响应无法构建选择元素，可以使用自己的 函数来构建选择。该函数应返回一个字符串 包含 dataUrl 中描述的选择和选项值 选项。传递给该函数的参数是服务器响应

searchoptions.buildSelect 的文档（参见here）提供了几乎相同的信息。

换句话说，你试图以错误的方式使用buildSelect。返回 buildSelect 的字符串必须包含 <select> 的 HTML 片段，而不是 as 对象。或者，免费的 jqGrid 允许 buildSelect 返回带有所有子选项的 <select> 的 DOM 元素或 <select> 的 jQuery 包装器

您可以将代码修复为类似

buildSelect: function (response) {
    var tulem = "<select><option value=''>All</option>";

    $.each(JSON.parse(response).rows, function (i, item) {
        var v = item.Artlnimi;
        // the simplified form of the next statement would be
        //     tulem += "<option value='" + v + "'>" + v + "</option>";
        // but one have to encode/escape the text in more common case.
        tulem += "<option value='" +
            String(v).replace(/\'/g, "&#39;") + "'>" +
            $.jgrid.htmlEncode(v) + "</option>";
    });

    return tulem + "</select>";
}

或喜欢

buildSelect: function (response) {
    var $tulem = $("<select><option value=''>All</option></select>");

    $.each(JSON.parse(response).rows, function (i, item) {
        $("<option></option>", { value: item.Artlnimi })
            .text(item.Artlnimi)
            .appendTo($tulem);
    });

    return $tulem;
}