【第三方插件】 layui-select-ext 表单select多选和无限级联动

分享 未结
123 10304
番茄
番茄 2018-5-14
悬赏:20飞吻


layui_extends/selectM.js 多选插件
layui_extends/selectN.js 无限级插件(json数据与layui-tree结构一致)

2.0是一个接近完善的版本。
实现动态设置选中值 set方法
实现自定义提示文字
实现ajax方式获取候选数据
实现禁用某些选项(基于候选数据,status=0)
实现设置下拉框宽度
实现选项搜索(仅支持无限级)
实现表单验证 lay-verify
实现自定义候选数据键名
重置(reset)恢复改为用set方法




使用比较简单,请自行查看演示吧!

码云演示

码云下载
回帖
  • 番茄
    2018-5-22
    @淘淘乐 selectM暂时没有此方法,这个模块我觉得有必要进一步优化,等selectN再完善一点,再按照两个模块保持一致性的原则跟进一下。
    0 回复
  • 正需要,谢谢分享![good]
    0 回复
  • Bronze
    2018-5-23
    @番茄 请问下 在table中的某一列设置为select下拉框 这个怎么实现 谢谢[微笑]
    0 回复
  • 番茄
    2018-5-23
    @Bronze 这个结合layui的模板功能应该就可以了。我自己暂时没有实践过。

    社区有另一个插件已实现这个功能 http://fly.layui.com/jie/26337/
    0 回复
  • 点击下载,然后就提示下面的:
    您要访问的网站是欺诈网站
    您要访问的网站被大量用户举报,存在欺诈内容,网站会尝试诱骗您的帐号及密码或直接骗取您的钱财,已为您拦截。
    您访问的是:http://moretop.gitee.io/layui-select-ext/

    这特么就尴尬了[睡]

    0 回复
  • 番茄
    2018-5-23
    @醉读女人心 电脑管家,[哈哈] 谁叫码(ma)云和马化腾是竞争对手呢?

    你看看马哥的 http://layuicms.gitee.io/layuicms2.0/ ,也是一样的提示的。@驊驊龔頾
    0 回复
  • Bronze
    2018-5-23
    @番茄 非常感谢您的回复,不过 “http://layuicms.gitee.io/layuicms2.0/”中是解决的是select多选的问题,跟table表单中的某一列设置为select下拉框还是有些区别的,您看下是否可以有时间帮忙解决的。。。
    0 回复
  • 番茄
    2018-5-23
    @Bronze 这个官方后续应该是会支持的。官方目前已经支持了input text这种编辑了。如果是做后台交互的话,或许可以用弹层的方式先实现一下。我自己暂时没遇到这种使用场景,所以没有实现的思路。
    0 回复
  • Bronze
    2018-5-24
    @番茄 好的 谢谢
    0 回复
  • likejian
    2018-5-24
    大神,膜拜呀
    0 回复
  • flyuu
    2018-5-24
    @番茄 嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯
    0 回复
  • 阿珏
    2018-5-24
    好棒,收藏
    0 回复
  • [ok]很棒棒
    0 回复
  • 新人报道,请多关注
    0 回复
  • @壹个哇塞的小伙 6666656565
    0 回复
  • 哈哈啊哈哈哈哈哈哈哈
    0 回复
  • 哈哈啊哈哈哈哈哈哈哈
    0 回复
  • mark[鼓掌]
    0 回复
  • 一阔树
    2018-6-5
    用着很不错,根据自己的需求,调整了2个地方,Fork了一下。

    *[修改] selectN.js 增加在取对象值的时候,可以增加一个扩展,方便使用;field:{idName:'ext.id',titleName:'ext.name',childName:'children'}
    *[优化] 在没有后续可选项时,不显示后面的select

    https://gitee.com/devmax/layui-select-ext/
    0 回复
  • 一阔树
    2018-6-5
    增加了回调事件,在用户选择后出发,可以判断是否选中最后节点。
    0 回复
  • 番茄
    2018-6-6
    0 回复
  • 南鸢000
    2018-6-9
    字段名称不同怎么配置?

    0 回复
  • 南鸢000
    2018-6-9
    @番茄 field能改成指定多个字段名吗?不指定的话选项变成undefined
    //数据的键名
    ,field:{idName:'id',titleName:'name',childName:'children'}

    0 回复
  • 番茄
    2018-6-9
    @南鸢000 这个一般需要结合后端生成的无限级数据结构,当然你也可以用js对后端的数据结构先进行转换
    0 回复
  • 南鸢000
    2018-6-11
    @番茄 请求总是404错误,调试发现请求头中总是有参数

    ,是selectN的data和ajax的data冲突了?
    还是我的代码有问题?
            var countryId = selectN({
    elem: '#countryId'
    ,data: function () {
    var catData;
    $.ajax({
    url:"/manage/exchange/selSysArea",
    type:"post",
    dataType:"json",
    success:function (data) {
    catData =data;
    }
    })
    return catData;
    }
    ,last:true
    ,tips: ['请选择省/国外','请选择城市/国外','请选择城市/国家']
    ,field:{idName:'id',titleName:'name',childName:'children'}
    });
    swagger测试可以拿到tree
    0 回复
  • 番茄
    2018-6-11
    @南鸢000


    var countryId = selectN({
    elem: '#countryId'
    ,data:"/manage/exchange/selSysArea"
    ,last:true
    ,tips: ['请选择省/国外','请选择城市/国外','请选择城市/国家']
    ,field:{idName:'id',titleName:'name',childName:'children'}
    });

    这样呢?
    0 回复
  • 南鸢000
    2018-6-11
    @番茄 这样可以,但是只能get请求
    0 回复
  • 南鸢000
    2018-6-11
    @番茄 感谢[赞]
    0 回复
  • 番茄
    2018-6-11
    @南鸢000


    //多选标签-基本配置
    var tagIns1 = selectM({
    //元素容器【必填】
    elem: '#tag_ids1'
    //候选数据【必填】
    ,data: function(){
    var tagsData;
    $.ajax({
    url:'tags.json',
    dataType:'json',
    async:false,
    success:function(json){
    tagsData=json;
    }
    });
    return tagsData;
    }()
    });


    重点:
    async:false,
    倒数第二行,()
    0 回复
  • Apple333
    2018-7-2
    @番茄 想问一下,为什么获取不到数据
    如果用json会显示not find
    0 回复