树插件的使用说明

2024年1月3日 127次阅读 来源: XIAOYI

源代码：

url: http://yunpan.cn/cwkgzpzSBDXEu （提取码：e3af）

文件树：http://yunpan.cn/cweS8pjxur9XI （提取码：992a）

功用：

1、支撑睁开\收起功用；
2、可删除树节点；
3、可挪动树节点（依据树节点的id）；
4、数据泉源可所以一个数组，也可所以一个url地点；

挪用要领：

1、存在一个树的容器

<div class="test">
</div>

2、引入jquery

<script src="http://s1.qhimg.com/!20166620/jquery.min.js"></script>

3、在head内里引入tree.css文件

<link rel="stylesheet" href="css/tree.css"/>

4、在html的底部引入tree.js文件

<script type="text/javascript" src="js/tree.js"></script>

5、挪用

var options = {
    data: treeData.data,
    dataUrl: 'category/tree.js?site_id=551d26f5b348f30f508b4567', //数据接口
    selectType: 'checkbox', //挑选的范例(单选(radio)照样多选(checkbox),照样菜单（menu）,默以为菜单(menu))
    formName: 'test', //挑选的范例是单选(radio)或许多选(checkbox)时，须要指定name值
    deleteCategoryIds: ['12345','3456'], //不须要显现的节点列表
    movable: false, //节点是不是能够从一个节点挪动到另一个节点
    deletable: true, //节点是不是能够被删除
    extendHtml: function(node){ //node为节点信息
        return "<span>"+node.name+"是一个人呀</span>";
    }//树节点的扩大构造
};
$(".test").tree(options);

注重：data和dataUrl只需写一个，假如两个都写上的话，默许从data中取数据。

数据的花样

[{
   name: "a",
   category_id: 1
},
{
   name: "b",
   category_id: 2
}]
    原文作者：XIAOYI
    原文地址: https://segmentfault.com/a/1190000002869028
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞