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新增的属性：
事件
事件扩展自datagrid, 下面是为treegrid新增的事件：
方法