jQuery树型选择插件(原创)

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

 33203  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())
相关插件-选择框,文件树

jquery城市选择

使用jquery简单制作的城市选择,学起来很简单,功能还不够完善。
  选择框
 40805  336

jQuery首字母搜索全国省市区插件

一款简单实用的响应式首字母搜索全国省市区插件适合手机页面和网站页面
  选择框
 23960  297

jquery城市选择插件lazyload-min.js

jquery城市选择插件lazyload-min.js
  选择框
 70559  475

jQuery仿美团APP筛选

jQuery条件筛选
  选择框
 44021  390

讨论这个项目(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
    怎么都没个人主页, 我还以为是哪个流浪项目 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复