ligerGrid切换数据

1、切换数据的使用方法

   在项目前期，我们需要将用户的需求以系统界面的方式呈现，因此就存在对DEMO的制作。

首先通过如下语句可以在界面上进行表格展示

/*******************************************************************************

 * 表格初始化

 ******************************************************************************/

$(function(){

if(!Empty($("#"+tablecode))){

grid=$("#"+tablecode).ligerGrid({

columns:columns,

pageSizeOptions:[5,10,15,20,30,50],

//                  url:contxtpath+tablemodel+'/datalist.action',

root:'resultlist',// 数据源字段名

record:'rowcount',

toolbar:{

id:'toolbarbtn'

},//后面添加工具条

usePager:true,

data:gobj_functemp,

pageSize:pagesize,

//                  dataAction:'server',

rownumbers:true,

rownumbersColWidth:30,

width:'100%',

height:'100%',

heightDiff:-8,// 补高度差

onError:showerror

});

//                grid.set({data:gobj_functemp});//设置数据的另一种方式

manager=$("#"+tablecode).ligerGetGridManager();

}

 

})

 

需求：通过点击树上不同的节点，显示不同的数据。

  方法：利用ligerUI中的Grid方法，grid.set({data:gobj_functemp_A1});

 gobj_functemp_A1表示的是数据源

 

function zTreeOnClick(treeId) {

 

var zTree = $.fn.zTree.getZTreeObj(treecode);

var nodes = zTree.getSelectedNodes();

 

if(nodes[0].id==1){

 

grid.set({data: gobj_functemp});

}else if(nodes[0].id==11){

grid.set({data: gobj_functemp_A1});

}else if(nodes[0].id==12){

grid.set({data: gobj_functemp_A2});

}else if(nodes[0].id==13){

grid.set({data: gobj_functemp_A3});

}else if(nodes[0].id==14){

grid.set({data: gobj_functemp_A4});

}else{

grid.set({data: []});

}

};

 

 

这样就可以展示不同的数据。

（1）当点击根节点时，

 

（2）当点击子节点时，