easyUI 附加tree节点到tree - Javascript教程_JS教程_技术文章 - 红黑联盟
- 引用 http://www.2cto.com/kf/201208/147810.html
- easyui里面的加载tree的两种方式 - PTTD - 博客园
-
符合EasyUI中Tree的Json格式，我们先看一下，格式是如何的
[{ "id":1, "text":"My Documents", "children":[{ "id":22, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":"Friend" },{ "id":112, "text":"Wife" },{ "id":113, "text":"Company" }] },{ "id":12, "text":"Program Files", "children":[{ "id":121, "text":"Intel" },{ "id":122, "text":"Java", "attributes":{ "p1":"Custom Attribute1", "p2":"Custom Attribute2" } },{ "id":123, "text":"Microsoft Office" },{ "id":124, "text":"Games", "checked":true }] },{ "id":13, "text":"index.html" },{ "id":14, "text":"about.html" },{ "id":15, "text":"welcome.html" }]}]第一次看了之后，由于没有思路就给放弃了，就采取了Tree中的老大ZTree，可以问题接踵而至，它与前台的EasyUi有时会发生冲突，没办法最后还是只能采取EasyUi中Tree，仔细分析一下，貌似可以采用算法中的递归来实现，于是乎小编就有了以下的解决思路。
1.先创建一个符合EasyUi中树形格式的类
/* 树的节点类 id：节点id，对载入远程数据很重要。 text：显示在节点的文本。 state：节点状态，'open' or 'closed'，默认为'open'。当设置为'closed'时，拥有子节点的节点将会从远程站点载入它们。 checked：表明节点是否被选择。 children：子节点，必须用数组定义。 */ public class TreeNode { public string id { get; set; } //节点的id值 public string text { get; set; } //节点显示的名称 public string state { get; set; }//节点的状态// 请在整个树转换成jsonString时,将字符串Checked换成checked，否则easyui不认
public bool Checked { get; set; } //注意：转成JsonTreeString时，将"Checked"替换成"checked",否则选中效果出不来的
public List children { get; set; } //集合属性，可以保存子节点 }2.把从后台查出来的对象，转换成为EasyUi中格式
#region 2.0 将当前组织 对象 转成 树节点对象 +TreeNode ToNode() /// /// 将当前组织 对象 转成 树节点对象 /// /// public TreeNode ToNode() { TreeNode node = new TreeNode() { id = this.pid, text = this.OrganizationName, state = "open", Checked = false, children = new List() }; return node; } #endregion
3.第三步通过递归转换好的树形节点，来找到自己的子节点，然后放到自己默认的属性中
#region 2.0 将 组织集合 转成 树节点集合 +List ToTreeNodes(List listPer) /// /// 将 组织集合 转成 树节点集合 /// /// /// public static List ToTreeNodes(List listPer) { List listNodes = new List(); //生成 树节点时，根据 pid=0的根节点 来生成 LoadTreeNode(listPer, listNodes, "0");
//if (listCurrentPermissions.Count > 0)
//listNodes[0].Checked = false;SetFathersUnchecked(listNodes, argPId);
return listNodes; } #endregion #region 3.0 递归组织集合 创建 树节点集合 /// /// 递归组织集合 创建 树节点集合 /// /// 组织集合 /// 节点集合 /// 节点父id public static void LoadTreeNode(List listPer, List listNodes, string pid) { foreach (var permission in listPer) { //如果组织父id=参数 if (permission.pParent == pid) { //将 组织转成 树节点 TreeNode node = permission.ToNode(); //将节点 加入到 树节点集合 listNodes.Add(node); //递归 为这个新创建的 树节点找 子节点 LoadTreeNode(listPer, node.children, node.id); } } } #endregionpublic static void SetFathersUnchecked(List listNodes, string pid)
{
//叶子节点，则取消父节点的勾选状态，让其变成不确定状态 (否则会自动勾选父下的所有节点而显示不正确)
foreach (var node in listNodes)
{
if (node.children.Count > 0)
{
SetFathersUnchecked(node.children, node.id);if (node.children.Exists(c => c.Checked)//如果节点A下有勾选的子节点，则节点A取消勾选(界面上会自动变成不确定状态)
|| node.children.TrueForAll(c => !c.Checked))//都未勾选，则父取消勾选
node.Checked = false;
}
else
{
//叶子节点
}
}
}public static class Extensions
{
///
/// 转换成Json串，供界面easyui使用
///
public static string ToJson(this List list)
{
string res = DataHelper.Obj2Json(list);
res = res.Replace("\"Checked\"", "\"checked\"");
return res;
}
}通过以上操作最终就返回了类似树形结构的集合，只要在转换为Json串就OK了，当然也可以采用strbuilder的形式来拼接，但是那样操作起来有点太麻烦了，所以采取了递归的形式。
第二种方式:
前端页面就不用介绍了，现在只介绍后台的代码：
package com.ynbd.apply.entity;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;import net.sf.json.JSONObject;
/**
* 在easyui中的tree_data.json数据中，只能有一个root节点
*
* [{
* "id":1,
* "text":"folder1",
* "iconCls":"icon-save",
* "children":[{
* "text":"File1",
* "checked":true
* }]
* }]
*
* easyui里面提供静态方法formatTree(List list)返回结果
*
* TreeJson.formatTree(treeJsonList);
* @author PTTD
*
*/@SuppressWarnings("serial")
public class TreeJson implements Serializable{
private String id;//节点id
private String pid;//父节点id
private String text;//文本内容，节点里面的内容
private String iconCls;//easyui里面的样式
private String state;//easyui里面节点的状态
private String checked;//easyui里面是否被选中
private JSONObject attribute=new JSONObject();//easyui里面绑定该节点自定义属性
private List children=new ArrayList();
//设置TreeJson里面的set/get方法
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getIconCls() {
return iconCls;
}
public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getChecked() {
return checked;
}
public void setChecked(String checked) {
this.checked = checked;
}
public JSONObject getAttribute() {
return attribute;
}
public void setAttribute(JSONObject attribute) {
this.attribute = attribute;
}
public List getChildren() {
return children;
}
public void setChildren(List children) {
this.children = children;
}
/*
* 编写里面的方法
*/
public static List formatTree(List list){
//定义根节点
TreeJson root=new TreeJson();
//定义子节点
TreeJson node=new TreeJson();
//定义树集合
List treeList=new ArrayList();
//定义存放所有父节点的parentNodes
List parentNodes=new ArrayList();
if(list.size()>0 && list !=null){
//获取根节点
root=list.get(0);
//循环遍历oracle数据库中所有节点
for( int i = 1 ; i< list.size(); i++ ){
//获取根节点下面的子节点
node =list.get(i);
if(node.getPid().equals(root.getId())){
//为root(根)节点增加子节点
parentNodes.add(node);
root.getChildren().add(node);
}else{
getChildrenNodes(parentNodes, node);
parentNodes.add(node) ;
}
}
}
treeList.add(root);
return treeList;
}
/*
* 循环遍历所有的节点，确定节点与父节点之间的父子关系
*/
public static void getChildrenNodes(List parentNodes, TreeJson node){
/*
* 循环遍历所有的父节点和node里面的所有节点
*
* for循环里面的循环条件，循环变量的初始化，和循环变量的更新是否可以更改为
* 自增型的，验证完这个以后就验证循环变量的自增型
*/
for(int i=parentNodes.size()-1; i >= 0; i--){
//获取当前的节点
TreeJson pnode=parentNodes.get(i);
if(pnode.getId().equals(node.getPid())){
//将获取出来的子节点添加到相应的父节点里面去
pnode.getChildren().add(node);
//添加子节点后关闭子节点的树形,关闭二级树
pnode.setState("closed");
//退出本次循环
return ;
}else{
/*
* 如果查询出来不是父子关系，就在上一级节点中删除该节点栈
* 里面的当前的节点
*
* 继续循环，直到检查出该节点的子节点或者该节点里面不存在
* 子节点后才退出for循环
*/
parentNodes.remove(i);
}
}
}
}
资讯安全论坛下载读书程序开发数据库系统网络电子书微信学院站长学院QQ手机软件考试
- 首页 > 程序开发 > web前端 > JavaScript > 正文
- easyUI 附加tree节点到tree
-
@author YHC
这个教程向你展示如何附加节点到tree,我们将创建一个食品tree包含水果和蔬菜节点,然后添加一些其他水果到已存在的水果节点.
创建 foods(食品) tree
首先,我们创建食品树,代码就像这样.
[html] view plaincopyprint?
注意:tree组件 是定义在
- 标记,树节点数据从URL"tree_data.json"加载.
得到父节点
然后我们通过点击节点选择fruit(食品节点),我们将添加一些其他的食品(fruit)数据,执行getSelected 方法得到处理节点.
[javascript]
var node = $('#tt').tree('getSelected');var node = $('#tt').tree('getSelected'); getSelected 方法的返回结果是一个javascript对象它有一个id,text和target 属性,target 属性是一个DOM对象,引用选中节点,它的append 方法将使用附加子节点.
附加节点
[javascript]
var node = $('#tt').tree('getSelected');
if (node){
var nodes = [{
"id":13,
"text":"Raspberry"
},{
"id":14,
"text":"Cantaloupe"
}];
$('#tt').tree('append', {
parent:node.target,
data:nodes
});
}var node = $('#tt').tree('getSelected');
if (node){
var nodes = [{
"id":13,
"text":"Raspberry"
},{
"id":14,
"text":"Cantaloupe"
}];
$('#tt').tree('append', {
parent:node.target,
data:nodes
});
} 当添加一些fruit(食品),你将看见:
正如你所看见的,使用easyui的tree 插件去附加节点不是那么的难.作者：yhc13429826359
- 相关文章
- 图文推荐
- 文章
- 推荐
- 点击排行
浙公网安备 33010602011771号