web-dev-qa-db-ja.com

クライアント側でのjqGridの並べ替え

行を自動ロードするツリーグリッドがあります。目標は、グリッドをツリー列で並べ替えることです。クライアント側です。

しかし、並べ替え列ヘッダーをクリックするたびに、並べ替えのためのAjax呼び出しが発行されますが、必要なのはローカルデータを使用したオンプレース並べ替えだけです。

グリッドパラメータが正しくないか、ツリーがツリー列のクライアント側の並べ替えで機能しませんか？

ソート用の現在のjqGridパラメータは次のとおりです。

loadonce: true, // to enable sorting on client side
sortable: true //to enable sorting
javascriptjqueryajaxsortingjqgrid
11
AlexA

クライアント側の並べ替えを機能させるには、グリッドが読み込まれた後にreloadGridを呼び出す必要がありました。

loadComplete: function() {
    jQuery("#myGridID").trigger("reloadGrid"); // Call to fix client-side sorting
}

グリッドによって直接取得されたデータの代わりに、別のAJAX呼び出しを介して取得されたデータを使用するように構成されているため、アプリケーションの別のグリッドでこれを行う必要はありませんでした。

editurl: "clientArray"
datatype: "local"
6
Justin Ethier

JqGridでクライアント側の並べ替えを使用しており、選択リストが変更されたときにjsonデータの新しいセットを取得しています。 rowTotalを返される行数以上に設定してから、グリッドをリロードする直前にデータ型を「json」に設定する必要があります。

// Select list value changed
$('#alertType').change(function () {
        var val = $('#alertType').val();
        var newurl = '/Data/GetGridData/' + val;
        $("#list").jqGrid().setGridParam({ url: newurl, datatype: 'json' }).trigger("reloadGrid");        
});

// jqGrid setup
$(function () {
        $("#list").jqGrid({
            url: '/Data/GetGridData/-1',
            datatype: 'json',
            rowTotal: 2000,
            autowidth: true,
            height:'500px',
            mtype: 'GET',
            loadonce: true,
            sortable:true,
            ...
            viewrecords: true,
            caption: 'Overview',
            jsonReader : { 
                root: "rows", 
                total: "total", 
                repeatitems: false, 
                id: "0"
            },
            loadtext: "Loading data...",
        });
    });
2
Stuntbeaver
$(function () {
        $("#list").jqGrid({
            url: '/Data/GetGridData/-1',
            datatype: 'json',
            rowTotal: 2000,
            autowidth: true,
            height:'500px',
            mtype: 'GET',
            loadonce: true,
            sortable:true,
            ...
            viewrecords: true,
            caption: 'Overview',
            jsonReader : { 
                root: "rows", 
                total: "total", 
                repeatitems: false, 
                id: "0"
            },
            loadtext: "Loading data...",
        });
    });
1
ytkim