伴隨排序的方法

這個標題也可以取名為綑綁排序/同步排序/關聯排序 (Associate Sorting). 會記下來是因為想了好久才想到這辦法, 怕以後會用到. 起因是在開發 myASP 的應用程式產生器的顯示表單功能時, 要讓操作者指定欄位顯示的前後關係, 那麼傳回伺服器之前, 欄位名稱, 欄位標題也要伴隨所指定之欄位順序重新排列, 這樣程式碼產生器就可以根據已排好之順序產生顯示指定欄位之表格了.

關鍵是在下面黃色部份, 把順序與索引用 "-" 串起來, 一個一個放進陣列, 再利用 JS 的 sort 函數排序, 因為順序在前, 所以排序時會以順序為準, 後面的索引就跟著同步排序了.

注意 : 這裡為求簡化, 排序對象為字串, 因此 0, 2, 10 排序後變成 0, 10, 2 而非所要的 0,2,10. 解決辦法是在串順序-索引前將順序補固定位數 0, 例如順序 1 變成 001, 而 10 變成 010, 位數一樣的字串排序結果才會正確.

元件結構如下 :

欄位名稱

<input type="checkbox" name="fields" value="a"> a

<input type="checkbox" name="fields" value="b"> b

<input type="checkbox" name="fields" value="c"> c

<input type="checkbox" name="fields" value="d"> d

<input type="checkbox" name="fields" value="e"> e

欄位標題

<input type="text" name="field_label_1" value="欄位標題1">

<input type="text" name="field_label_2" value="欄位標題2">

<input type="text" name="field_label_3" value="欄位標題3">

<input type="text" name="field_label_4" value="欄位標題4">

<input type="text" name="field_label_5" value="欄位標題5">

顯示順序

<input type="text" name="field_sequence_1" value="1">

<input type="text" name="field_sequence_2" value="2">

<input type="text" name="field_sequence_3" value="3">

<input type="text" name="field_sequence_4" value="4">

<input type="text" name="field_sequence_5" value="5">

隱藏欄位

<input type="hidden" name="selected_fields_name" value="">

<input type="hidden" name="selected_fields_label" value="">

JavaScript 演算法如下 :

var obj=formObj.fields;

var selected_fields_index=new Array();

var selected_fields_name=new Array();

var selected_fields_label=new Array();

for (var i=0; i<obj.length; i++) {

    if (obj[i].checked) {

       var field_label=eval("document.select_fields.field_label_" + i);

       var field_sequence=eval("document.select_fields.field_sequence_" + i);

       var idx_mix=field_sequence.value + "-" + i;

       selected_fields_index.push(idx_mix);
       }

    }

selected_fields_index.sort(); //順序排序
for (var i=0; i<selected_fields_index.length; i++) {

    var idx=selected_fields_index[i].split("-"); //把混合索引拆開

    selected_fields_name.push(obj[idx[1]].value); //[0]存順序,[1]存索引

    //利用[1]索引取得對應之 field_label 元件

    var field_label=eval("document.select_fields.field_label_" + idx[1]);

    selected_fields_label.push(field_label.value);

    }