zTree项目中的使用（1）

标签：

很强大的JQ Tree,使用方便，源代码清晰，适于少量修改满足实际需求。

一、首先数据库部分

ID         Name             PID

1  　　　根目录1　　　　0

2　　　　子目录1　　　 1

3　　　　子目录2　　　 1

4 　　　  目录2　　　　0

5　　　　子目录X　　　4

6　　　　子目录Y　　  4

定义好上述数据结构。

二、引用zTree插件，不用多说了。

注：使用前在页面插入一个DIV容量装载Tree，本例子的DIV  ID为：Tree.

配置初始化信息：

var ztree;//定义全局对象
 var setting={
  view: {
   dblClickExpand: false,//双击展开
   showLine: true,//显示线条
   selectedMulti: false//多选
  },
  edit: {
   enable: true//开启修改节点功能
 },
  data: {

//数据格式，有简单及json格式
   simpleData: {
    enable:true,
    idKey: "id",
    pIdKey: "pId",
    rootPId: ""
   }
  },
  callback: {

//以下定义回调函数
   beforeClick: function(treeId, treeNode) {

//单击前事件
    var zTree = $.fn.zTree.getZTreeObj("tree");
    if (treeNode.isParent) {//判断选择是不是父节点
     zTree.expandNode(treeNode);//展开节点

     return false;
    } else { 
     return true;
    }
   },
  beforeDrop: zTreeBeforeDrop//拖放事件。
  } 
 };

//////////////////////获取数据库数据并初始化////////////////////////////

var temp;
 var zNodes;

$(function(){
  var t=$("#tree");  
  try{
  $.get("getJson.asp",{action:1},function(data){
    eval("("+data+")")
    zNodes=data;
   });}catch(ex)
   {
    alert(ex.message);
    }
  t= $.fn.zTree.init(t,setting,zNodes);//初始化
 });

zTree项目中的使用（1）

标签：

原文地址：http://www.cnblogs.com/li44979/p/4515932.html