源代码:

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
243 声望4 粉丝

努力的童工!