url: http://yunpan.cn/cwkgzpzSBDXEu (提取码:e3af)javascript
文件树:http://yunpan.cn/cweS8pjxur9XI (提取码:992a)css
一、支持展开\收起功能;
二、可删除树节点;
三、可移动树节点(根据树节点的id);
四、数据来源能够是一个数组,也能够是一个url地址;html
一、存在一个树的容器java
<div class="test"> </div>
二、引入jquerynode
<script src="http://s1.qhimg.com/!20166620/jquery.min.js"></script>
三、在head里面引入tree.css文件jquery
<link rel="stylesheet" href="css/tree.css"/>
四、在html的底部引入tree.js文件数组
<script type="text/javascript" src="js/tree.js"></script>
五、调用url
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中取数据。spa
[{ name: "a", category_id: 1 }, { name: "b", category_id: 2 }]