layui动态显示/隐藏表格中的操作按钮

2022-10-21前端开发

702

在layui中我们可能会有需要在执行完某一操作后使操作框变得不可选或者显示其他内容来进一步操作。例如：

这时我们就需要利用到layui中的一些语法：

<script type="text/html" id="对应操作栏的id">
	{{#  if(条件){ }}	
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="事件名称">显示操作名称</a> 
    {{#  } }}
</script>

其中layui表格中的数据数组为 d ,可以通过d.字段名来进行条件判断例如：

<script type="text/html" id="roleBar">
    {{#  if(d.checkState == 0){ }}
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="unPass">未审批</a>  
    {{#  } }} 
    {{#  if(d.checkState != 0){ }}
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="pass">已审批</a>
    {{#  } }}
</script>

The End

layui 按钮操作

layui实现图片上传成功后回显点击放大图片功能

layui实现图片上传成功后回显点击放大图片功能，html代码部分： !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...

2025-09-06 前端开发

202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果，最终效果如下图所示：实现代码如下，在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...

2025-09-04 前端开发

112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考

我们在用到layui时候，需要点击文本输入框调起弹出选择框并选择内容，这个要怎么操作呢？以下两种方法可以参考： 1、点击名称，弹出信息弹框，选择表格中的某一行，实现效果如下： html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...

2025-09-02 前端开发

167

Layui treetable复选框联动解决方案

我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢？实现的最终效果如下： 1. 在当前HTML文档checked监听函数中增加以下代码： //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...

2025-06-06 前端开发

163

Layui中实现开关按钮的效果

按钮代码如下： {field: 'state', title: '状态', width: 85, templet: function (data) { if (data.state == 0) { return 'div input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data...

2025-04-13 前端开发

112

layui.open属性打开一个弹出层

核心方法 var index = layer.open({ type : 2, title : title, maxmin : true, offset: '100px', area : [ '600px', '500px' ], content : prefix + url// iframe的url }); layer.full(index); //最小化 type - 基本层类类型：Number，默认：0 layer提供了5...

2025-02-25 前端开发

相关推荐

layui实现图片上传成功后回显点击放大图片功能

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考

Layui treetable复选框联动解决方案

Layui中实现开关按钮的效果

layui.open属性打开一个弹出层

热门文章

热门精品源码

最新VIP资源