jquery tree 插件

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>",　　  //节点闭合时自定义内容
};

转载于:https://www.cnblogs.com/mricle/p/3859282.html