jQuery Grid Plugin - jqGrid

Hello,

after many search to load a treegrid with JSON and XML data, I would be share this code.

All two samples working fine with local data.

Sample 1 : Treegrid with JSON data

$(document).ready(function(){
    jQuery("#treegrid2").jqGrid({
        treeGrid: true,
        treeGridModel: 'adjacency',
        ExpandColumn: 'menu',
        ExpandColClick: true,
        url: 'tree.json',
        datatype: 'json',
        colNames: ["menu", "url"],
        colModel: [{
            name: 'menu',
            index: 'menu',
            width: 220,
            hidden: false,
            sortable: false
        }, {
            name: 'url',
            width: 1,
            hidden: true
        }],
        height: 600,
        width: 200,
        pager: false,
        viewrecords: true,
        imgpath: '../js/themes/basic/images',
        caption: '',
    })
});
		

Sample 1: JSON data (tree.json)

{
        total:1,
        page:1,
        records:6,
        rows:[
            {
			id: 1,
                cell:[
                    'Tabelle',
                    '1a2',
                    0,
                    null,
                    false,
                    false
                ]
            },
            {
			id: 2,
                cell:[
                    'Gestione Strutture',
                    '2a2',
                    0,
                    1,
                    true,
                    false
                ]
            },
            {
			id: 3,
                cell:[
                    'Gestione Centri',
                    '3a2',
                    0,
                    1,
                    true,
                    false
                ]
            },
            {
			id: 4,
                cell:[
                    'Cedolino online',
                    '1b2',
                    0,
                    null,
                    false,
                    false
                ]
            },
            {
			id: 5,
                cell:[
                    'Visibilita',
                    '2b2',
                    0,
                    4,
                    true,
                    false
                ]
            },
            {
			id: 6,
                cell:[
                    'Cambio mese',
                    '3b2',
                    0,
                    4,
                    true,
                    false
                ]
            }
        ]
}        	
		

Sample 2: Treegrid with XML data

$(document).ready(function(){
    jQuery("#treegrid2").jqGrid({
        treeGrid: true,
        treeGridModel: 'adjacency',
        ExpandColumn: 'menu',
		ExpandColClick : true,
        url: 'tree2.xml',
        datatype: 'xml',
        mtype: 'GET',
        colNames: ["id", "menu", "aaa"],
        colModel: [{
            name: 'id',
            index: 'id',
            width: 1,
            hidden: true,
            key: true
        }, {
            name: 'menu',
            index: 'menu',
            width: 120,
			hidden: false,
            sortable: false
        }, {
            name: 'aaa',
            width: 1,
            hidden: true
        }],
        height: 600,
        width: 200,
        pager: false,
        imgpath: '../js/themes/basic/images',
        caption: '',
    })
});
		

Sample 2: XML data (tree2.xml)
<?xml version='1.0' encoding='utf-8'?> <rows> <page>1</page> <total>1</total> <records>6</records> <row> <cell>1</cell> # row id <cell>Tabelle</cell> # expanding column <cell>1a2</cell> # column 2 <cell>0</cell> # node level 0 <cell>NULL</cell> # parent row id <cell>false</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>2</cell> # row id <cell>Gestione Strutture</cell> # expanding col <cell>2a2</cell> # column 2 <cell>0</cell> # node level 1 <cell>1</cell> # parent row id <cell>true</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>3</cell> # row id <cell>Gestione centri</cell> # expanding col <cell>3a2</cell> # column 2 <cell>0</cell> # node level 1 <cell>1</cell> # parent row id <cell>true</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>4</cell> # row id <cell>Cedolino online</cell> # expanding column <cell>1b2</cell> # column 2 <cell>0</cell> # node level 0 <cell>NULL</cell> # parent row id <cell>false</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>5</cell> # row id <cell>Visibilita</cell> # expanding col <cell>2b2</cell> # column 2 <cell>0</cell> # node level 1 <cell>4</cell> # parent row id <cell>true</cell> # is this a leaf? <cell>false</cell> # expand? </row> <row> <cell>6</cell> # row id <cell>Cambio mese</cell> # expanding col <cell>3b2</cell> # column 2 <cell>0</cell> # node level 1 <cell>4</cell> # parent row id <cell>true</cell> # is this a leaf? <cell>false</cell> # expand? </row> </rows>

Enjoy with Treegrid !

Tony, thanks for your work.

Regards

Claudio