原因
問題の根本は 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 プロパティをループする必要があります。代わりに、数値 (「アルファベット」) 順にループされます。
修正
これを解決するには多くの方法がありますが、最も簡単なのは、匿名で作成された jEditable プラグインを使用することです。このプラグインは、Google 検索で Pastebin で見つけました。これを新しい JavaScript ファイルに貼り付け、 jEditableの後に HTML ファイルにロードします。
<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ん。
プラグイン
Pastebin で見つけた完全な jEditable プラグインは次のとおりです。
// 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');
}
});
}
});