效果如图所示:

css部分

.layui-table-cell, .layui-table-box, .layui-table-body {
overflow: visible;
}
/* 设置下拉框的高度与表格单元格的高度相同 */
td .layui-form-select {
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}

html部分

<script type="text/html" id="toolbar1">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="savedata">保存</button>
</div>
</script>
<table class="layui-table" id="tclass" lay-filter="tclass"></table>
<script id="tpl1" type="text/html">
<select name="tvalue" lay-filter="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
</select>
</script>

js部分

table.render({
elem: '#tclass'
,url: 'ajax/getClassesbygrade.php'
,where: {"grade":data.grade}
,defaultToolbar: []
,toolbar: '#toolbar1'
,cols: [[
// {type: 'checkbox', fixed: 'left', LAY_CHECKED:true, hide:true},
{field:'classname', title: '班级', width:80},
{field:'headteacher', title: '班主任', width:80},
{field:'department', title: '专业部', width:100},
{title: '分值', templet:'#tpl1',width:60}
]]
,id: 'tclassReload'
,done: function(){
var elem = $(data.elem);
var trElem = elem.parents('tr');
//tclassReload为table.render中设置的id,不是<table>标签中的id
var tableData = table.cache.tclassReload;
$.each(tableData, function(index, item){
tableData[index]["tvalue"] = 5;
});
// console.log(tableData);
// 监听修改update到表格中
form.on('select(select1)', function (data) {
// console.log(data.value);
// debugger;
var elem = $(data.elem);
var trElem = elem.parents('tr');
var tableData = table.cache.tclassReload;
// console.log(tableData);
// 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
// console.log(tableData);
// 其他的操作看需求 TODO
});
}
});
//头工具栏事件
table.on('toolbar(tclass)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'savedata':
var tableData = table.cache.tclassReload;
// console.log(tableData);
// layer.alert(JSON.stringify(tableData));
$.ajax({
url: 'ajax/quans3update.php',
dataType: 'json',
type: 'POST',
data: {"data":tableData, "updatetime":$('#tupdatetime').val(), "vercode":vercode},
success: function (res) {
// console.log(res.data);
if(res=="1"){
layer.msg("保存成功");
}
else{
layer.alert("保存失败,请重新尝试");
}
}
});
break;
};
});

【教程】layui数据表格添加下拉菜单相关推荐

  1. 使用layui做数据表格使用下拉菜单并实现删除功能和时间选择器

    一.再layui官网上查看数据表格的使用方式 查看代码实例不使用 toolbar工具栏,分页功能之类的就不在创建渲染实例的声明 二.根据你要完成表格设计稿完成数据表格中使用下拉菜单和时间选择器  以图 ...

  2. html表格中加下拉,怎样在iview的Table表格中添加下拉菜单?

    我怎么在table表格里面添加下拉菜单 render: (h, params) => { return h('div', [ h('Button', { props: { type: 'prim ...

  3. 计算机专业录入速度,计算机等级:WPS表格中用下拉菜单加快数据录入速度

    为了帮助广大考生更好的复习,帮考网小编整理提供了计算机等级:WPS表格中用下拉菜单加快数据录入速度,以供各位考生复习参考,希望对考生复习有所帮助. 在使用WPS表格的过程中,经常需要录入大量的数据.如 ...

  4. 单元格只能下拉框选_excel给单元格添加下拉菜单列表无需按键盘用鼠标选择即可...

    excel给单元格添加下拉菜单列表无需按键盘用鼠标选择即可 时间:2013-12-08   作者:snow   来源:互联网 为了方便快速的输入数据,通常情况下我们会给单元格添加一个下拉菜单,如此一来 ...

  5. Axure教程:用中继器做下拉菜单(含视频教程)

    今天和大家分享一个中继器的高级教程--用中继器来做下拉菜单. 该教程有视频教程,已上传至原型分享群,进群可查看视频及下载原型. 一.原型效果预览 下面是做好的下拉菜单的效果,你们也可以自行体验哈. 原 ...

  6. Python添加下拉菜单

    #FuncsMenu_3.py(添加下拉菜单) from tkinter import *                                  #导入tkinter模块 #功能设计 de ...

  7. 安卓美化——添加下拉菜单图片或下拉菜单透明

    想必下拉菜单有一个背景图片会让人觉得特酷的感觉~ 具体的过程不难: 1.反编译SystemUI.apk(如何反编译请戳:http://blog.csdn.net/u012336923/article/ ...

  8. Excel - 怎么添加下拉菜单选项?

    工作中常用到Excel表格来做一些数据的记录和统计工作,有些栏位是固定选项,我们避免输入错误或重复性的输入浪费时间,我们可以在对应的列中加如下拉菜单,点击即可选择需要的内容,具体怎么操作呢?下面我们一 ...

  9. Excel - 数据验证 - 制作下拉菜单

    环境 office2013 设置 找一个单独的页来充当数据源(当然你也可以临时用任意单元格充当数据源),输入所有数据项. 在其它需要使用的sheet页中(下图sheet也是本页),选择某列或单元格,点 ...

最新文章

  1. 15.python操作mysql
  2. python用pil图像放大缩小_python使用PIL缩放网络图片并保存的方法
  3. .NET Framework Client Profile/.net framework 客户端配置
  4. 烂泥:【解决】word复制windows live writer没有图片
  5. 09 | 自编码器:让模型拥有属于自己的表达和语言
  6. 浏览器安全与MSAA
  7. JS数据类型 构造函数 原型链
  8. 发现个好玩的,去页面敲键盘,页面键变色
  9. pyecharts显示所有x轴_基于Pyecharts可视化大屏案例一(1)
  10. python set 和 ^ 的妙用
  11. JAVA虚拟机——利用javap反编译class文件分析代码执行过程
  12. RHEL6.3基本网络配置(4) 其它常用网络配置文件
  13. Centos yum 命令行 安装KDE Desktop
  14. 同类型的免费下载软件中, JDownloader的功能比FreeRapid Downloader功能要强很多
  15. 怎么往云服务器里传输文件,怎么把文件传输到云服务器
  16. element的上传如何获取路径_element中文件上传
  17. laravel5.5 sendCloud 发送邮件(sendCloud Api and naux/sendcloud )
  18. 2021-07-16 yarn Total VCores allocated for Containers 与服务器上cpu核数不一致原因
  19. C语言丨整蛊必备小程序,好玩炸翻天(附源码)
  20. 折腾笔记--Linux和Windows10双系统安装的一般步骤(通用)(物理机安装)

热门文章

  1. 怎么卸载手机上下载的软件?苹果手机有两种方法
  2. mysql count star_精品_MySQL常用SQL.md
  3. Zend Stufio如何使用SVN进行代码管理
  4. 【汇总】 美股开户方法 、 美股开户攻略 、 美股开户流程 、 美股教程
  5. 剪辑掉图像替换照片_使用动态剪辑过滤HTML图像标题
  6. 支付开发(七)----支付宝开发之手机网站支付(H5支付)
  7. uni-app入门介绍
  8. 在html中引入谷歌地图
  9. 医疗器械计算机培训,深度学习,AI医疗器械“学然后知不足”
  10. MSSQL 如何删除字段的所有约束和索引