原因
问题的根源不在于 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');
}
});
}
});