jqgrid bootstrap
Jqgrid Tree View Adjacencey (1)
Codifica pequeños errores simples, pero el problema principal que tiene es que su código está hecho para agregar filas simples y no nodos de árbol. Puede ir a la página de demostración oficial y elegir en "Nuevo en la versión 3.4" la demostración "Modelo de adyacencia de cuadrícula de árbol".
Escribí la demostración que funciona exactamente como la demo de la demo de la página de trirand demo, pero usa solo datos locales :
En su caso, debe ampliar los objetos de mydata con el level propiedades, parent , isLeaf , expanded :
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}
];
Aquí modifiqué un poco los valores de identificación, porque los puntos no deberían usarse en los identificadores. Además establezco el estado expanded del "Menú principal1" en true para demostrar solo que puede expandir algunos nodos inmediatamente después de la carga.
Modifiqué la definición de jqGrid a lo siguiente
$("#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"
});
Hice la columna ''id'' oculta y reduje el tamaño de la cuadrícula. Para agregar los datos, addJSONData método addJSONData porque establecerá los nodos del árbol
$("#treegridsamp")[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
Como resultado, recibirás
Puedes ver la demo en vivo aquí .
ACTUALIZADO : Si usa jqGrid versión 4.0 o superior, es importante establecer la propiedad loaded:true para los nodos de árbol si desea expandir. Por ejemplo, en el ejemplo anterior, el elemento "Menú principal1" es un nodo ( isLeaf:false ) que se debe mostrar expandido ( expanded:true ), por lo que se debe agregar loaded:true para la definición del elemento:
{id:"2", Name:"Main Menu1", MenuId:"2", MenuName:"Menu2",
level:"0", parent:"", isLeaf:false, expanded:true, loaded:true}
Para ver más ejemplos, vea aquí , aquí , aquí y aquí .
ACTUALIZADO 2 : Para que la ordenación funcione correctamente, uno tiene que usar parent:null o parent:"null" lugar de parent:"" ver aquí para más detalles.
Estoy usando el modelo Jqgrid Tree View en la aplicación ma y lo que puedo ver es que muestra un error porque no se admite el objeto o la propiedad, he incluido grid.Treeview.js y otro archivo de script Jqgrid. No sé cuál puede ser el problema. Y cuando revisé la aplicación de muestra en la red para la vista de árbol de adyacencia e intenté lo mismo, pero en asp.net con datos locales que no obtuve. ¿Alguien puede ayudarme a hacer lo mismo? Gracias por adelantado
Este es el código de muestra que estoy usando y más no sé si funcionará o no.
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]);
}