如何使用Jquery Sortable將選中的複選框排序到頂端？

我正在使用Jquery Sortable來允許用戶對幾個表格行進行排序。如何使用Jquery Sortable將選中的複選框排序到頂端？

我需要做的是當用戶選中一個複選框時，它將被排序到頂端。

基本檢查的項目轉到最上面，未檢查的項目轉到最下面。

我在這裏包含了一個jfiddle鏈接到工作代碼。任何人接受挑戰？

下面是HTML：

<table border="1" cellpadding="5" cellspacing="2" id="sort"> 
<thead> 
    <tr> 
     <td>active</td> 
     <td>title</td> 
     <td>order</td> 
    </tr> 
</thead> 
<tbody> 
    <tr id="1"> 
     <td><input type="checkbox" id="active_1" checked="checked"/></td> 
     <td>First Item</td> 
     <td><input type="text" id="order_1" value="1"/></td> 
    </tr> 
    <tr id="2"> 
     <td><input type="checkbox" id="active_2" /></td> 
     <td>Second Item</td> 
     <td><input type="text" id="order_2" value="2"/></td> 
    </tr> 
    <tr id="3"> 
     <td><input type="checkbox" id="active_3" /></td> 
     <td>Third Item</td> 
     <td><input type="text" id="order_3" value="3"/></td> 
    </tr> 
</tbody>

這是調用Jquery的可排序的JavaScript：

//Call the sortable jquery on the table 
$("#sort tbody").sortable({ 
    helper: fixHelperModified 
}).disableSelection();

來源

2013-08-20 mr_jp

有兩種方法，你可以處理這個：

1：MVVM

現在，你有簡單的DOM對象 - 多行和列的表。

爲了使其正確，平穩和可靠地工作，您需要從表示中分離出數據。這意味着，您需要創建一個javascript對象數組來存儲數據，然後使用「render」方法動態創建表。

每當數據發生變化時（無論數據是通過拖動可排序還是通過單擊複選框來更改），都需要重新呈現表以顯示新的排序順序。

有幾個庫，幫助你做到這一點（骨幹，恩貝爾，淘汰賽等）

2：醜陋的混亂

如果你選擇了硬編碼，那麼你就需要使用jQuery編寫一個醜陋的算法將該項目推送到非複選框項目的頂部。

該算法將是這個樣子：

查找當前父<TR>
```
var currTR = $(this).closest("tr"); 
```

在一個循環中，進入前一個項目時，直到你找到一個有選中狀態的複選框

var prevTR = currTR.prev(); 
var insertTR = currTR; 
while(prevTR !== null) { 
    if ($(prevTR).find("input:checked").length > 0) { 
     break; 
    } 
    insertTR = currTR; 
    prevTR = prevTR.prev(); 
}

（來自第一步驟）刪除當前<TR>
```
$(currTR).remove(); 
```
插入當前<TR>從第二步驟找到的最後一個項目的上方（上面的insertTR

注：這幾乎都是僞代碼 - 一點也不保證可以工作！

另外，如果沒有其他項目被選中或者當前行已經在列表頂部或未選中項目的頂部，您需要保護自己。

個人而言，我建議現在作爲一個完美的時間遷移到JavaScript框架。

來源

2013-08-20 17:38:00 Richard

實際上，這些項目已經從PHP動態生成。像order1，order2 ..等這將如何與JavaScript框架和jQuery結合使用？我不得不說，這個解決方案似乎很有趣。 –

JavaScript框架將在中間。在頁面加載時，它會提取數據並顯示它。您的PHP不是直接生成HTML，而是生成前端的數據。鏈接：[在PHP中使用Knockout.js]（http://www.softfinity.com/blog/using-knockout-js-with-php-best-practices/）。另外，[KnockoutJS介紹]（http://learn.knockoutjs.com/）。（我隨機選擇了KO，我自己使用Backbone。）最終，它是關於從表示中分離數據的。它使生活更容易10倍。 – Richard

如何使用Jquery Sortable將選中的複選框排序到頂端？

回答

相關問題