layui 第三方组件平台

返回首页 发布组件

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

文档

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

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

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

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

var rowData; //当前行数据

table.render({
elem: '#tableId'
,toolbar: '#toolbarDemo'
,id:'id'
,url:'tableData.json'
,height: 'full-90'
,page: true
,cols: [[
{type:'checkbox'}
,{field:'name',title: '日期时间选择器',width:120}
,{field:'age', title: 'table点击事件',width:120,event:'age',sort:'true'}
,{field:'state', title: 'ajax传参',width:120}
,{field:'test', title: '数组传参',width:120,sort:'true'}
]],
done:function (res, curr, count) {
layuiTableColumnEdit.render({
id:'#tableId',
type:'select',
field:'state',
url:'selectData.json',
where:{},
callback:function (obj) {
console.log(obj.select); //下拉选项数据
console.log(obj.td); //当前单元格(td)DOM元素
//把选择的数据更新到行数据中
rowData.update({state:parseInt(obj.select.name)});
//把选择的显示数据更新到单元格中显示
obj.update();
}
});

layuiTableColumnEdit.render({
id:'#tableId',
type:'select',
field:'test',
data:selectParams,
callback:function (obj) {
console.log(obj.select); //下拉选项数据
console.log(obj.td); //当前单元格(td)DOM元素
//把选择的数据更新到行数据中
rowData.update({test:parseInt(obj.select.name)});
//把选择的显示数据更新到单元格中显示
obj.update();
}
});

layuiTableColumnEdit.render({
id:'#tableId',
type:'date',
field:'name',
dateType:'datetime',
callback:function (obj) {
console.log(obj.value); //时间值
console.log(obj.td); //当前单元格(td)DOM元素
//把时间更新到行数据中
rowData.update({name:obj.value});
}
});
}
});

//解决前端页面排序出现的bug
table.on('sort(tableEvent)', function(obj){
layuiTableColumnEdit.reload("#tableId");//参数为表格id
});

//监听行单击事件(双击事件为:rowDouble)
table.on('row(tableEvent)', function(obj){
rowData = obj;
});

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


//获取选中行事件
table.on('toolbar(tableEvent)', function(obj){
if(obj.event === 'getCheckData'){
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus.data)
}
});
});
</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.效果图

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

日期时间选择器