html页面写个表格中带操作按钮,layui table 表格 多个操作按钮使用记录

layui table 表格 多个操作按钮使用记录

在开发中有时候 table 表格的操作按钮是不固定的，可以有多个，三两个还好，如果操作的按钮过多的时候就不美观了，这时候我们就想把一下按钮添加到一个按钮列表中，在正常的情况下就隐藏起来，点击的时候弹出这个按钮列表， 如： 我们想要实现这种效果

当我们点击更多的时候弹出一个按钮列表， 在网上找了好久都没有找到layui有中自带这个功能，所有得自己写了

思路

刚开始的时候我觉得可以点击更多的时候写一个弹窗的方法，在弹窗中展示按钮，但是做的差不多的时候发现，这弹窗不太行，不符合原型图上的设计，于是又找其他的方法，最终找到了 layer.tips方法

layer.tips是提示方法，它可以在点击的地方进行弹窗提示，跟原型图上的差不多了， 于是将普通弹窗改为了 layer.tips

//监听工具条

table.on('tool(data_table)', function(obj){

//当点击table 表格中的更多按钮的时候触发这个事件

if(obj.event === 'more'){

var html = "input value = 'aaaa'"

layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})

}

}

用layer.tips又有个问题，这是提示弹窗，一般提示的弹窗会有个在 几秒后 自动关闭 或者设置为不关闭，这样不太符合我们的要求，我们想要自己关闭这个弹窗,由于这个弹窗右上角是没有关闭图标的，所以我们想设置成点击其他地方就自动关闭这个弹窗，这时候可以写一个监听鼠标点击事件进行监听

//监听工具条

table.on('tool(data_table)', function(obj){

//当点击table 表格中的更多按钮的时候触发这个事件

if(obj.event === 'more'){

var html = "input value = 'aaaa'"

// 获取弹窗index

tips_index = layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})

}

}

//定义tips 弹窗index

var tips_index = ""

//监听鼠标点击事件

window.addEventListener('click', function() {

//关闭弹窗

layer.close(tips_index)

}, false);

当监听到鼠标点击的时候关闭layer.tips弹窗

这时候又有个问题了，这个监听鼠标点击事件在 js 事件等级是最低的，就是说，我点击更多后展示弹窗，展示完弹窗后再执行其他的关联到这个点击事件的其他操作，执行完所有更这个点击事件相关的逻辑才到鼠标监听事件，这就出现了一种情况， 我点完更多，刚弹窗又被鼠标监听给关闭了，这就很麻烦了，问题在鼠标监听上，我可以再弄一个变量用来逻辑判断啊， 上面 tips.index是弹窗的索引， 也就是说它是一个整数，我点击更多的时候它会将这个索引赋值给全局变量 tips_index,这时候我再赋值一个控制关闭弹窗的变量一个小于这个索引值的数，然后改一下监听事件，每次监听点击就给这个控制关闭弹窗的变量+1， 如果相等就不关闭，如果不相等就关闭这个弹窗不就行了吗

//监听工具条

table.on('tool(data_table)', function(obj){

//当点击table 表格中的更多按钮的时候触发这个事件

if(obj.event === 'more'){

var html = "input value = 'aaaa'"

// 获取弹窗index

tips_index = layer.tips(html, this,{tips: [1, '#ffffff'],area: ['130px', '150px'], time: 0})

close_tips = tips_index-1

}

}

//定义tips 弹窗index

var tips_index = ""

var close_tips = ""

//监听鼠标点击事件

window.addEventListener('click', function() {

//关闭弹窗

close_tips += 1

if (close_tips != tips_index){

layer.close(tips_index)

}

}, false);

终于完了，看下效果

layui table 表格 多个操作按钮使用记录 相关文章

网页锁屏

基于layui的锁屏功能 //锁屏 function lockPage() { layer.open({ title: false, type: 1, content: $("#lock-box"), closeBtn: 0, shade: 0.9 }); }; $("#SP").on("click", function() { window.sessionStorage.setItem("lockcms", true); lockPage(); });

layui 表格初始化

layui 表格初始化 1 table.render({ 2 title: '待办', 3 //skin: 'row', 4 elem: '#currentTableId', 5 url: '/YueBao/GetDaiBan', 6 toolbar: '#toolbarDemo', height: 'full-200', 7 defaultToolbar: ['filter', 'exports', 'print', { 8 title: '提示', 9

解决WCF跨域问题,及DataTable参数问题

上一篇章配置了如何可以使用http方式调用wcf,在C#代码中可以使用HttpClient,HttpWebRequest等web类进行请求 但是如果直接使用js发送ajax请求的时候却会出现跨域问题 首先是web.config中的system.serviceModel节点配置 如下: system.serviceModel services se

SQL Server 删除重复记录

有张表格之前没有设计关键字段的唯一约束，导致有时候执行插入操作时不小心执行了多次就出现了重复记录，后面重新加入唯一约束，由于已经有了重复记录，无法添加，需要先删除重复记录。 看了网上的一些删除重复记录的方法(好像都是转载于同一篇文章，至少看

C#--List集合转DataTable

/// summary /// List集合转DataTable /// /summary /// typeparam name="T"实体类型/typeparam /// param name="list"传入集合/param /// returns返回datatable结果/returns public static DataTable ListToTableT(ListT list) { Type tp = typeof(T); Prop

jquery拖拽排序，针对后台列表table进行拖拽排序(Echart不刷新页面，多语言切换下的地图数据重新加载，api请求数据加载

Echart不刷新页面，多语言切换下的地图数据重新加载，api请求数据加载，soketed数据实时加载 echarts图表重新赋值数据，图表显示会存在一部分原来的数据，看起来怪怪的，echarts呈现的数据刷新不完全/echarts画图时tooltip不会更新 解决如下 myChart.clear()

Lua元表应用举例：配置表格转为Lua配置表

把配置表格.xlsx数据转为Lua配置表，其实就是把表格数据用Lua写一遍，这里的实现重点就是setmetatable设置元表。 以下以表格student_info.xlsx举例，展示对应Lua配置表内容： 表格内容： student_info.xlsx内容 对应Lua配置表起名为student_info.lua，内容如

SpringMVC返回对象类型报错HttpMessageNotWritableException: No converter found for return value of type

转载自：https://blog.csdn.net/feinifi/article/details/81070108 通常情况下，我们在用springmvc时，会直接返回查询到的分页对象。这时候，如果不做默认配置，会报出如题所示的错误： [WARN ] 2018-07-16 19:00:20 org.springframework.web.servlet.mvc.su

layui按钮知识

本课内容: 1.普通按钮类:layui-btn 基础类(别的各种按钮都是在这个类后面添加类) 2.按钮主题:在layui-btn后面加按钮主题的类 名称 组合 原始 class="layui-btn layui-btn-primary" 默认 class="layui-btn" 百搭 class="layui-btn layui-btn-normal" 暖色 cla

layui的栅格响应式布局

常用类 一.布局容器 1.将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。 2.将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应 div class="layui-c