jquery-tree-1.0.0.js 是一个基于jquery的树插件,能够自定义数据源格式。
节点提供两个方法回调,一个是节点展开回调函数,另一个是节点点击回调函数
插件的节点使用的是Font Awesome字体库。也可以通过css的node-open和node-close 自定义自己的节点样式。
使用方法:
1.引入jquery-tree-1.0.0.js 和 jquery-tree.css
2.插入html,class=tree为树的根容器。他有两个子节点作为节点模板。
class=tree-node-folder 是含有子节点的模板,class=tree-node-item 是不含有子节点的模板。
data-show 属性是你的数据源模型要显示的模型名称。
<div id="MyTree" class="tree"> <div class="tree-node-folder" style="display: none;"> <div class="node-header"> <div data-action="nodeExpand" class="node-expand node-close"><i class="icon-caret-right"></i></div> <div data-action="nodeClick" data-show="Name"></div> </div> <div class="node-content"></div> </div> <div class="tree-node-item" style="display: none;"> <div class="node-header"> <div data-action="nodeExpand" class="node-expand node-close"><i class="icon-caret-right node-hidden"></i></div> <div data-action="nodeClick" data-show="Name"></div> </div> </div> </div>
3. js:配置数据源(dataSource),和数据源中子节点的名称(childDataName)。节点展开方法。节点单点击方法。
$("#MyTree").tree({ dataSource: result.d.Result, childDataName: "ChildModules", nodeExpand: function (nodeData) { }, nodeClick: function (nodeData) { alert("nodeClick:key=" + nodeData.id); }, });
默认配置:
$.fn.tree.defaults = { dataSource: "", //数据源 childDataName: "children", //数据源子节点名称 nodeExpand: function (nodeData) { //节点展开函数 }, nodeClick: function (nodeData) { //节点点击函数 alert("nodeClick:key=" + nodeData.id); }, nodeCloseContent: "<i class='icon-caret-right'></i>", //节点展开时自定义内容 这个是采用Font Awesome字体库的 nodeOpenContent: "<i class='icon-caret-down'></i>", //节点闭合时自定义内容 };