layui-table-column-select

在layui table的基础上对表格列进行扩展：点击单元格显示可搜索下拉列表。

一、介绍

此项目是为了解决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单元格中渲染下拉列表

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'});

});

注意：

可以使用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请求后台：

数组形式传参：

可输入关键字搜索下拉框数据信息：