table下拉选择器使用开源项目:TableSelect
在开源的基础上修改支持多条件搜索、宽以及高的自定义
TableSelect
//开始使用 var tableSelect = layui.tableSelect; tableSelect.render({ elem: '#demo', //定义输入框input对象 必填 checkedKey: 'id', //表格的唯一建值,非常重要,影响到选中状态 必填 searchKey: 'keyword', //搜索输入框的name值 默认keyword searchPlaceholder: '关键词搜索', //搜索输入框的提示文字 默认关键词搜索 height:'400', //自定义高度 width:'900', //自定义宽度 table: { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem url:'', cols: [[]] }, done: function (elem, data) { //选择完后的回调,包含2个返回值 elem:返回之前input对象;data:表格返回的选中的数据 [] //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID... } }) //默认值 只需要在触发input上添加 ts-selected="1,2,3" 属性即可 值需与checkedKey对应 //多条件搜索 tableSelect.render({ elem: '#demo3', checkedKey: 'id', searchType: 'more', //开启多条件搜索 searchList: [ {searchKey: 'name', searchPlaceholder: '搜索用户姓名'}, //搜索条件1 {searchKey: 'sex', searchPlaceholder: '搜索用户性别'}, //搜索条件2 ], table: { url: '../api/tableSelect.json', cols: [[ { type: 'radio' }, { field: 'id', title: 'ID' }, { field: 'username', title: '姓名' }, { field: 'sex', title: '性别' } ]] }, done: function (elem, data) { //选择完后的回调,包含2个返回值 elem:返回之前input对象;data:表格返回的选中的数据 [] //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID... } })