layui-table-column-select
在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表。
码云地址:https://gitee.com/kkk12/layui-table-select
一、介绍
此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)功能的问题。
a.可异步ajax请求后台数据。
b.可直接以数组形式传参
c.可输入关键字搜索下拉框数据
二、使用说明
1.使用方法
下载define/table-select整个文件夹,放在你的项目里面,然后使用模块加载的方式使用:
layui.config({ base: 'define/' }).extend({ layuiTableColumnSelect: 'define/table-select/js/layui-table-select' }).use(['layuiTableColumnSelect'], function () { var layuiTableColumnSelect= layui.layuiTableColumnSelect; });
2.在layui table单元格中渲染下拉列表
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table> <script> layui.use(['table','layuiTableColumnSelect'], function () { var table = layui.table; var layuiTableColumnSelect = layui.layuiTableColumnSelect; var data=[]; data.push({id:1,name:'张三1',age:23,state:1}); data.push({id:2,name:'张三2',age:23,state:1}); data.push({id:3,name:'张三3',age:23,state:1}); data.push({id:3,name:'张三4',age:23,state:0}); data.push({id:4,name:'张三5',age:23,state:0}); data.push({id:6,name:'张三6',age:23,state:0}); table.render({ elem: '#tableId' ,id:'id' ,data:data ,height: 'full-90' ,page: true ,cols: [[ {type:'checkbox'} ,{field:'name',event:'addSelect',title: '名称',width:150} ,{field:'age', title: '年龄',width:305} ,{field:'state', title: '故障状态',width:90,event:'addState',templet:function (d) { if(d.state == 0){ return '异常'; }else if(d.state == 1){ return '正常'; }else { return '异常'; } }} ]] }); var selectParams = []; selectParams.push({name:'1',value:'测试1'}); selectParams.push({name:'2',value:'测试2'}); selectParams.push({name:'3',value:'测试3'}); selectParams.push({name:'4',value:'测试4'}); selectParams.push({name:'5',value:'测试5'}); layuiTableColumnSelect.addSelect({data:selectParams,layFilter:'tableEvent',event:'addSelect'}); layuiTableColumnSelect.addSelect({url:'selectData.json',where:{},layFilter:'tableEvent',event:'addState'}); }); </script>
注意:
可以使用url传递数据,也可以使用data传递数据,如果使用url传递数据,参数是where字段为ajax后台请求参数。
数据格式
data数据格式为name和value字段。
数组形式传参时格式:
[ {name:1,value:"测试1"}, {name:2,value:"测试2"}, {name:3,value:"测试3"}, {name:4,value:"测试4"}, {name:5,value:"测试5"} ]
ajax请求后台时格式:
{ data:[ {name:1,value:"测试1"}, {name:2,value:"测试2"}, {name:3,value:"测试3"}, {name:4,value:"测试4"}, {name:5,value:"测试5"} ] }
3.参数说明
4.效果图
ajax请求后台:
数组形式传参:
可输入关键字搜索下拉框数据信息: