layui表格单元格添加下拉选择功能

1、修改表头

2、更新数据

3、修改样式

代码如下：

<style>/*表格单元格里显示下拉框,添加后样式不对，需要自己调整一下样式使得下拉框与单元格cell刚好合适嵌入，并且需要在js中设置超出长宽时也显示，否则下拉时不会显示，在css中直接设置回影响其他单元格*/td .layui-form-select {margin-top: -10px;margin-left: -15px;margin-right: -15px;}
</style><body><table id="grid" lay-filter="grid"></table><script src="js/jquery-1.11.3.js" charset="UTF-8"></script>
<script src="layui/layui.js"  charset="UTF-8"></script>

<script>//数据var jsonData = [{id: 1,city: 20000,pspid:"001",dateStart:"2020-11-12",dateEnd:"2021-07-15",}, {id: 2,city: 20001,pspid:"002",dateStart:"2021-07-15",dateEnd:"2021-07-15",}];var zdata=[{"pspid" : "001","post1" : "aaa",},{"pspid" : "002","post1" : "bbb",},{"pspid" : "003","post1" : "ccc",},{"pspid" : "004","post1" : "ddd",},{"pspid" : "005","post1" : "eee",}]function selectWz() {var selMaintenanceItem = '<option >请选择</option>';for(var i=0;i<zdata.length;i++){selMaintenanceItem+='<option value="'+zdata[i].pspid+'">'+zdata[i].pspid+'|'+zdata[i].post1+'</option>';}return selMaintenanceItem}//表头var col =[{type: 'checkbox'},{field: 'id', title: 'ID',width: 200},{field: 'city',title: '城市',align: 'center',width: 200,templet: function (d) {// 模板的实现方式也是多种多样，这里简单返回固定的return '<select name="city" lay-filter="testSelect" lay-verify="required" data-value="' + d.city + '" >\n' +'        <option value=""></option>\n' +'        <option value="18000">18000|北京</option>\n' +'        <option value="20000">20000|上海</option>\n' +'        <option value="20001">20001|广州</option>\n' +'        <option value="20002">20002|深圳</option>\n' +'        <option value="20003">20003|杭州</option>\n' +'      </select>';}},{field: 'pspid',title: '项目',align: 'center',width: 200,templet: function (d) {  //templet - 自定义列模板// 模板的实现方式也是多种多样，这里简单返回固定的var zvalueHelp=  selectWz();var zval = '<select name="pspid" lay-filter="testSelect1" lay-verify="required" data-value="' + d.pspid + '" >';zval += zvalueHelp;zval += '</select>'return zval;}},{field:'dateStart', align:'center', title:'开始时间',event:'date1',data_field:'velappr',style:'background-color:#fbeef0'},{field:'dateEnd'  , align:'center', title:'结束时间',event:'date2',data_field:'runappr',style:'background-color:#fbeef0'}]//layui加载模块layui.use(['table', 'layer', 'element', 'jquery', 'form','laydate'], function (table, layer, element, $, form,laydate) {var table = layui.table,$ = layui.$;var form = layui.form;// 监听修改update到表格中form.on('select(testSelect)', function (data) {debugger;var elem = $(data.elem);var trElem = elem.parents('tr');var tableData = table.cache['grid']; // grid为table id// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值tableData[trElem.data('index')][elem.attr('name')] = data.value;});// 监听修改update到表格中form.on('select(testSelect1)', function (data) {debugger;var elem = $(data.elem);var trElem = elem.parents('tr');var tableData = table.cache['grid']; // grid为table id// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值tableData[trElem.data('index')][elem.attr('name')] = data.value;});//执行方法渲染var tableIns = table.render({elem: '#grid', //table的id//width: 900,height: 300,data: jsonData //数据,size: 'lg'    //用于设定表格尺寸，若使用默认尺寸不设置该属性即可  sm（小尺寸） lg（大尺寸）,cols: [col] //表头,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 指向自定义工具栏模板选择器//自定义头部工具栏右侧图标。如无需自定义，去除该参数即可  filter: 显示筛选图标; exports: 显示导出图标 ; print: 显示打印图标,defaultToolbar: ['filter', 'exports', 'print', {title: '提示' //标题,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用,icon: 'layui-icon-tips'   //图标类名}],done: function (res, curr, count) {//数据渲染完的回调count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');layui.each($('select'), function (index, item) {var elem = $(item);elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');});form.render();}});//事件: 语法：table.on('event(filter)', callback);(event 为内置事件名，filter 为容器 lay-filter 设定的值)//工具条事件:注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"table.on('tool(grid)', function (obj) {//给工具按钮加事件var data = obj.data;switch (obj.event) {case 'date1':debugger;var field = $(this).data('field');  //获取当前对象的字段名称，（如：field:'velappr'）laydate.render({elem: this.firstChild,show: true ,//直接显示closeStop: this , //这里代表的意思是：点击 this 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件<br>　　done: function (value, res,count) {data[field] = value; //修改后的值obj.update(data); //res的值：{"year":2020,"month":1,"date":7,"hours":0,"minutes":0,"seconds":0}}});break;}})//事件: 语法：table.on('event(filter)', callback);(event 为内置事件名，filter 为容器 lay-filter 设定的值)//触发头部工具栏事件table.on('toolbar(grid)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：'+ data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选': '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':var data = checkStatus.data;console.log(data);break;};});});</script>

效果图如下：

layui表格单元格添加下拉选择功能相关推荐

Excel怎样操作给单元格添加下拉选项？分享经验！如何给Excel单元格加入下拉列表？
Excel作为一款电子表格软件,现已成为我们大家记录数据.处理数据中使用最为频繁的软件,我们大家在整理数据中为了简便快捷的使用,会想要在单元格中添加一个下拉菜单,这样会让我们的使用更加方便,那么下面小 ...
单元格只能下拉框选_excel给单元格添加下拉菜单列表无需按键盘用鼠标选择即可...
excel给单元格添加下拉菜单列表无需按键盘用鼠标选择即可时间:2013-12-08 作者:snow 来源:互联网为了方便快速的输入数据,通常情况下我们会给单元格添加一个下拉菜单,如此一来 ...
Excel如何给单元格添加下拉选项？实用小技巧！怎样给单元格加入下拉列表？
Excel作为一款电子表格软件,现已成为我们大家记录数据.处理数据中使用最为频繁的软件,我们大家在整理数据中为了简便快捷的使用,会想要在单元格中添加一个下拉菜单,这样会让我们的使用更加方便,那么下面小 ...
layui表格单元格添加时间控件
在HTML中添加一个table,button用来获取修改后的数据 <button class="layui-btn" id="getCheckedData" ...
php利用表格敬将所选择的数据显示出来,单元格下拉筛选设置/Excel对筛选后的单元格进行下拉填充...
EXCEL里怎样让一个单元格能有下拉菜单? 要设置下拉菜单的单元格(或格区)----数据---有效---"允许"中选择"序"---"来源"中 ...
Pyqt5 在表格中单元格设置下拉框，并根据选项改变背景颜色
关于怎么在表格中单元格设置下拉框,并根据选项改变背景颜色 def table_combox_init(self):combox_statePlm_jria_list = ['', '无', 'O', ...
EasyExcel 实现单元格数据下拉选
EasyExcel 实现单元格数据下拉选前言 easyExcel导出模板的时候,固定的某个列我们有固定的是选项值的时候,我们需要将excel的单元格做成下拉选的情况:满足实际的业务需求. 实现 1. ...
如何让图片充满excel单元格_如何在Excel单元格建立下拉菜单
对于一些常用的数据我们往往会希望能够尽量快速的输入,下拉菜单就是一个最简单的解决办法.那么如何实现下拉菜单呢?跟随以下步骤,建立属于自己的下拉菜单吧! 如何建立下拉菜单? 一.确定内容:在单元格中,输 ...
ag-grid 单元格编辑-下拉框
一.基本下拉框效果如下: 选中后的值直接就是界面显示的值(也是代码中定义的值).效果如下: 二.有id 的下拉框这个下拉框跟平常用的select 框类似,设置id和value,在界面选择的时候显示 ...

layui表格单元格添加下拉选择功能

layui表格单元格添加下拉选择功能

layui表格单元格添加下拉选择功能相关推荐

最新文章

热门文章