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，但是同时子节点也就去勾选了，该功能未实现，待修改下方法在说。