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

时间:2017-01-07 09:03:45

标签: javascript jquery json jqgrid free-jqgrid

根据

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

value属性可以是object:

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)

发生在第9680行的免费jqgrid 4.13.6源代码中,其中包含:

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

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

1 个答案:

答案 0 :(得分:2)

网址dataUrl应返回带有<select>的HTML片段和所有选项。回调buildSelect允许使用dataUrl,它以任何其他格式返回有关选项的信息,但buildSelect必须将dataUrl的响应转换为<select>和所有选项。您可以在buildSelect的{​​{3}}中找到editoptions.buildSelect回调的以下说明:

  

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

searchoptions.buildSelect的文档(请参阅the old documentation)提供了几乎相同的信息。

换句话说,您尝试以错误的方式使用buildSelect 。返回buildSelect的字符串必须包含<select>的HTML片段而不是对象。或者,免费的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;
}