wdTree 轻量级的 jQuery 目录树插件

发布于 2018-11-26 21:49:32 字数 3404 浏览 3342 评论 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.

ObjecttreeThis tree object.
ObjectitemNode item clicked on.
Numberstatus1 for checked, 0 for unchecked.

onnodeclick( tree, item)

Fired when a node is clicked on.

ObjecttreeThis tree object.
ObjectitemNdde item clicked on.

本地下载地址:wdTree

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文