现在位置首页 / 前端开发 /正文

ztree教程-将ul li元素转换为zTree树控件的插件

作者: IT小兵 | 2014年6月17日| 热度:℃ | 评论: |参与:

该插件主要是用于可以直接将页面内的一些类似zTree结构的元素直接转换为zTree树控件进行操作。

 该插件会自动解析元素层次结构,将其转换为zTree的树节点集合。有一点需要特别注意的是页面元素容器ID必须指定。

插件代码:

/*!
 * Function Name: zTree plugin(zTree树插件)
 * Function Desc:该插件主要是用于可以直接将页面内的一些类似zTree结构的元素直接转换为zTree树控件进行操作。
 *               该插件会自动解析元素层次结构,将其转换为zTree的树节点集合。有一点需要特别注意的是页面元素容器ID必须指定。
 * Author:stepday
 * Author's WebSite:http://www.stepday.com
 * Create Date: 2014-06-16
 */
(function ($) {
    //设置一个全局树节点变量 用于解决js方法之间引用类型传递参数无效问题
    var zNodes = null;
    //获得页面所有容器class为ztree的集合
    function FindZTreeContainer() {
        return $(".ztree");
    }
    //递归构建zTree树节点层级关系
    function DepthFindNodes(htmlNode, id, pId) {
        for (var i = 0; i < htmlNode.children.length; i++) {
            if (htmlNode.children[i].localName == "ul") {
                var newPID = pId;
                if (htmlNode.children[i].nodeValue != null) {
                    var node = new Object();
                    node.id = id;
                    node.pId = pId;
                    node.name = htmlNode.children[i].nodeValue;
                    zNodes.push(node);
                    newPID = id;
                    id++;
                }
                if (htmlNode.children[i].children.length > 0) {
                    DepthFindNodes(htmlNode.children[i], id, newPID);
                }
            } else if (htmlNode.children[i].localName == "li") {
                var newPID = pId;
                if (htmlNode.children[i].outerText != null) {
                    var node = new Object();
                    node.id = id;
                    node.pId = pId;
                    var nodeName = htmlNode.children[i].outerText;
                    var indexOf = nodeName.indexOf('\n');
                    if (indexOf > 0) {
                        //截断获取节点名称
                        nodeName = nodeName.substring(0, indexOf);
                    }
                    node.name = nodeName;
                    zNodes.push(node);
                    newPID = id;
                    id++;
                }
                if (htmlNode.children[i].children.length > 0) {
                    DepthFindNodes(htmlNode.children[i], id, newPID);
                }
            }
        }
    }
    //获取节点结构
    function GetTreeNodes(htmlNode, id, pId) {
        if (htmlNode.children.length > 0) {
            zNodes = new Array();
            DepthFindNodes(htmlNode, id, pId);
        }
        else
            return null;
    }
    ///转换操作
    $.fn.ConvertToZTree = function () {
        //获取页面所有标记为ztree属性的元素
        var divList = FindZTreeContainer();
        for (var i = 0; i < divList.length; i++) {
            GetTreeNodes(divList[i], 1, 0);
            var contianerId = divList[i].id;
            if (contianerId.length == 0) {
                console.log("页面内第" + (i + 1).toString() + "棵树容器尚未设置id属性");
            } else {
                $.fn.zTree.init($("#" + divList[i].id), setting, zNodes);
            }
        }
    };
})(jQuery);

Html代码:

<!DOCTYPE html>    
<html>    
<head>    
<title>ZTREE 插件 - 将页面所有class为ztree的容器直接转换为zTree控件</title>    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">    
<link rel="stylesheet" href="css/demo.css" type="text/css">    
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">    
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>    
<script type="text/javascript" src="js/jquery.ztree.all-3.5.js"></script>    
<script type="text/javascript" src="js/ContainerConverToZTree.js"></script>    
<style>    
div    
{    
border:1px solid #777777;    
margin-top:5px;    
}    
</style>    
</head>    
<body>    
<h1>    
ZTREE 插件 - 将页面所有class为ztree的容器直接转换为zTree控件</h1>    
<div id="zTreeOne" class="ztree">    
<ul>    
你好    
<li>实收资本    
<ul>    
<li>子节点1</li>    
<li>子节点2</li>    
</ul>    
</li>    
<li>资本公积</li>    
<li>本年利润</li>    
<li>利润分配</li>    
</ul>    
</div>    
<div id="zTreeTwo" class="ztree">    
<ul>    
<li>所有者权益    
<ul>    
<li>实收资本</li>    
<li>资本公积</li>    
<li>本年利润</li>    
<li>利润分配</li>    
</ul>    
</li>    
<li>资产</li>    
<li>负债</li>    
<li>成本</li>    
<li>损益</li>    
</ul>    
</div>    
<script type="text/javascript" language="javascript">    
//zTree的基本配置    
var setting = {    
data: {    
simpleData: {    
enable: true    
}    
}    
};    
///页面初始化    
$(document).ready(function () {    
$(document).ConvertToZTree();    
});    
</script>    
</body>    
</html>


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询