JQgridを使用してデータベースからのデータを表示するDjangoプロジェクトに取り組んでいます。
私が達成しようとしているのは、サーバーが結果セットを返すリモート検索を実行するための検索オプションと、クライアント側で実行される列の並べ替え、ページ付けなどの他のすべてのjqgridオプションのみを配線することです。
これは、 [並べ替え]または[次のページ]、[検索]などをクリックするかどうかに応じて、イベント間およびイベントに基づいてパラメーターを設定loadonce:trueおよび切り替えることで実行できることを知っています。'datatype''local''json'.click()
これを行う別の方法はありますか？そうでない場合は、上記のハックを行うためのクリーンな方法を提案できますか。
ありがとう！
私はなんとかこれを成し遂げることができました、そして私はあなた方全員とこれを共有することをうれしく思います。参考までに、説明の下にjqgridコード全体を掲載しました。
そのため、最初に、結果にJSONを使用するため、jsonReaderを使用します。
次に、{{search：remote}、{sorting：local}、{pagination：local}}の動作を実現するための固有の設定を次に示します。
設定loadonce: falseするか、[検索]ボタンを押すと、サーバーはヒットせず、代わりに常にローカル検索が実行されます。
jqGridの複数検索機能を実装して、ページャーバーに小さな「倍率ガラス」を表示したかったのです。
jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{},{multipleSearch:true});
ここで、リモート検索機能を実現する方法は、onSearchおよびonCloseイベントでデータ型をローカルからjsonに切り替えることです。つまり、検索クエリを実行するとき（つまり、[検索]ボタンをクリックするとき）、loadonceをfalseに設定し、データ型をjsonに設定します。これにより、リモート検索が保証されます。グリッドにremote-searched-dataが入力されたので、datatype：localに戻す必要がありますが、明示的にonCloseを設定しても機能しないため、代わりにloadonce：trueを設定します。これにより、後でdatatype：local自体が設定されます。また、closeAfterSearch：true、closeOnEscape：trueがあることに注意してください。これにより、検索クエリを実行した後、onCloseイベントが常に閉じられるようになります。
jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true,
onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'});
$("#list2").trigger("reloadGrid");
}, onClose: function(){$("#list2").trigger("reloadGrid");
$("#list2").setGridParam({loadonce: true});
$(".ui-icon-refresh").trigger('click');
}
});
$(".ui-icon-refresh").trigger('click');結果を読み込んだ後、強制的に更新します。これは場合によっては必要でした（理由はわかりません）。私は自分でこの修正に遭遇したばかりで、なぜそれが機能するのかわかりません。アイデアがあれば、その理由を知りたいです。
最後に、グリッドが読み込まれるたびに、デフォルトで検索ボックスが表示されます。そこで、jqueryにモーダルボックスの「x」ボタンをクリックさせるだけで、強制的に閉じました。ハッキーですが動作します！：P
$(".ui-icon-closethick").trigger('click');
<<<jqGridコード全体>>>
コード内の「xyz」について失礼します。そこにいくつかのDjangoコードがあったので、混乱を避けるためにxyzに置き換えました。
jQuery(document).ready(function(){
$("#list2").jqGrid({
url:'xyz',
datatype: 'json',
loadonce: false,
mtype: 'GET',
colNames:xyz
colModel :xyz,
jsonReader : {
repeatitems: false,
root: "rows",
page: "page",
total: "total",
records: "records"
},
height: '100%',
width: '100%',
pager: '#pager2',
rowNum:15,
rowList:[10,15,30],
viewrecords: true,
caption: ' ',
autowidth: false,
shrinkToFit: true,
ignoreCase:true,
gridview: true
});
jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{}, {multipleSearch:true});
jQuery("#list2").jqGrid('navButtonAdd', '#pager2',
{
caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
jQuery("#list2").jqGrid('columnChooser');
}
});
jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true,
onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'});
$("#list2").trigger("reloadGrid");
},
onClose: function(){$("#list2").trigger("reloadGrid");
$("#list2").setGridParam({loadonce: true});
$(".ui-icon-refresh").trigger('click');
}
});
$(window).bind('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeGrids, 60);
divwidth = $(".content-box-header").width() - 40;
//alert(divwidth);
$("#list2").setGridWidth(divwidth,true);
});
$(window).resize();
$(".ui-icon-closethick").trigger('click');
});
以下のコードを見ると、ツールバーの2つの日付の間で検索を行っています。「e」は、使用しているコントロールのIDです。ここで重要な要素は「search」と呼ばれるプロパティです。これを「true」に設定すると、クライアント検索が実行され、falseは、検索で呼び出すajaxメソッドに対してリモート検索を実行します。
var gridFilter;
var fieldId = e.replace('#', '');
var fieldForFilter = fieldId.replace('gs_', '');//All toolbar filters Id's are the same as the column Id but prefixed with "gs_"
var splitteddates = $("#" +fieldId).val().split('-');
var grid = $("#GridJq1");
gridFilter = { groupOp: "AND", rules: [] };
gridFilter.rules.push({ field: "" + fieldForFilter + "", op: "gt", data: "" + $.trim(splitteddates[0]) + "" });
gridFilter.rules.push({ field: "" + fieldForFilter + "", op: "lt", data: "" + $.trim(splitteddates[1]) + "" });
grid[0].p.search = true;//specifies wether to do a client search or a server search which will be done manually. true=client search
$.extend(grid[0].p.postData, { filters: JSON.stringify(gridFilter) });//combine post data and newly added filter data
grid.trigger("reloadGrid", [{ page: 1, current: true}]);//reset to page and keep current selection if any
私が正しく思い出せば、検索を構築するための上記のコードの一部は、有名なJQGrid Olegからの回答からのものであるため、これが彼のコードの一部であった場合は彼に称賛を送ります。