关于layui toolbar和template的结合使用方法

目的：为了完成表格操作列能够自适应表格行数据的某些条件而做出的变化（比如：表格单双行数据展示不同的操作栏等）

在操作栏定义一个toolbar （后面的为我们要编写的模板ID），js 就完成了。

html代码：

定义操作模板，这里采用的是Layui的模板语法，具体怎么编写可以参考：https://www.layui.com/doc/modules/laytpl.html

这个模板的作用是：

d为迭代表格行数据的形参，d.fileType表示为表格数据一行的某列数据；所以加在一起表示的是当某列值等于txt或者jpg展示上面操作列，否则展示下面的操作列。

赞 (0)

相关推荐

  • 使用layui 的layedit定义自己的toolbar方法

    官方文档:http://www.layui.com/demo/layedit.html 官网文档目前是不支持layedit扩展式的. 自己手动实现扩展,定义自己的样式toolbar: 1.样式代码分析 分析页面初始化后加载的样式. layeditIndex=layedit.build('noticeMatterDigest',{tool: ['left', 'center', 'right','|'],height: 120}); 2.根据分析的样式进行js的追加 代码需要写在layui.use

  • 关于layui toolbar和template的结合使用方法

    目的:为了完成表格操作列能够自适应表格行数据的某些条件而做出的变化(比如:表格单双行数据展示不同的操作栏等) 在操作栏定义一个toolbar (后面的为我们要编写的模板ID),js 就完成了. html代码: 定义操作模板,这里采用的是Layui的模板语法,具体怎么编写可以参考:https://www.layui.com/doc/modules/laytpl.html 这个模板的作用是: d为迭代表格行数据的形参,d.fileType表示为表格数据一行的某列数据:所以加在一起表示的是当某列值等于

  • layui框架与SSM前后台交互的方法

    采用layui前台框架实现前后台交互,数据分页显示以及删除操作,具体方式如下: 一.数据分页显示 1.前端 (1)html页面 <!--轮播数据分页显示--> <table class="layui-hide" id="content_lbt" lay-filter="content_lbt_filter"></table> (2)请求渲染数据 $(function() { /*轮播数据分页显示*/ layui

  • Android ToolBar 修改边距的实现方法

    Android ToolBar 修改边距的实现方法

    Android ToolBar 修改边距的实现方法 效果图: 实现方式: <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/menuToolbar" android:l

  • knockoutjs动态加载外部的file作为component中的template数据源的实现方法

    knockoutjs动态加载外部的file作为component中的template数据源的实现方法

    玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template,比如下面这样: ko.components.register('message-editor', { viewModel: function(){}, template:"" }); 很显然,viewmodel就是function函数区,而template就是模板区,然后通过register函数将component注册到kn

  • layui table数据修改的回显方法

    实现的样式给你们看一波 点击这锅按钮 其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // 获得 lay-event 对应的值(也可以是表头的event 参数对应的值) var tr = obj.tr; // 获得当前行 tr 的DOM对象 if (l

  • layui多iframe页面控制定时器运行的方法

    我们web页面中有几个页面是有定时器在刷新的,并且查询的内容还不少,给服务器造成了不少压力.这些接口已经尽量优化,能放到缓存的都放到缓存.然后主管又提了一个需求,就是我们使用的是layui多标签iframe框架,当不在某个页面的iframe时不要执行定时器.我觉得这是一个挺不错的提议,而且实现起来也不难. 粗略地考虑有两个思路,一个是点击标签时开启或关闭定时器,一个是定时器执行时判断所在的iframe是否隐藏,如果隐藏则不执行定时器的方法.第一种维护麻烦,难免有错漏的情况,而且和别的iframe

  • 在layui中select更改后生效的方法

    在layui中重新渲染表单这一步比较重要,部分表单元素需要重新渲染后才能生效,例如select 建议在js中放入以下function: //重新渲染表单 function renderForm(){ layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.render(); }); } 在每次操作部分表单元素后都进行一次调用 以上这篇在layui中select更改后生效的方法就是小编分

  • layui select 禁止点击的实现方法

    直接上代码啦 注意事项: 1. 必须写 layui.use([form]) 2. 先把属性设置为disabled 3. 再form.render()一下 以上这篇layui select 禁止点击的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在layui.use 中自定义 function 的正确方法

    适用于: obj.click() 行内 onclick javascript:函数名() 示例代码: <html> <head> <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" media="all"> </head> <body> <a class="

  • layui使用templet格式化表格数据的方法

    增加js /*---------------------格式化时间开始--------------------------*/ //对Date的扩展,将 Date 转化为指定格式的String //月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, //年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) //例子: //(new Date()).Format("yyyy-MM-dd hh:mm:ss.S")

随机推荐