layui 第三方组件平台

返回首页 发布组件

layuiTableColumnSelect layuiTableColumnSelect

此组件是为了解决layui table表格单元格(column)点击事件中无可输入搜索下拉列表(select)功能的问题。 a.可输入关键字搜索下拉框数据。   b.可异步ajax请求后台数据。   c.可直接以数组形式传参。

文档

注意:这里的代码可能不是最新版本,会有bug的存在,必须要到码云上下载最新版本使用。不懂的QQ 374506838

1.使用方法
 下载define/table-select整个文件夹,放在你的项目里面,然后使用模块加载的方式使用:
layui.config({
base: 'module/'
}).extend({
layuiTableColumnSelect:'js/layuiTableColumnSelect'
}).use(['table','layuiTableColumnSelect'], function () {
var layuiTableColumnSelect= layui.layuiTableColumnSelect;

});
2.在layui table单元格中渲染下拉列表
<table class="layui-hide" id="tableId" lay-filter="tableEvent"></table>
<script>
layui.config({
base: 'module/'
}).extend({
layuiTableColumnSelect:'js/layuiTableColumnSelect'
}).use(['table','layuiTableColumnSelect','layer'], function () {
var table = layui.table,layer = layui.layer;
var layuiTableColumnSelect = layui.layuiTableColumnSelect;

var selectParams = [
{name:1,value:"张三1"},
{name:2,value:"张三2"},
{name:3,value:"张三3"},
{name:4,value:"张三4"},
{name:5,value:"张三5"}
];

table.render({
elem: '#tableId'
,id:'id'
,url:'tableData.json'
,height: 'full-90'
,page: true
,cols: [[
{type:'checkbox'}
,{field:'name',title: 'table输入框',width:120,edit:'text'}
,{field:'age', title: 'table点击事件',width:120,event:'age'}
,{field:'state', title: 'ajax传参',width:120}
,{field:'test', title: '数组传参',width:120}
]],
done:function (e) {
layuiTableColumnSelect.render({
id:'#tableId',
field:'state',
url:'selectData.json',
where:{},
callback:function (obj) {
layer.msg(JSON.stringify(obj));
}
});

layuiTableColumnSelect.render({
id:'#tableId',
field:'test',
data:selectParams,
callback:function (obj) {
layer.msg(JSON.stringify(obj));
}
});
}
});

table.on('tool(tableEvent)',function (obj) {
layer.msg("1111111");
});

table.on('edit(tableEvent)',function (obj) {
layer.msg("edit");
});
});
</script>
注意:
  可以使用url传递数据,也可以使用data传递数据,如果使用url传递数据,参数是where字段为ajax后台请求参数。
表格绑定下拉框必须在表格异步加载数据完成后进行,否则绑定失败。
2.数据格式
  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.效果图

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