jQuery树型选择插件(原创)

所属分类:输入,导航-选择框,文件树

 31824  263  查看评论 (28)
分享到微信朋友圈
X
jQuery树型选择插件(原创) ie兼容12

更新时间:2019-8-26 16:43:14

更新说明:一个页面生成多个树,id冲突问题添加随机函数UUID

uuid() {
    var s = [];
    var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    for (var i = 0; i < 8; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x30), 1);
    }
    var uuid = s.join("");
    return uuid;
},

126行 ids  ===》uuid+ids
129行 ids  ===》uuid+ids
133行 ids  ===》uuid+ids


更新时间:2019-7-17 11:43:03

更新说明:

添加:ico图标 可用自己的(阿里巴巴矢量库)、UI框架

data数据中的只有name、id、checked、open、ico、children和cascade,其中open为是否展开

ico为ico图片 icon-sousuo 例: <i class="iconfont icon-sousuo"></i>(因麻烦只添加了3个测试ico)

ico 可用自己所使用UI的ico  例:<i class="ivu-icon ivu-icon-ios-add-circle"></i>

所填值 ivu-icon ivu-icon-ios-add-circle 为iview UI

值必须要有所用UI的前缀(不懂可自己去F12把class 里的值全部复制)


更新时间:2019-7-4 20:32:51

更新说明:因存在二级菜单点击出现全选与全不选的问题

修改js中的108行后的递归

添加 var ids = 0;  修改 '<input id="' + data[i].id + '"        =>       '<input id="' + ids + '" label 中的for 跟上面一样修改

修改完成后不依赖 id 选中


发布时间:2019-07-03 22:46:44

不支持IE

生成tree的位置 data为tree数据、arrs为选中的id可为空

  • arrs可填可不填 填写需为数组

  • data数据中的只有name、id、checked、open、children和cascade是可用的,其他为多余

其中open为是否展开

cascade为是否子父级联选中(cascade 必须在最高父级中写才生效)

$(".tree").tree(data, arrs);
//leg(".tree").tree(data,arrs);//leg等同于$
//获取选中id
$("#demo").on("click", () => {
    alert($.getCheckedNodes())
})
console.log($.getCheckedNodes())
//console.log(leg.getCheckedNodes())
相关插件-选择框,文件树

bootstrap下拉列表插件

bootstrap插件一款基于jquery bootstrap的下拉列表插件 ,有很多样式的下拉框
  选择框
 63543  498

jQuery+css3下拉选择框

下拉选择,动画效果
  选择框
 57900  399

JQ表单选择插件

插件包含单选按钮、复选框以及下拉选择菜单的功能,样式美化可自己编写css
  选择框
 56461  314

JQ省市区三级联动选择插件

JQ省市区三级联动选择插件
  选择框
 151739  492

讨论这个项目(28)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?????? 0
    2020/7/9 16:23:41
    二级的设置"open": false无效, 兄弟你可以看看 回复
    行? 0
    2020/5/23 20:30:33
    因为会有存在多个,在最外层上有个全选功能就会很方便。。再支持下ie10 11之类的的 这个就很完美了
        []~( ̄? ̄)~*0
        2020/7/14 14:38:45
        js文件转换成ES5,就支持IE了
    回复
    微妙的感觉 0
    2019/11/2 9:53:22
    我的data数据接口没有"checked": true,这个数据要根据另一个接口获取过来的数据判断 要怎么做
        Lucky8Guy1
        2019/11/18 15:53:36
        $(".tree").tree(data, arrs);
        arrs 为选中的数组id
    回复
    习惯就好 0
    2019/10/11 10:27:25
    强与势 0
    2019/8/30 12:51:38
    谢谢. 你咋不给插件起个名字呢. 这样, 也算在浆糊传名
        强与势0
        2019/8/30 12:52:35
        用了你的插件, 确不知道你叫啥, 也不知道插件名字.
        Lucky8Guy0
        2019/8/30 15:25:24
        0.0 不好意写 感觉菜1
    回复
    强与势 0
    2019/8/23 9:44:12
    设置选中, 如果有api就好了, 我看了你的源码, 你是生成html的时候就直接设置了是否选择. 回复
    强与势 0
    2019/8/22 20:17:10
    你有没联系方式, 我发demo给你调试
        Lucky8Guy0
        2019/8/26 16:13:21
        1334199284
    回复
    强与势 0
    2019/8/22 20:15:15
    错误反馈
    ------------
    . 一个页面, 如果实例化2个树型选择插件,
    点击复选框会影响到另外一个实例, 点击a链接又不会.
        强与势0
        2019/8/23 10:11:12
        自己弄了半天也没修护好. 我录制了一个gif你看看. http://enhancer.bur.hk/1.gif
        Lucky8Guy1
        2019/8/26 16:12:38
        点击复选框会影响另一个应该是Id的原因
        修改哈 id 的生成方式就ok了
    回复
    强与势 0
    2019/8/21 12:57:19
    你的插件怎么不弄个名字 回复
    强与势 0
    2019/8/21 12:24:10
    怎么都没个人主页, 我还以为是哪个流浪项目 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复