Layui数据表格之自定义模板
开发工具与关键技术:VS、layui
作者:陆桂超
撰写时间:2019年6月4日
Layui插件是现在比较主流的一个前端 UI 框架,很适合界面的快速开发。Layui里面包含了很多个模块,这里我要讲解的是数据表格模块中的自定义模板。数据表格模块作为一个大模块,它里面自然少不了各个大大小小的模板,自定义模板作为数据表格模块的成员之一,它的作用是对表格进行个性化操作。以达到自己所需要的效果。这里我通过一个小例子来简述数据模块的使用。我用到的开发工具是VS,编程语言是C#,和MVC开发框架。
1、 使用layui之前少不了的就是引用layui的css和js的脚本文件。
2、 把layui引进后,像这样如果是使用数据表格模块的,要初始化表格。
layui.use([‘模块1’, ‘模块2’,’…….’], function () {
//表格初始化
表格名称 = layuiTable.render({
})
});
模块1和模块2就是添加模块名称的,当然,根据实际情况还可以添加更多的模块。
真实项目模块使用如下截图。
打了红色下划线的就是数据表的自定义操作列,templet是函数方法。
3、
除了在初始化中添加templet操作列,还需要根据实际情况写一个操作列的函数。我所说的小例子就是在这个函数里。这个例子就是启用或作废数据。通过点击自定义操作列的作废或启用按钮实现对数据的控制。
//自定义“操作”列
function setOperate(data) {var toVoidNo =
data.ToVoidNo;//是否有效
console.log(data);var userTypeId =
data.UserTypeID;//用户类型id
var btns = "";if (toVoidNo) {btns += '<button
type=“button” class=“layui-btn layui-btn-warm layui-btn-xs”
οnclick=switchEnable(’ + userTypeId + ‘,false)>作废’;
} else {btns += '<button
type=“button” class=“layui-btn layui-btn-xs
layui-btn-normal” οnclick=switchEnable(’ + userTypeId + ‘,true)>启用’;
}return btns;}自定义操作列可以放置HTML内容,比如我在这里放了button按钮。所谓自定义操作列就是根据自己所需实行自定义布局表格。//作废或启用权限设置 下一步到控制器写保存都数据库function
switchEnable(userTypeId, toVoidNo) {
var strMsg = "确定";strMsg += toVoidNo ? "启用" : "作废";strMsg += "该用户类型?";layer.confirm(strMsg, {icon: 3,btn: ['确定', '取消']}, function (index) {});}toVoidNo的值为true和false。通过获取当前行的toVoidNo值,如果是true,说明当前数据处于启动状态,这时就显示作废按钮。如果当前数据的toVoidNo值为false,说明该数据为停用状态,这时就显示启动按钮,通过点击启动数据。完成这一功能还需要在控制器写相关的代码。
ReturnJsonVo returnJson = new ReturnJsonVo();
returnJson.State = false;try{//先查询出userTypeId对应的数据SYS_UserType dbUserType = (from tbUserType in
myModel.SYS_UserType
where
tbUserType.UserTypeID == userTypeId
select
tbUserType).Single();
//修改数据dbUserType.ToVoidNo = toVoidNo;//保存修改myModel.Entry(dbUserType).State
= EntityState.Modified;
上图代码就是改变数据库ToVoidNo值的。
通过以上的这个小例子,除了可以学到如何使用数据表格的操作列模板,还可以学到如何停用或启用数据库的数据。
Layui数据表格之自定义模板相关推荐
- Layui数据表格中使用模板引擎
1.layui对数据表格中某一列做处理时,比如时间格式化: 图中d.ghrq,d就是当前行数据: 2.layui数据表格工具条按钮需要通过某一列的值去判断是否显示这个按钮 效果: 也可以使用layui ...
- Layui 数据表格toolbar中使用模板引擎templet,当前系统时间比较问题
在layui数据表格展现中,使用toolbar,由于权限的控制,需要使用templet模板引擎语法进行控制,控制逻辑为只有大于当前时间的记录才能撤销. 效果图如下:(当前时间为2018-06-06) ...
- php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等 查看详情 {{# if (d.hotcake === '超级爆款') ...
- layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上,鼠标悬浮,显示所有文字内容(修改源码)...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了 问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
- LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例 做出数据表格 示例根据官网表格展示 在layui官网 数据表格示例中 https://www.layui.c ...
- 5. Layui数据表格的快速使用
飘向天边,我们慢慢明白,有些告别,就是最后一面.--<云边有个小卖部> Layui数据表格的快速使用 1.什么是数据表格 2.方法渲染 3.自动渲染 4.把静态表格转换为动态 1.什么是数 ...
- layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题 加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
- LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架,数据表格也是后台管理中很长用到的工具了. 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮.之后就写了一 ...
- layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)
表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
最新文章
- 16.04linux 安装微信,Ubuntu 16.04安装微信的过程记录
- C++知识:__stdcall、__cdcel和__fastcall三者的区别
- rest-framework 版本控制
- 【WEB安全】flask不出网回显方式
- Linux(三)——mysql服务
- inventor扳手制作视频_安全的安全帽是怎么制作出来的?
- php加速缓存器opcache,apc,xcache,eAccelerator
- C++之左值引用与右值引用
- 地图学(何宗宜版)知识点整理
- laravel框架的下载与安装
- Java第十二周作业
- ubuntu DNS修改
- 硬件工程师入门基础知识(一)基础元器件认识(二)
- 如何在Windbg中安装mona
- c语言烟花发射原理,烟花发射原理
- 关于git的使用(十五)------Rebase
- matlab 自定义的snr,Matlab信号添加噪声及信噪比SNR的计算
- CAD用多义线动态画矩形框
- WS-Discovery(网络服务动态发现)协议再解读
- MYeclipse 或 eclipse中几种导入jar包方式的区别
热门文章
- 内网沟通软件都有哪些?
- [CQOI2010] 鼹鼠
- [vue+elementUI+echarts]echart折线图展示后台传来的数据
- [Python练习-文件] 多目录下的字幕vtt转srt
- winds主机部署zabbix_agent
- 中创算力员工生日会︱夏末初秋,与你一同庆生
- 微信怎么更改绑定的游戏服务器,注意啦!微信号可以改了!这里还有一个新功能...
- 利用LightGBM实现天气变化的时间序列预测
- 面试时谈得很好,事后没有电话给通知,这个时候应该怎么办?
- C语言oj罚时计算,罚时计算器(字符处理,结构,指针数组).c