easyui tree的简单使用

1、帮助文档
所有节点都包含以下属性:

id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data

text: 显示的节点文本

state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载

checked: 指明检查节点是否选中.

attributes: 可以添加到节点的自定义属性

children: 一个节点数组,定义一些子节点

一些示例:

异步加载树

tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如:

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

tree的加载是通过URL 'get_data.php'站点.子节点的加载依赖于父节点的状态.当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据

看看这个从服务器返回的数据

2、前台：

<div region="center" collapsible="false"  style="width:100%;margin-top:5px;margin-left:5px;" border="false">
<div style="float: left;margin-left: 10px;" id="rightC">
<strong><span style="color:#ff0000;"><ul id="tree" ></ul></span></strong>
</div>
</div>

$("#tree").tree({
url:'getOrgTree.do',
method: 'GET',
animate: true,
checkbox: true,
cascadeCheck:true,//层叠选中
lines:true,//显示虚线效果
onLoadSuccess:function(node,data){
var nodeDep = $('#tree').tree('find',checkeid);
if (null != nodeDep && undefined != nodeDep)
{
$('#tree').tree('check',nodeDep.target);
}
},
onCheck:function(node, checked)
{
if (checked)
{
//这段逻辑自拟
}
else
{
}

}
});

3、后台

后台这段代码个人觉得写的不好，但是又没查到怎样写，暂且先这样吧

public class OrgTree
{
private String id;

private String text;

private List<OrgTree> children = new ArrayList<OrgTree>();

private String state;
//getter & setter
}

@RequestMapping("/getOrgTree")
public void getOrgTree(String id, HttpServletRequest request, HttpServletResponse response)
{
List<Organization> orgList = new ArrayList<Organization>();
OrgModel model = new OrgModel();
String spid = "";
//父节点的id为-1
model.getBean().setParentid("-1");
//按条件查询出所有的父节点
orgList = organService.selectByCondition(model);

// 查询出所有的父节点
List<OrgTree> otree = new ArrayList<OrgTree>();
// 遍历所有父节点
if (null != orgList && orgList.size() > 0)
{
for (Organization o : orgList)
{
OrgTree ot = new OrgTree();
ot.setId(o.getId());
ot.setText(o.getOrgName());

OrgModel childMod = new OrgModel();
childMod.getBean().setParentid(o.getId());
//根据父节点id查询出其子节点
List<Organization> orgChild = organService.selectByCondition(childMod);
if (orgChild != null && orgChild.size() > 0)
{
List<OrgTree> list = new ArrayList<OrgTree>();
for (Organization child : orgChild)
{
OrgTree ochild = new OrgTree();
ochild.setId(child.getId());
ochild.setText(child.getOrgName());
list.add(ochild);
}
if(list.size() < 0)
{
ot.setState("open");
}
else
{
ot.setState("closed");
}
ot.setChildren(list);
}

otree.add(ot);

}
}

ComUtil.writerJson(response, otree);
}

效果如下：



本来是想实现每次只能选择一个选项的，但是一直有问题，问题出在那个cascadeCheck属性上，选择了一个节点时，就把另一个选中的节点给unchecked，但是由于这个层叠选中状态的，在只有一个子节点时，把父节点unchecked，但是同时子节点也就去勾选了，该功能未实现，待修改下方法在说。