Question

这是我用来使用jEditable向表行添加选择下拉列表的代码：

$('tr',this).find('td:eq(8)').css('cursor','pointer')
    .editable( 'update.php', {
        'type': "select",
        'loadurl': 'json.php',
        'onblur': 'submit',
        'callback': function( value, settings ) {
         // etc.
        });

问题是下拉列表中的选项未按所需顺序排序。来自json.php的原始JSON按名字排序（根据客户的要求）：

{"0":"Select driver...", "48":"Ashley Solis", "43":"Casey Segal", // etc.

但在最终的网页中，选择下拉列表中的选项按编号排序。

似乎jEditable在我不想要时重新排序JSON数据。我该如何解决这个问题？

Answer 1

更简单的解决方法：使值非数字。在开头或其他位置添加“_”，然后在选择后使用该值时将其删除：

{"_0":"Select driver...", "_48":"Ashley Solis", "_43":"Casey Segal", // etc.

这应该保留顺序（至少在我测试的浏览器中）。

Answer 2

原因

问题的根源不在jEditable中，事实上它用于创建选择下拉列表的JSON是单个对象。 JavaScript将对象属性视为未排序。这是jEditable 1.7.1中的关键代码（从第492行开始）：

 /* If it is string assume it is json. */
 if (String == data.constructor) {      
     eval ('var json = ' + data);
 } else {
 /* Otherwise assume it is a hash already. */
     var json = data;
 }
 for (var key in json) {
 // starts looping through the object properties

通常，for (var key in json)应按照创建顺序循环遍历JSON属性。相反，它们以数字（“按字母顺序”）的顺序循环。

修复

有很多方法可以解决这个问题，但最简单的方法是通过Google搜索an anonymously-authored jEditable plug-in I found on Pastebin。将其粘贴到新的JavaScript文件中，然后将其加载到HTML文件中 jEditable：

<script src="/js/jquery.jeditable.min.js"></script>
<script src="/js/jquery.jeditable.plugins.js"></script>

此外，必须更改json.php文件。而不是将JSON作为对象返回，如下所示：

{"0":"Select driver...", "48":"Ashley Solis", "43":"Casey Segal", // etc.

它应该将JSON作为线性数组返回，如下所示：

[" Select driver...||0","Ashley Solis||48","Casey Segal||43", // etc.

请注意在字符串“Select driver ...”的开头使用空格，以确保它将被排序到第一个位置。没有其他JavaScript需要更改，前提是json.php未在其他地方使用。

插件

这是the complete jEditable plugin I found on Pastebin：

// type: select (based on 1.7.1, added feature: sorted options)
$.editable.addInputType("select", {
    element: function (settings, original) {
        var select = $('<select />');
        $(this).append(select);
        return (select);
    },
    content: function (data, settings, original) {
        /* If it is string assume it is json. */
        if (String == data.constructor) {
            eval('var json = ' + data);
        } else {
            /* Otherwise assume it is a hash already. */
            var json = data;
        }

        var aData = [];
        for (var key in json) {
            if (!json.hasOwnProperty(key)) {
                continue;
            }
            if ('selected' == key) {
                continue;
            }

            aData.push(json[key] + "||" + key);
        }

        // Sort
        aData.sort();

        // Create
        for (var key in aData) {
            var aDataSplit = aData[key].split("||");

            var option = $('<option />').val(aDataSplit[1]).append(aDataSplit[0]);
            $('select', this).append(option);
        }

        /* Loop option again to set selected. IE needed this... */
        $('select', this).children().each(function () {
            if ($(this).val() == json['selected'] || $(this).text() == $.trim(original.revert)) {
                $(this).attr('selected', 'selected');
            }
        });
    }
});

Answer 3

我遇到了同样的问题，最终创建了一个名为“ server_ordered_select ”的自定义输入类型。要使用它，您需要做一些事情：

更改服务器响应以返回对象数组。每个对象只有一个id和label的键值对。例如，
```
"[{'197':'Sterling'}, {'199':'US Dollar'}, {'185':'Canadian Dollar'}, {'200':'Yen'}]"
```

在jEditable init代码之前的某处添加以下内容：

$.editable.addInputType('server_ordered_select', {
    element : function(settings, original) {
        var select = $('<select />');
        $(this).append(select);
        return(select);
    },
    content : function(data, settings, original) {
        /* If it is string assume it is json. */
        if (String == data.constructor) {
            eval ('var json = ' + data);
        } else {
            /* Otherwise assume it is a hash already. */
            var json = data;
        }
        var isArray = Object.prototype.toString.call(json) === '[object Array]',
            selected = "";
        for (var key in json) {
            var k, v;
            if (isArray) {
                k = Object.keys(json[key])[0];
                v = json[key][k];
                if ('selected' == k) {
                    selected = v;
                    continue;
                }
            } else {
                if (!json.hasOwnProperty(key)) {
                    continue;
                }
                if ('selected' == key) {
                    selected = json['selected'];
                    continue;
                }
                k = key;
                v = json[key];
            }
            var option = $('<option />').val(k).append(v);
            $('select', this).append(option);
        }
        /* Loop option again to set selected. IE needed this... */
        $('select', this).children().each(function() {
            if ($(this).val() == selected ||
                $(this).text() == $.trim(original.revert)) {
                $(this).attr('selected', 'selected');
            }
        });
    }
});

现在，在可编辑的初始化选项中将可编辑的类型更改为“ server_ordered_select ”。

$('tr',this).find('td:eq(8)').css('cursor','pointer')
.editable( 'update.php', {
    'type': "server_ordered_select",
    'loadurl': 'json.php',
    'onblur': 'submit',
    'callback': function( value, settings ) {
        // etc.
    });

输入类型也应该与'select'类型的常规json响应兼容，但是它不会保持来自服务器的顺序。

Answer 4

即将实施上述解决方案之一，当我注意到如果您可以调整生成的JSON时，X-Editable现在支持以下内容：

列表的来源数据。如果是数组 - 它应该是格式：

[{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]

--- 8＆LT; ---

由于1.4.1关键子节点支持渲染OPTGROUP（仅适用于选择输入）。

[{text: "group1", children: [{value: 1, text: "text1"}, {value: 2, text: "text2"}]}, ...]

来源：https://vitalets.github.io/x-editable/docs.html

jEditable select下拉菜单更改选项的顺序

4 个答案:

原因

修复

插件