jQuery + dataTables + rowGrouping を使用して、特定の列の値によって行がグループ化されたテーブルをレンダリングしています。rowGrouping 機能を適用する前は、次のようになります。
Task | Status | Buttons
-------------------------------------
Test something | Stopped | Start
Eat cake | Started | Stop
Take a break | Stopped | Start
そしてrowGroupingの後:
Task | Buttons
-------------------------------------
STARTED
Eat cake | Stop
-------------------------------------
STOPPED
Take a break | Start
Test something | Start
(ステータス列は非表示になり、値は STARTED/STOPPED グループ化行を作成するために使用されます - これまでのところとても良いです)。
dataTable を初期化するコードは次のとおりです。
var dataTable = $("#table")
.dataTable({
'bLengthChange': false,
'bPaginate': false,
'sScrollX': "100%",
'bScrollCollapse': true,
})
.rowGrouping({
'bExpandableGrouping': true,
'sGroupingColumnSortDirection': 'asc',
'iGroupingColumnIndex': 1,
'iGroupingOrderByColumnIndex': 0
});
私の問題は、onclick ハンドラーをボタンにアタッチしたいということです。[開始] ボタンをクリックすると、そのタスクのステータスが [開始済み] に変更され、タスクが [開始済み] グループに移動する必要があります。
しかし、私はこれを達成する方法を理解できません:(
私の最初のアイデアは、テーブル オブジェクトで .rowGrouping() を再度呼び出すことでしたが、それは許可されていません。また、fnUpdate() などの API 関数を使用して、クリックされたボタンを含む行のステータス セルを更新しようとしましたが、惨めに失敗しました。
このページの最後のセクションで、行を別のグループに移動する方法のヒントを見つけました。
http://code.google.com/p/jquery-datatables-row-reordering/wiki/RowGrouping
しかし、私はそれを機能させるために一日中費やしましたが、それを理解することはできません.
助けてください :)