javascript - 如何从 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 返回包含 select 元素 html 的字符串，它可以工作。

Answer 1

网址dataUrl应该返回带有 <select> 的 HTML 片段和所有选项。回调buildSelect允许使用dataUrl ，它以任何其他格式返回有关选项的信息，但 buildSelect必须隐藏 dataUrl 的响应至<select>和所有选项。您可以找到以下buildSelect的描述回调the old documentation的editoptions.buildSelect :

This option is relevant only if the dataUrl parameter is set. When the server response can not build the select element, you can use your own function to build the select. The function should return a string containing the select and options value(s) as described in dataUrl option. Parameter passed to this function is the server response

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;
}