jQuery zTree插件

Posted 此时的人生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery zTree插件相关的知识，希望对你有一定的参考价值。

jsp页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
   <script type="text/javascript" src="tree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="tree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="tree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="tree/js/jquery.ztree.exedit.js"></script>
    <link rel="stylesheet" href="tree/css/zTreeStyle/zTreeStyle.css" type="text/css">

</head>
<body>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</body>
</html>
<script type="text/javascript">
/**
 * 页面初始化
 */  
$(document).ready(function(){  
    onLoadZTree();  
});
    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: false //每个节点上是否显示 CheckBox
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "organid",
                pIdKey: "parentid",
                rootPId: 0
            },
            key:{
                name : "dzzmc",
                title : "dzzmc"
            }
        
        },
        callback: {
            beforeClick: function(treeId, treeNode) {
                zTree = $.fn.zTree.getZTreeObj("treeDemo");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);//如果是父节点，则展开该节点
                }else{
                    zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
                }
            },
            onClick : zTreeOnClick
        }
    };
        /* 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($("#treeDemo"), setting, zNodes);
        }); */
        
        function zTreeOnClick(t,treeId,treeNode){
            //节点的id,name
            alert(treeNode.organid + "," + treeNode.dzzmc);
        }
        function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
                    nodes=treeObj.getCheckedNodes(true),
                    v="";
            for(var i=0;i<nodes.length;i++){
                v+=nodes[i].name + ",";
                alert(nodes[i].id); //获取选中节点的值
            }
        }
        //动态获取
        
        
          
        /**
         * 加载树形结构数据
         */  
        function onLoadZTree(){  
            var treeNodes;  
            $.ajax({  
                async:false,//是否异步  
                cache:false,//是否使用缓存  
                type:\'post\',//请求方式：post  
                dataType:\'json\',//数据传输格式：json  
                url:\'getTreeDemo.action\',//请求的action路径  
                error:function(){  
                    //请求失败处理函数  
                    alert(\'请求失败！\');  
                },  
                success:function(data){
                    //请求成功后处理函数  
                    treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes  
                   
                }  
            });  
            var t = $("#treeDemo");  
            t = $.fn.zTree.init(t, setting, treeNodes);  
        }  

</script>

 

 

 

后台action代码

package cn.csservice.cssdj.dy.action.dychange;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.opensymphony.xwork.Action;

import cn.csservice.cssdj.common.utils.Ajax;
import cn.csservice.cssdj.common.utils.Constants;
import cn.csservice.cssdj.common.utils.Messages;
import cn.csservice.cssdj.common.utils.StringHelper;
import cn.csservice.cssdj.core.DictionaryConstant;
import cn.csservice.cssdj.core.action.UserAction;
import cn.csservice.cssdj.entity.DictItemDTO;
import cn.csservice.cssdj.entity.TreeNode;
import cn.csservice.cssdj.entity.dy.DZZInfo;
import cn.csservice.cssdj.service.UtilServiceOrgan;
import cn.csservice.cssdj.service.cache.DictCacheService;
import cn.cssservice.cssdj.service.dychange.DyChangeInfoSimpleService;

/**
 * @author
 * @date 下午4:49:19
 */
public class DirDzzInfo extends UserAction {
    private static final long serialVersionUID = 1L;
    private Integer type;
    
     @Autowired
     private DyChangeInfoSimpleService dyChangeInfoSimpleService;

    
    public DirDzzInfo() {
    }
    
    @Override
    protected String userGo() {
        List<DZZInfo> list = dyChangeInfoSimpleService.dirDzz();
        
        result = JSON.toJSONString(list);
        /*result = Ajax.JSONResult(0, Messages.getString("systemMsg.success"),
                    dyChangeInfoSimpleService.toJsonArrayDzz(list));*/
        return Action.SUCCESS;
        
    }

    
}

 



 

 

详细文档链接和插件下载地址 : http://www.treejs.cn/v3/api.php

具体后台sql详解地址(oracle) : http://www.cnblogs.com/colder/p/4838574.html

以上是关于jQuery zTree插件的主要内容，如果未能解决你的问题，请参考以下文章

zTree —— JQuery Tree 插件 | 软件推介

JQuery树形插件zTree+iFrame实现个性网址簿工具

jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题

zTree 优秀的jquery树插件

zTree -- jQuery 树插件

JQuery Tree插件——zTree