0

以下のようにMVCWebGridを含む部分ビューがあります

 <div id="grid">
            @{
                var grid = new WebGrid(source: Model.Items,
                                       defaultSort: "Name", 
                                       rowsPerPage: 100);


            }
            @grid.GetHtml(columns: grid.Columns(
                        grid.Column(columnName: "Name", header: "Name", canSort:true),
                        grid.Column(columnName: "Code", header: "Code")
                    ))
            </div>

この部分ビューはJqueryajax呼び出しを使用してロードされ、結果はメインページのDIVに挿入されます。

テーブルは正常にレンダリングされますが、私の問題は、並べ替えによって常にサーバーへのコールバックが生成されることです。並べ替えはクライアント側でのみ実行する必要があります。jQueryデータテーブルのような外部データテーブルを使用せずにWebGridを使用することは可能ですか？

前もって感謝します

4

2 に答える 2

2

ロードされたテーブルに従って、自分でCline-SideSortingを実装する必要があります。こちらをご覧ください...

注！：html属性を使用してWebGridにタグを付けることで、いつでもより一般的にすることができます。テーブルに「data-clineSideSort=true」のタグを付けてから、このプロパティを保持するすべてのテーブルにJS機能をアタッチするjqueryイベントを追加します。

 function SortTable(sortOn)
 {
     var table = document.getElementById('results');
     var tbody = table.getElementsByTagName('tbody')[0];
     var rows = tbody.getElementsByTagName('tr');

     var rowArray = new Array();
     for (var i = 0, length = rows.length; i < length; i++)
     {
         rowArray[i] = new Object;
         rowArray[i].oldIndex = i;
         rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;
     }

     if (sortOn == sortedOn)         {
         rowArray.reverse();
     }
     else         {
         sortedOn = sortOn;
         /*
    Decide which function to use from the three:RowCompareNumbers,
    RowCompareDollars or RowCompare (default).
    For first column, I needed numeric comparison.
    */
         if (sortedOn == 0)             {
             rowArray.sort(RowCompareNumbers);
         }
         else             {
             rowArray.sort(RowCompare);
         }
     }

     var newTbody = document.createElement('tbody');
     for (var i = 0, length = rowArray.length; i < length; i++)
     {
         newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));
     }

     table.replaceChild(newTbody, tbody);
 }

 function RowCompare(a, b)
 {
     var aVal = a.value;
     var bVal = b.value;
     return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
 }

 // Compare number
 function RowCompareNumbers(a, b)
 {
     var aVal = parseInt(a.value);
     var bVal = parseInt(b.value);
     return (aVal - bVal);
 }

 // compare currency
 function RowCompareDollars(a, b)
 {
     var aVal = parseFloat(a.value.substr(1));
     var bVal = parseFloat(b.value.substr(1));
     return (aVal - bVal);
 }
于 2013-01-31T03:56:14.087 に答える
2

jQueryTablesorterをご覧ください。これは、整形式のテーブル（つまり、has theadとtbodyelements）に適用できます。ここで考えられる唯一の落とし穴は、ajax呼び出しでデータがロードされたら、テーブルソーターをバインドすることです。

于 2013-01-31T05:04:49.097 に答える