4

ma アプリケーションで Jqgrid ツリー ビュー モデルを使用していますが、オブジェクトまたはプロパティがサポートされていないためエラーが表示されることがわかります。grid.Treeview.js およびその他の Jqgrid スクリプト ファイルが含まれています。何が問題になるかわかりません。そして、隣接ツリービューについてネットでサンプルアプリケーションをチェックしたとき、同じことを試しましたが、取得できなかったローカルデータを使用してasp.netで試しました。同じことをする方法を教えてください。前もって感謝します

これは私が使用しているサンプルコードであり、それが機能するかどうかはわかりません。

var myTreeGrid = new Ext.us.tree.TreeGrid({
    columns: columnsConfig,
    rootVisible: false,
    root: rootNode,
    loader: new Ext.ux.tree.TreeGridLoader({preloadChildren: true})
});
var rootNode = $('#treegridsamp').jqgrid({
    treeGrid: true,
    treeGridModel: 'adjacecncy',
    ExpandColumn: 'name',
    datatype: "local",
    mtype: 'Get',
    colNames: ['id','Name','MenuId','Menu Name'],
    colModel: [
        {name:'RowId',index:'RowId',width:300,fixed:true},
        {name:'Name',index:'Name',width:300,fixed:true},
        {name:'MenuId',index:'MenuId',width:300,fixed:true},
        {name:'MenuName',index:'MenuName',width:300,fixed:true},
    ],
    root:[
        {id:"1",Name:"Main Menu", MenuId:"1",MenuName:"Menu1"},
        {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2"},
        {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3"}
    ],
    pager: '#dvtreegridsamp',
    Caption: 'Sample Tree View Model'
})
$("#treegridsamp").jqGrid('navGrid', '#dvtreegridsamp',
    { edit: false, add: false, del: false, search: false, refresh: false });
var mydata=[
    {id:"1",    Name:"Main Menu",   MenuId:"1",MenuName:"Menu1"},
    {id:"2",    Name:"Main Menu1",  MenuId:"2",MenuName:"Menu2"},
    {id:"3",    Name:"Main Menu2",  MenuId:"3",MenuName:"Menu3"},
    {id:"1.1",  Name:"Sub Menu",    MenuId:"1",MenuName:"Menu1"},
    {id:"1.2",  Name:"Sub Menu1",   MenuId:"1",MenuName:"Menu1"},
    {id:"1.1.1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1"},
    {id:"2.1",  Name:"Main Menu",   MenuId:"2",MenuName:"Menu2"},
    {id:"2.2",  Name:"Main Menu",   MenuId:"2",MenuName:"Menu2"},
    {id:"3.1",  Name:"Main Menu",   MenuId:"3",MenuName:"Menu3"},
    {id:"3.2",  Name:"Main Menu",   MenuId:"3",MenuName:"Menu3"},
];
for(var i=0;i<mydata.length;i++) {
    $("#treegridsamp").jqGrid('addRowData',i+1,mydata[i]);
}
4

1 に答える 1

12

小さな単純なエラーをコーディングしますが、主な問題は、コードがツリー ノードではなく単純な行を追加するように作成されていることです。公式のデモ ページに移動し、 「バージョン 3.4 の新機能」の下でデモ「ツリー グリッド隣接モデル」を選択できます。

trirandデモ ページのデモのデモとまったく同じように動作するデモを作成しましたが、ローカルデータのみを使用します。

ここに画像の説明を入力

あなたの場合、プロパティ、、、、からオブジェクトを拡張する必要mydataがlevelあります。parentisLeafexpanded

var mydata = [
    {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
     level:"0", parent:"", isLeaf:false, expanded:false},
    {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
     level:"1", parent:"1", isLeaf:false, expanded:false},
    {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
     level:"2", parent:"1_1", isLeaf:true, expanded:false},
    {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
     level:"1", parent:"1", isLeaf:true, expanded:false},
    {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
     level:"0", parent:"", isLeaf:false, expanded:true},
    {id:"2_1",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
     level:"1", parent:"2", isLeaf:true, expanded:false},
    {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
     level:"1", parent:"2", isLeaf:true, expanded:false},
    {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
     level:"0", parent:"", isLeaf:false, expanded:false},
    {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
     level:"1", parent:"3", isLeaf:true, expanded:false},
    {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
     level:"1", parent:"3", isLeaf:true, expanded:false}
];

ポイントは ID で使用されるべきではないため、ここで ID 値を少し変更しました。さらに、ロード直後に一部のノードを自動的に展開できることのみを示すexpandedために、「メイン メニュー 1」のステータスをに設定します。true

jqGrid 定義を次のように変更しました

$("#treegridsamp").jqGrid({
    datatype: "local",
    data: mydata, // will not used at the loading,
                  // but during expanding/collapsing the nodes
    colNames:['id','Name','MenuId','Menu Name'],
    colModel:[
        {name:'id',index:'id',width:100,hidden:true},
        {name:'Name',index:'Name',width:150},
        {name:'MenuId',index:'MenuId',width:100},
        {name:'MenuName',index:'MenuName',width:100}
    ],
    height:'auto',
    //pager : "#ptreegrid",
    sortname: 'id',
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "local",
    ExpandColumn: 'Name',
    caption: "Sample Tree View Model"
});

「id」列を非表示にし、グリッド サイズを小さくしました。addJSONDataツリーノードを設定するため、メソッドを使用してデータを追加するには

$("#treegridsamp")[0].addJSONData({
    total: 1,
    page: 1,
    records: mydata.length,
    rows: mydata
});

受け取る結果として、

ここに画像の説明を入力

ここでデモをライブで見ることができます。

更新: jqGridバージョン 4.0 以降を使用する場合loaded:true、展開したい場合はツリー ノードのプロパティを設定することが重要です。たとえば、上記の例では、「Main Menu1」アイテムはノード ( isLeaf:false) であり、展開して表示 ( ) する必要があるため、アイテム定義に次のexpanded:trueように追加する必要があります。loaded:true

{id:"2", Name:"Main Menu1", MenuId:"2", MenuName:"Menu2",
 level:"0", parent:"", isLeaf:false, expanded:true, loaded:true}

その他の例については、こちら、こちら、こちら、こちらをご覧ください。

UPDATED 2 : ソートを正しく機能させるには、詳細についてはこちらを参照する代わりにparent:nullorparent:"null"parent:""を使用する必要があります。

于 2011-03-16T23:49:20.610 に答える