layui表格设计以及数据初始化详解


Posted in Javascript onOctober 26, 2019

开发工具与关键技术: VisualStudio 2015 mvc

数据表格,在mvc项目中很多地方都会见到,一般做mvc项目我们所写的数据表格都不用自己纯敲的,因为纯敲代码量比较大且麻烦,所以我们都是用插件,以下面的为例,这是我写的layui表格设计以及数据初始化。

我们写数据表格之前,需要引用这个layui的插件,引用完后接下来就是,我们需要一个table来装数据,table里面有一些layui插件定义的元素。

如下图所示:

layui表格设计以及数据初始化详解

这个插件我们可以模块化使用,我们只用到table这一块,所以我们先需要加载他模块化的方法,加载完成就到表格初始化,表格初始化这一块,首先是上面说到的table里的ID,我们初始化表格需要声明这个ID变量,然后将他赋值给layuiTable,让他初始化,初始化后就他所配置的一些参数,第一个参数elem: 绑定容器,第二个url:路径,表格数据的接口,第三个cols:这个就是设置表头了,设置表头这里是自定义的,他有一些参数 ,这里我就说一下常用的: type:设定列的类型,有可选值,常用的是numbers序号列,checkbox复选框列,radio单选框列;field:设置字段名,这个根据数据库表字段命名设置;title:设置标题名称;hide:设置为隐藏列;templet:自定义列模板;这个是员工信息表,数据库表只有一张,下面就是我根据数据库字段设计的表头。

详情如下图所示:

layui表格设计以及数据初始化详解

前面是表头设计以及一些数据表格的知识,这部分完成后,我们就要对设计好的表格进行数据的初始化,数据初始化这部分在控制器完成,这主要涉及到查询跟封装table数据,因为数据库只有一张表,所以这里只需要用到单表查询,首先是根据tbemployee这张表查询表的总行数,Count: 查询有多少条数据;然后也是单表查询,将表里的所有数据查出来,toList:查询多条数据并转化为List,这两个查询完了之后,就到封装table数据,在封装数据之前我们还需要一个实体类LayuiTableData,这个类用来接收数据,封装这里直接赋值这张表,然后把上面查询出来的数据放到封装方法里,最后return返回就完成了。

代码如下图所示:

layui表格设计以及数据初始化详解

这个layui数据表格,我们要做的只有配置一下参数,设计表头以及查询数据,其他的都只要插件就能实现了,所以很多时候做大的项目都能少写很多代码也能节省时间。最后我们测试一下效果。

如下图所示:

layui表格设计以及数据初始化详解

以上这篇layui表格设计以及数据初始化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
js实现产品缩略图效果
Mar 10 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
LayUi数据表格自定义赋值方式
Oct 26 #Javascript
layui实现数据表格自定义数据项
Oct 26 #Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 #Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 #Javascript
js前端如何写一个精确的倒计时代码
Oct 25 #Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 #Javascript
layui实现数据表格隐藏列的示例
Oct 25 #Javascript
You might like
PHP新手入门学习方法
2011/05/08 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Django开发的简易留言板案例详解
2018/12/04 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
外贸业务员岗位职责
2013/11/24 职场文书
乔迁之喜主持词
2014/03/27 职场文书
老兵退伍标语
2014/10/07 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书