TableSelect 下拉表格数据选择器

分享 未结 精帖
106 8801
sakuya88
sakuya88 2018-9-2
悬赏:20飞吻



在做系统的时候绝大部分数据都是庞大的,用“下拉菜单”已经满足不了大数据的选择。所以我抛砖引玉写了个基础版的TableSelect
希望各位能写出更好的插件
采用layui 插件形式,和其他控件一样 需要 render一下

因为工作关系。。。可能无法及时更新。各位需要啥的,请自行修改吧~

使用方式在演示地址中,按照layui标准插件模式开发,可以使用layu提供的两种方式调用。

演示地址(用的最偷懒的all方式):
https://lolicode.gitee.io/layui_component_tableselect/

项目
https://gitee.com/lolicode/layui_component_tableselect

更新:2018-10-18
1:默认赋值
2:分页选中
3:z-index的问题
4:边缘位置调整
回帖
  • 贤心
    贤心 (管理员)
    2018-9-2
    为什么不分享到“组件平台”呢: https://fly.layui.com/extend/
    12 回复
  • 赞,很赞,非常赞
    3 回复
  • 点赞 ***************************加精
    2 回复
  • 分享到组建平台,这个我觉得会超级实用
    2 回复


  • 我这边引用了下拉表格组件,可是一开始tableSelect就没获取到值。[泪] ,姐姐能帮看下么
    2 回复
  • 分享到组件平台吧,这个挺实用的···
    1 回复
  • Xinu
    2018-9-3
    [good] 非常实用
    1 回复
  • HiAnt
    2018-9-3
    好,这个不错
    1 回复
  • TeAmo
    2018-9-4
    @sakuya88 他那个无法多选[泪]
    1 回复
  • var tableSelect = layui.tableSelect;
    tableSelect.render({
    elem: '#t', //定义输入框input对象
    searchKey: 'keyword', //搜索输入框的name值 默认keyword
    searchPlaceholder: '关键词搜索', //搜索输入框的提示文字 默认关键词搜索
    table: { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem
    url:'url链接。。。',
    cols: [[
    { type: 'checkbox' },
    { field: 'id', title: 'ID', width:100 },
    { field: 'name', title: '名称', width:300 },
    ]],
    page:true
    },
    done: function (elem, data) {
    //选择完后的回调,包含2个返回值 elem:返回之前input对象;data:表格返回的选中的数据 []
    //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
    }
    })
    <input type="text" id="t" name="t">
    为什么输入框点击没有加载下拉的选项
    1 回复
  • 空城丶
    2018-9-11
    里面的关键词搜索,怎么做,求解答
    1 回复
  • sakuya88
    2018-9-3
    update
    09/01 Add 搜索控制 / Add 双击选择
    0 回复
  • maplemei
    2018-9-3
    @sakuya88 双击复选框, 外面显示, 里面没选中
    0 回复
  • TeAmo
    2018-9-3
    如果能增加树形显示就更完美了[嘻嘻]
    0 回复
  • 空城丶
    2018-9-3
    如果能加一个文本模糊匹配 就更牛逼了,很期待楼主更新。
    0 回复
  • @贤心 因为没有按钮
    0 回复
  • sakuya88
    2018-9-3
    @TeAmo 下拉树 已经有人做啦 我就不造轮子了。
    https://fly.layui.com/extend/treeSelect/
    0 回复
  • sane469
    2018-9-3
    清儒这个是什么原因 我当先版本是:layui-v2.3.0 MIT jquery:2.2.4
    0 回复
  • sakuya88
    2018-9-3
    @sane469 我演示地址是加载了layui.all.js,
    如果遵循layui的 模块化模式的话 需要提前加入
    layui.use(['tableSelect'], function(){
    var tableSelect = layui.tableSelect;
    });
    0 回复
  • 爱心
    2018-9-3
    不需要更新到最新版本吧?
    0 回复
  • 易
    2018-9-3
    此组件十分常见,是后台管理系统中大量存在的组件之一,如果能结合treeGrid可能会更好!
    0 回复
  • 这插件暂时两个问题
    如果是屏幕最右边弹出 就会超出浏览器窗口的大小宽度
    layuiadmin用这个的话 z-index 这个值太小 会被很多东西遮挡
    0 回复
  • sakuya88
    2018-9-3
    @浅唱悲歌 嗯 ~ 好的 下个版本 做下处理。
    0 回复
  • sane469
    2018-9-3
    很好,很强大。我早上还想实现这个效果呢打开一看就有你的这个。直接拿来用了。 很棒
    [good] [good] [good]
    0 回复
  • 很赞[good]
    0 回复
  • sane469
    2018-9-3
    我的现在有一个问题,请帮忙看看是怎么回事。
    最左侧选择操作 当是 checkbox 时可以正常显示 可是 当是radio时却显示不出来。这是怎么回事呢?

    0 回复
  • sakuya88
    2018-9-3
    @sane469 因为我用的最新的LAYUI 哈哈~~ 新版本Table 自带单选~~~
    0 回复
  • sane469
    2018-9-3
    @sakuya88
    如图,我是在一个弹出框内再次使用到你的tableSelect 可是发现它总是被遮盖。麻烦看看怎么修复一下
    谢谢。
    0 回复
  • sane469
    2018-9-4
    @sane469 该问题已经解决了 调整了z-index值为19891015
    0 回复
  • learner
    2018-9-4
    感觉可以抽象出来一个,点击弹出一个面板 poupPanel,可以附着在任意元素上,比如按钮文本框;面板里面的内容可以通过公开一个view让用户自定义,比如table,tree,drowdown,tab等等。不知道有么有人做了?
    0 回复