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 退出这个操作. 函数包括以下参数: |
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 参数包含两个特性: |
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 参数包含下列特性: |
remove |
id |
移除节点和它的子节点们。 |
refresh |
id |
刷新指定的节点。 |
beginEdit |
id |
开始编辑节点。 |
endEdit |
id |
结束编辑节点。 |
cancelEdit |
id |
取消编辑节点。 |
getEditors |
id |
获取指定行的编辑器们。每个编辑器有下列特性: |
getEditor |
options |
获取指定的编辑器, options 参数包含两个特性: |