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 相关文章推荐
jQuery中click事件用法实例
Dec 26 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
常用的javascript设计模式
Jan 11 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
JavaScript实现京东放大镜效果
Dec 03 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 设计模式之观察者模式介绍
2012/02/22 PHP
深入php self与$this的详解
2013/06/08 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
js如何打印object对象
2015/10/16 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python中%r和%s的详解及区别
2017/03/16 Python
如何在python中使用selenium的示例
2017/12/26 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
服务之星获奖感言
2014/01/21 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
调研汇报材料范文
2014/08/17 职场文书
自主招生自荐信格式
2015/03/04 职场文书
毕业证明模板
2015/06/19 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
MongoDB支持的索引类型
2022/04/11 MongoDB
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers