CXL使用Ztree大全

下载地址：http://www.ddooo.com/softdown/115926.htm

第一步 —— 引入相关文件

备注：

1、第一个（zTreeStyle.css）是zTree的样式css文件，引入了这个，才能呈现出树形的结构样式，

2、第二个（jquery-1.9.1.min.js）是jQuery文件，因为要用到，

3、第三个（jquery.ztree.core-3.5.min.js）则是zTree的核心js文件，这个是必须的，

4、最后一个（js/jquery.ztree.excheck-3.5.min.js）则是拓展文件，主要用于单选框和复选框的功能，因为用到了复选框，所以也要要引进来。

第二步 —— 相关配置（具体的详细配置，请到官网参考详细API文档）

var zTree;
var setting = {
view: {
dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
showLine: true,//是否显示节点之间的连线
fontCss:{‘color’:‘black’,‘font-weight’:‘bold’},//字体样式函数
selectedMulti: false //设置是否允许同时选中多个节点
},
check:{
//chkboxType: { “Y”: “ps”, “N”: “ps” },
chkStyle: “checkbox”,//复选框类型
enable: true //每个节点上是否显示 CheckBox
},
data: {
simpleData: {//简单数据模式
enable:true,
idKey: “id”,
pIdKey: “pId”,
rootPId: “”
}
},
callback: {
beforeClick: function(treeId, treeNode) {
zTree = $.fn.zTree.getZTreeObj(“user_tree”);
if (treeNode.isParent) {
zTree.expandNode(treeNode);//如果是父节点，则展开该节点
}else{
zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
}
}
}
};

第三步 —— 节点数据加载，呈现树形结构

1、html页面，直接放一个ul就可以，数据最终会自动加载到这个ul元素里面

2、js中进行数据的加载

一，静态方式（直接定义）

var zNodes =[
{ id:1, pId:0, name:“test 1”, open:false},
{ id:11, pId:1, name:“test 1-1”, open:true},
{ id:111, pId:11, name:“test 1-1-1”},
{ id:112, pId:11, name:“test 1-1-2”},
{ id:12, pId:1, name:“test 1-2”, open:true},
];

$(document).ready(function(){
$.fn.zTree.init($("#user_tree"), setting, zNodes);
});
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj(“user_tree”),
nodes=treeObj.getCheckedNodes(true),
v="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + “,”;
alert(nodes[i].id); //获取选中节点的值
}
}

二、动态方式（从后台数据库加载）

/**

• 页面初始化
  */
  $(document).ready(function(){
  onLoadZTree();
  });

/**

• 加载树形结构数据
  */
  function onLoadZTree(){
  var treeNodes;
  KaTeX parse error: Expected '}', got 'EOF' at end of input: …传输格式：json url:(’#ctx’).val()+“SendNoticeMsgServlet?action=loadUserTree”,//请求的action路径
  error:function(){
  //请求失败处理函数
  alert(‘亲，请求失败！’);
  },
  success:function(data){
  //console.log(data);
  //请求成功后处理函数
  treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
  }
  });

var t = $("#user_tree");
t = $.fn.zTree.init(t, setting, treeNodes);
}

java后台加载数据代码：

1、定义tree的VO类，这个也可以不用定义，由于我要用到其他操作，方便一些

/**

• zTree树形结构对象VO类
• @author Administrator

*/
public class TreeVO {
private String id;//节点id
private String pId;//父节点pId I必须大写
private String name;//节点名称
private String open = “false”;//是否展开树节点，默认不展开

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 getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getOpen() {
return open;
}

public void setOpen(String open) {
this.open = open;
}

}

2、查询数据库，并且sql的结构字段也要是id,pId,name,open(可选)这种格式（注意：pId中间的I必须大写），然后将结果封装到TreeVO类中。
/**

• 加载树形结构数据
• @param request
• @param response
• @throws IOException
  */
  public void loadUserTree(HttpServletRequest request, HttpServletResponse response) throws IOException{
  WeiXinUserService weixinUserService = new WeiXinUserServiceImpl();
  List user_tree_list = weixinUserService.getUserTreeList();
  String treeNodesJson = JSONArray.fromObject(user_tree_list).toString();//将list列表转换成json格式 返回

PrintWriter out = response.getWriter();
//利用Json插件将Array转换成Json格式  
out.print(treeNodesJson);

//释放资源
out.close();

}