layui-table-column-select-date(layui数据表格可搜索下拉框select)

时间:2019-11-28 01:01:00 来源:互联网 热度: 作者: 佚名 字体:

 

layuiTableColumnEdit

  在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表及日期时间选择器。

  码云地址:https://gitee.com/yangqianlong98/layuiTableColumnEdit

一、介绍

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

二、使用说明

1.使用方法

  下载define/table-select整个文件夹,放在你的项目里面,然后使用模块加载的方式使用:

layui.config({
 base: 'module/' }).extend({  layuiTableColumnEdit:'js/layuiTableColumnEdit' }).use(['table','layuiTableColumnEdit'], 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后台请求参数。
  表格绑定下拉框必须在表格异步加载数据完成后进行,否则绑定失败。

数据格式

  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请求后台:

 

 

数组形式传参:

 

 

 

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

 

日期时间选择器