wdTree 轻量级的 jQuery 目录树插件

发布于 2018-11-26 字数3568 浏览 788 评论 0

wdTree 是一个轻量级的 jQuery 目录树插件,支持多级目录选择,目录和文件复选框选项,获取复选框的值,支持多个配置参数自定义,多个回调函数配置,还可以从其他页面 AJAX Loading 数据加载。

使用方法

要使用这个插件,需要一个 HTML 的元素,比如下面的代码:

<div id="tree"></div>

然后调用插件

var o = {
    showcheck: true
    //onnodeclick:function(item){alert(item.text);},        
};
o.data = treedata;                  
$("#tree").treeview(o);

获取Checkbox选择中的元素

$("#showchecked").click(function(e){
    var s=$("#tree").getCheckedNodes();
    if(s !=null)
    alert(s.join(","));
    else
    alert("NULL");
});

获取当前选中的元素

$("#showcurrent").click(function(e){
    var s=$("#tree").getCurrentNode();
    if(s !=null)
        alert(s.text);
    else
        alert("Current node is nothing");
});

配置参数

data配置支持一下的配置参数

data:[{
    id:"node1", //node id
    text:"node 1", //node text for display.
    value:"1", //node value
    showcheck:false, //whether to show checkbox
    checkstate:0, //Checkbox checking state. 0 for unchecked, 1 for partial checked, 2 for checked.
    hasChildren:true, //If hasChildren and complete set to true, and ChildNodes is empty, tree will request server to get sub node.
    isexpand:false, //Expand or collapse.
    complete:false, //See hasChildren.
    ChildNodes:[] // child nodes
}]

其他可用的配置参数

  • cascadecheck:Boolean Whether node being seleted leads to parent/sub node being selected.
  • cbiconpath:String Checkbox image path.
  • clicktoggle:String Whether to toggle node when node clicked.
  • showcheck:Boolean Whether to show check box or not.
  • theme:String Tree theme. Three themes provided. ‘bbit-tree-lines’ ,’bbit-tree-no-lines’ and ‘bbit-tree-arrows’.
  • url:String Url for child nodes retrieving.

回调函数

oncheckboxclick( tree, item, status)

Fired when check box is clicked on.

Object tree This tree object.
Object item Node item clicked on.
Number status 1 for checked, 0 for unchecked.

onnodeclick( tree, item)

Fired when a node is clicked on.

Object tree This tree object.
Object item Ndde item clicked on.

本地下载地址:wdTree

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!