jquery zTree排序 jquery ztree用法

转载

mob6454cc694d8e 2023-11-08 13:46:58

文章标签 jquery zTree排序 ZTree使用说明数据 css javascript 文章分类 jQuery 前端开发

使用条件:

使用zTree树形结构，需要在当前页面中载入zTree的js文件和样式文件

zTree核心js文件:jquery.ztree-2.6.js

zTree样式文件:

因为zTree是基于jquery，所以还需要对应的jQuery库文件

将这些文件引入使用页面:

<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="js/jquery.ztree-2.6.js"></script>

简单使用:

用户需要在页面上新建一个tree对象，需要使用

var zTree = $("#tree").zTree(setting, zTreeNodes);
$("#tree")是获取页面上一个id为tree的<ul>元素

zTree()方法是加载树形结构，它需要两个参数，一个为setting,zTree 的参数配置数据,json数据格式

另一个为zTreeNodes ，其实这个参数是可选的，因为数据是放在setting对象的root属性下，如果root属性下已经存在数据，则可以不用再加载数据对象，例如异步加载数据后，重新加载树形结构的时候，便不需要再指定数据对象。

zTree 的数据参数,json数据格式

而var zTree 是创建树形结构后返回的一个jQuery对象，之后操作树形结构全部操作这个对象即可。

完整代码为：

<html>
  <head>
    <title>这里是测试页面</title>
   
   <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="js/jquery.ztree-2.6.js"></script>
  <script type="text/javascript">
var setting = {
showLine: false,   //是否显示线，true为显示，false为不显示
checkable: true,//是否有可选框，true为可选，false为不可选
showIcon : false//是否有图标，true为有，false为没有，默认为true
};
//新建数据对象，json数据格式
var zTreeNodes1 = [
            { name:"手机", open:false, checked:true,
   
                  { name:"诺基亚", isParent:true},
                  { name:"三星"},
                  { name:"索爱"},
                  { name:"多普达"}
   
            { name:"电脑", open:true, checked:true,
   
                  { name:"硬件", checked:true},
                  { name:"整机", isParent:true, checked:true},
                  { name:"网络", checked:true}
   
            { name:"家电", open:false,
   
                  { name:"电视", checked:true},
                  { name:"冰箱"},
                  { name:"空调", isParent:true}
   
   
</script>
 </head>
 <body>
        <ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>
  </body>
  <script type="text/javascript">
       var zTree = $("#tree").zTree(setting, zTreeNodes1);  
  </script>
</html>
运行结果便如:

Setting对象常用属性说明:

var setting = {
       isSimpleData : true,  //是否使用简单的数组结构
       treeNodeKey : "id",       //使用简单数组结构必须制定的节点自身id
           treeNodeParentKey : "pId",  //使用简单数组结构必须指定的父节点id
  
          showLine: false,   //是否显示线，true为显示，false为不显示
      checkable: true,   //是否有可选框，true为可选，false为不可选
      showIcon : false,  //是否有图标，true为有，false为没有，默认为true
   
   
   callback : {
        click: zTreeOnClick   //回调函数，需要重写这个回调函数
    
   };

如果使用简单数组格式，数据对象的格式便需要如下:

//数据对象，通过pId字段指定上级目录
      var zTreeNodes3 = [
            {"id":1, "pId":0,  "name":"test1"},
                {"id":11, "pId":1,  "name":"test11"},
                {"id":12, "pId":1,  "name":"test12"},
                {"id":111, "pId":11,  "name":"test111"},
                {"id":112, "pId":11,  "name":"test222"},
                {"id":113, "pId":11,  "name":"test3"}

完整代码如下:

<html>
  <head>
    <title>测试</title>
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">   
   
   <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
     <script type="text/javascript" src="js/jquery.ztree-2.6.js"></script>
  
     <script type="text/javascript">
        //新建一个配置对象，json数据格式
       var setting = {
             isSimpleData : true,  //是否使用简单的数组结构
             treeNodeKey : "id",       //使用简单数组结构必须制定的节点自身id
             treeNodeParentKey : "pId",  //使用简单数组结构必须指定的父节点id
  
             showLine: false,   //是否显示线，true为显示，false为不显示
            checkable: true,   //是否有可选框，true为可选，false为不可选
            showIcon : false,  //是否有图标，true为有，false为没有，默认为true
   
   
                    click: zTreeOnClick      //回调函数，协议重写这个回调函数
    
   
   
   
       //回调函数：zTreeOnClick，当用户点击树形结构的节点时触发
      function zTreeOnClick(event, treeId, treeNode) {
             //treeNode为用户点击的节点
            alert(treeNode.tId + ", " + treeNode.name); 
   
   
       //数据对象2，简易数据结构
      var zTreeNodes2 = [
               {"id":1, "pId":0,  "name":"test1","open":true},
                {"id":11, "pId":1,  "name":"test11","open":true},
                {"id":12, "pId":1,  "name":"test12"},
                {"id":111, "pId":11,  "name":"test111"},
                {"id":112, "pId":11,  "name":"test222"},
                {"id":113, "pId":11,  "name":"test3"}
   
   
     </script>
  </head>
  
  <body>
        <ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>
  </body>
  <script type="text/javascript">
       var zTree = $("#tree").zTree(setting, zTreeNodes2);  
  </script>
</html>
运行效果便如:

而因为重写了zTreeOnClick回调函数，所以点击节点的时候，会触发回调函数

数据对象属性介绍

checked:当 setting.checkable时有效，设定节点的 CheckBox 是否被勾选,默认是 false

Click:设定节点在鼠标点击后做的事情，相当于 οnclick="...." 的内容，可用于一些简单操作，如果过于复杂的，建议通过 click事件进行控制处理

Icon:设定节点的自定义图标，以替换 css 样式中配置的普通图标。（设定时请注意指定图标的相对路径是否正确）

Name:节点显示的名称。

Open:设置父节点初始化展开状态。

对于不需要异步获取子节点信息的父节点有效。

Target:对于存在 url属性的节点，设置点击后跳转的目标，同超链接的 target 属性（"_blank", "_self"等）

Url:指定节点被点击后的跳转页面 URL 地址

常用方法介绍：

其中zTree是加载树形结构之后返回的对象

function ceshi(){
          //重新加载树形结构，可以指定另外的setting对象和另外的
数据对象，进行重新加载
          var zTree = $("#tree").zTree(setting2, zTreeNodes3);
           //获取勾选状态改变的节点集合
          var nodes = zTree.getChangeCheckedNodes();
           //获取被选中的节点集合
          var nodes = zTree.getCheckedNodes();
           //获取id为111的节点，这里是精确获取
          var node = zTree.getNodeByParam("id",111);
           //获取name中包含"abc"的节点，模糊查询，
          var nodes =       zTree.getNodesByParamFuzzy("name","abc", node);
           //添加新的节点,添加新的数据对象到指定的父节点下，其中parentNode为欲添加的父节点，如果要在根节点目录下添加，则指定parentNode为null
          zTree.addNodes(parentNode, newNodes);
           //获取被选中的节点
          var selectedNode = zTree.getSelectedNode();

通过ajax异步获取数据

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>这是测试树形结构</title>
    
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">    
   
   <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
     <script type="text/javascript" src="js/jquery.ztree-2.6.js"></script>
  
     <script LANGUAGE="JavaScript">
  
       var zTree1;
       var   setting = {
             checkable: true,
            async: true, //允许异步获取数据
            asyncUrl: "",  //获取节点数据的URL地址
            asyncParam: ["name", "id"],   //获取节点数据时，必须的数据名称，例如：id、name
            asyncParamOther: []   //其它参数 ( key, value 键值对格式)
   
       //初始化时的数据对象
      var zNodes =[   
                { "name":"google", "url":"http://g.cn", "target":"_blank","click":"alert('myname')"},
                { "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
                { "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
   
       //该方法用于预处理异步获取的数据，其中的childNodes便是异步获取的数据对象
      function dataFilter(treeId, parentNode, childNodes) {
          //将初始化时的数据对象赋予一个变量
         var nodes = zNodes;
         if (childNodes) {
            for(var i =0; i<childNodes.length; i++) {
                //将新获取的数据对象一个个的加入nodes中
   
   
   
          //返回数据对象
         return nodes;
   
      function refreshTree(asyncUrl) {
          //设置异步获取数据的地址，还可以是setting.asyncUrl = "data/note.txt"等，不止限于服务器获取
         setting.asyncUrl = "testAction_huoqu.action";
          //设定异步获取数据后使用dataFilter方法进行数据处理
   
          //重新加载，这里不需要再指定数据对象
         zTree1 = $("#treeDemo").zTree(setting);
   
   
   
     </script>
  </head>
  
  <body>
        <ul id="treeDemo" class="tree" style="width:300px; overflow:auto;"></ul>
        <input type="button" value="在线获取数据" onclick="refreshTree();">
  </body>
  <script type="text/javascript">
       zTree1 = $("#treeDemo").zTree(setting, zNodes);
  </script>
</html>

服务器端代码：

Struts2代码

public String huoqu(){
      JSONArray jsonArray = new JSONArray();
      JSONObject one = new JSONObject();
   
      one.put("name","魔兽世界");
      one.put("url","www.wow.com");
      one.put("target", "_blank");
   
      JSONObject two = new JSONObject();
      two.put("name","剑侠情缘");
      two.put("url","www.jianxia.com");
      two.put("target", "_blank");
   
      JSONObject three = new JSONObject();
      three.put("name","传奇");
      three.put("url","www.mir2.com");
      three.put("target", "_blank");
   
   
   
   
   
      HttpServletResponse response = ServletActionContext.getResponse();
       //返回页面的信息为utf-8编码，不加这个提示信息就会变成乱码
      response.setCharacterEncoding("utf-8");
       //返回页面的信息为html/text格式，不加这个返回页面的信息就会是整个页面
      response.setContentType("html/text");
   
       //将信息通过ajax返回
      PrintWriter out = null;  
      try {
   
   
   
   
      } catch (IOException e) {
          // TODO Auto-generated catch block 
   
   
   
      return"testZTreePage";
   }

详情请查看api

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。