jqgrid treegridで一部の行が選択されている場合、他のすべての行は折りたたまれていますが、引き続き表示されます。それらを隠す方法。
たとえば、ツリー構造が
Category1
Subcategory11
Subcategory12
...
Category2
Subcategory21
Subcategory22
...
Category3
Subcategory31
Subcategory32
...
最初は、jqgridで折りたたまれた形式で表示されます
Toggle view
Category1
Category2
Category3
ユーザーはクリックしてノードを開くことができます。この場合(たとえば、Category2をクリック)、このカテゴリとそのサブカテゴリのみが表示されるように、他のカテゴリを画面から削除する必要があります。
Toggle view
Category2
Subcategory21
Subcategory22
Toggle view
リンクは、単一のカテゴリビューとカテゴリリストビューを切り替える必要があります。最初にクリックすると、折りたたまれたカテゴリリストが再び表示されます。その後、Toggle show all categories
もう一度クリックすると、上のスクリーンショットのように最後に開いたカテゴリのみが表示されます。
これを実装する方法は?
ツリーグリッドは次のように定義されます
var treegrid = $("#tree-grid");
treegrid.jqGrid({
loadComplete: function (data) {
$('.tree-leaf', $(this)).css('width', '0px');
},
url: '/Store/GridData',
datatype: "json",
mtype: "POST",
height: "auto",
loadui: "disable",
treeGridModel: "adjacency",
colModel: [
{ name: "id", width: 1, hidden: true, key: true },
{ name: "menu", classes: "treegrid-column", label: "Tootepuu" },
{ name: "url", width: 1, hidden: true }
],
gridview: true,
autowidth: true,
treeGrid: true,
ExpandColumn: "menu",
rowNum: 2000,
ExpandColClick: true,
onSelectRow: function (rowid) {
var treedata = treegrid.jqGrid('getRowData', rowid);
window.location = treedata.url;
}
}
);
treegrid.parents("div.ui-jqgrid-view").children("div.ui-jqgrid-hdiv").hide();
現在、メインのカテゴリリストは表示されたままになります。
Category1
Category2
Subcategory21
Subcategory22
Category3
このためにjqgridをカスタマイズする方法は?または、他のツリープラグインまたはASP.NET MVC2コントロールをこれに使用できますか?