layui带按钮的搜索框_layuitable可输⼊关键字搜索下拉框
（select）
layui-table-column-select
在layui table的基础上对表格列进⾏扩展：点击单元格显⽰可搜索下拉列表。
⼀、介绍
此项⽬是为了解决layui table表格单元格(column)点击事件中⽆下拉列表(select)功能的问题。
a.可异步ajax请求后台数据。
b.可直接以数组形式传参
c.可输⼊关键字搜索下拉框数据
⼆、使⽤说明
1.使⽤⽅法
下载define/table-select整个⽂件夹，放在你的项⽬⾥⾯，然后使⽤模块加载的⽅式使⽤：
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});
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'});
layui下载
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请求后台：
数组形式传参：
可输⼊关键字搜索下拉框数据信息：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。