treegrid 的使用介绍

最近在项目开发中使用easyuide treegrid插件，下面将结合项目来介绍下自己的使用心得。

使用到treegrid插件的是权限管理模块，主要功能还是crud，首先在使用easyui时要引入相应的jar包

1、页面显示

注意事项：

1、数据库设计时要有pid的字段来关联到父记录，父级的pid可以为null；

2、实体类设计时要添加_parentId字段，网上介绍的其他字段，例如stats、iconcls等可以不添加；

3、前台接收的数据必须要是json类型的且必须包含‘’rows"，网上有介绍“total”等，可以不包含（本人的json里就没有封装total），我是这样操作的直接在controller层封装成

Map<String,Object>,key就是rows,Value是你想要展示的信息。如下图：

2、页面代码：

                                                                                                            
<table id="treetable" class="easyui-treegrid" title="权限管理" style="width:auto;height:400px" data-options="   
iconCls: 'icon-ok',                                                                                         
url:'${CONTEXT_PATH }/Auth/listAuthority.dhtml',                                                            
rownumbers: true,                                                                                           
animate: true,                                                                                  
collapsible: true,                                                                              
fitColumns: true,                                                                               
fit:true,                                                                                       
method: 'get',                                                                                  
idField: 'id',                                                                                  
treeField: 'authName',                                                                          
showFooter: true                                                                                
">                                                                                             
<thead>                                                                                             
<tr>                                                                                            
<th data-options="field:'authName',width:300,editor:'text',align:'center'">权限名称</th>            
<th data-options="field:'module',width:300,editor:'text',align:'center'">所属模块</th>  

</thead>   

treegrid属性解释：url:初始化时数据展示要请求路径；

animate:折叠或者展开时候的动画显示（true,有过渡效果） 

collapsible:能否折叠

idField:这是隐藏在网络表格里面的属性，此处的id为我需要显示的数据的id

treeField:是指在哪什么属性可以折叠，我在这里设置的是权限名称处。

其他的属性可以自行查询，在文章的尾页会贴上官方API

3、功能键代码：

3.1、修改

                                                                   
var editingId;                                                     
//修改                                                               
function edit(){                                                   
if (editingId != undefined){                                   
$('#treetable').treegrid('select', editingId);             
return;                                                    
}                                                              
var row = $('#treetable').treegrid('getSelected');             
if (row){                                                      
editingId = row.id                                         
$('#treetable').treegrid('beginEdit', editingId);          
}else{                                                         
$.messager.alert("提示信息","未选中任何数据，不能进行编辑");                 
}                                                              
}                                                                  

3.2、删除

function remove(){                                                                                
if (editingId != undefined){                                                                  
$('#treetable').treegrid('select', editingId);                                            
return;                                                                                   
}                                                                                             
var row=$('#treetable').treegrid("getSelected");                                              
if(row==null){                                                                                
$.messager.alert("提示信息","未选中任何数据，不能进行删除");                                                
}                                                                                             
if(row){                                                                                      
if(row._parentId==null){                                                                  
$.messager.confirm("确认信息","确定删除将连同子权限一起删除",function(result){                          
if(result){                                                                       
$('#treetable').treegrid("remove",row.id);                                    
//去数据库删除数据                                                                    
realRemove(row);                                                              
}                                                                             
})                                                                                    
                                                                                      
}else{                                                                                    
$.messager.confirm("确认信息","确定要删除吗？",function(result){                                 
if(result){                                                                       
$('#treetable').treegrid("remove",row.id);                                        
//去数据库删除数据                                                                        
realRemove(row);                                                                  
}                                                                                 
});                                                                                   
}                                                                                         
}                                                                                             
                                                                                              
function realRemove(row){                                                                     
$.ajax({                                                                                  
data:'id='+row.id,                                                                    
url:'${CONTEXT_PATH}/Auth/removeAuthById.dhtml',                                      
success:function(data){                                                               
$.messager.alert("提示信息",data.data);                                               
}                                                                                     
})                                                                                        
}                                                                                             

3.3、增加

function add(){                                                                   
if (editingId != undefined){                                                  
$('#treetable').treegrid('select', editingId);                            
return;                                                                   
}                                                                             
var row = $('#treetable').treegrid('getSelected');                            
if(row==null){                                                                
$.messager.alert("提示信息","至少选择一个模块才能添加权限");                                
}                                                                             
var id=Math.ceil((Math.random()*1000));//0-1000里面随机产生一个id号                    
var now=new Date();                                                           
var year=now.getFullYear();                                                   
var month=now.getMonth()+1;                                                   
var day=now.getDate();                                                        
var hours=now.getHours();                                                     
var minutes=now.getMinutes();                                                 
var seconds=now.getSeconds();                                                 
if (month >= 1 && month <= 9) {                                               
        month = "0" + month;                                                      
    }                                                                             
if (hours<= 9) {                                                              
hours = "0" + hours;                                                      
    }                                                                             
    if (minutes >= 0 && minutes <= 9) {                                           
    minutes = "0" + minutes;                                                  
    }                                                                             
    if (seconds <= 9) {                                                           
    seconds = "0" + seconds;                                                  
    }                                                                             
var date=""+year+"-"+month+"-"+day+"   "+hours+":"+minutes+":"+seconds+"";    
$('#treetable').treegrid('append', {                                          
parent: row.id,                                                           
data:[ {                                                                  
id:id,                                                                
authName:'',                                                          
module:row.authName,                                                  
aliases:'',                                                           
createTime:date                                                       
}]                                                                        
});                                                                           
editingId=id;                                                                
if (editingId != null){                                                       
        $('#treetable').treegrid('select', editingId);                            
    }                                                                             
    $('#treetable').treegrid('beginEdit', editingId);                             
                                                                                  

3.4、保存

function save(){                                                         
if (editingId != undefined){                                         
$('#treetable').treegrid('endEdit', editingId);                  
var data=$('#treetable').treegrid("find",editingId);             
//如果权限名称或者别名没有输入                                                 
if(data.authName==null||data.authName==''){                      
$.messager.alert("提示信息","权限名称不能为空");                         
$('#treetable').treegrid('beginEdit', editingId);            
return;                                                      
}                                                                
if(data.aliases==null||data.aliases==''){                        
$.messager.alert("提示信息","权限别名不能为空");                         
$('#treetable').treegrid('beginEdit', editingId);            
return;                                                      
}                                                                
realSave(data);                                                  
editingId = undefined;                                           
//编辑页面的保存                                                        
function realSave(data){                                         
$.ajax({                                                     
data:data,                                               
url:'${CONTEXT_PATH}/Auth/modifyOrAddAuthById.dhtml',    
success:function(data){                                  
$.messager.alert("提示信息",data.data);                  
//新增或者更新失败需要重新加载页面                                   
if(data.data=="权限别名不能重复"){                           
$('#treetable').treegrid('reload');                  
}                                                    
}                                                        
})                                                           
                                                             
}                                                                
                                                                 
}                                                                    
}                                                                        

3.5、取消

function cancel(){                                              
if (editingId != undefined){                                
//$('#treetable').treegrid('cancelEdit', editingId);    
$('#treetable').treegrid('reload');                     
editingId = undefined;                                  
}                                                           
}                                                               

4、说明：这上面的几点注意的信息就能展示，至于后面的功能操作，本人也在网上查询和借鉴了其他前辈的方法：

5、API

属性

属性扩展自datagrid, 下面是为treegrid新增的属性：

名称	类型	描述	缺省值
idField	string	树节点的key值。必需.	null
treeField	string	树节点值. 必需.	null
animate	boolean	定义节点展开或收敛时，是否显示动画效果.	false
loader	function(param,success,error)	定义怎样从远程服务器装载数据. return false 退出这个操作. 函数包括以下参数: param: 传递给远程服务器的参数对象. success(data): 查询数据成功后，会调用这个回调函数. error(): 查询数据失败后，会调用这个回调函数.	json loader
loadFilter	function(data,parentId)	返回过滤后的数据.

事件

事件扩展自datagrid, 下面是为treegrid新增的事件：

名称	参数	描述
onClickRow	row	用户点击节点时触发.
onDblClickRow	row	用户双击节点时触发.
onClickCell	field,row	用户点击单元格时触发.
onDblClickCell	field,row	用户双击单元格时触发.
onBeforeLoad	row, param	数据请求前触发, return false 删除请求动作.
onLoadSuccess	row, data	数据加载成功时触发.
onLoadError	arguments	数据加载失败时触发, 参数 arguments 与jQuery.ajax 的 'error' 函数相同 .
onBeforeExpand	row	节点展开前触发, return false 删除展开动作.
onExpand	row	节点展开后触发.
onBeforeCollapse	row	节点收敛前触发, return false 删除收敛动作.
onCollapse	row	节点收敛后触发.
onContextMenu	e, row	节点右击时触发.
onBeforeEdit	row	用户开始编辑节点时触发.
onAfterEdit	row,changes	用户完成编辑节点后触发.
onCancelEdit	row	用户放弃编辑节点时触发.

方法

名称	参数	说明
options	none	返回 treegrid 的options 。
resize	options	设置 treegrid 的尺寸， options 参数包含两个特性： width： treegrid 的新宽度。 height： treegrid 的新高度。
fixRowHeight	id	适应指定行的高度。
loadData	data	加载 treegrid 的数据。
reload	id	重新加载 treegrid 的数据。
reloadFooter	footer	重新加载脚部数据。
getData	none	获取加载的数据。
getFooterRows	none	获取脚部数据。
getRoot	none	获取根节点，返回节点对象。
getRoots	none	获取根节点们，返回节点数据。
getParent	id	获取父节点。
getChildren	id	获取子节点们。
getSelected	none	获取选中的节点并返回它，如果没有选中节点就返回 null。
getSelections	none	获取所有的选中节点们。
getLevel	id	获取指定节点的层级。
find	id	找到指定节点并返回此节点数据。
select	id	选择节点。
unselect	id	取消选择节点。
selectAll	none	选择全部节点。
unselectAll	none	取消选择全部节点。
collapse	id	折叠节点。
expand	id	展开节点。
collapseAll	id	折叠全部节点。
expandAll	id	展开全部节点。
expandTo	id	从根部展开一个指定的节点。
toggle	id	切换节点的展开/折叠状态。
append	param	追加节点们到父节点。 param 参数包含下列特性：  parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。 data：数组，节点们的数据。
remove	id	移除节点和它的子节点们。
refresh	id	刷新指定的节点。
beginEdit	id	开始编辑节点。
endEdit	id	结束编辑节点。
cancelEdit	id	取消编辑节点。
getEditors	id	获取指定行的编辑器们。每个编辑器有下列特性：  actions：编辑器可以做的动作们。 target：目标编辑器的 jQuery 对象。 field：字段名。 type：编辑器的类型。
getEditor	options	获取指定的编辑器， options 参数包含两个特性： id：行节点的 id。 field：字段名。