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

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

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

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

如下图所示：

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

详情如下图所示：

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

代码如下图所示：

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

如下图所示：

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

赞 (0)

相关推荐

  • Layui事件监听的实现(表单和数据表格)

    一.表单的事件监听 先介绍一下几个属性的用法 1.lay-filter 事件过滤器 相当于选择器,layui的专属选择器 2.lay-verify 验证属性 属性值可以是 :required必填项, phone手机号,email邮箱,url网址,number数字,date日期,identity身份证.这个相当于正则判断,当然你也可以定义自己的正则,做一些复杂的判断,例如: <input type="text" lay-verify="required">

  • layui实现数据表格自定义数据项

    layui是一个很适合后台开发人员用的一个前端框架,界面简洁,功能丰富. 大家知道,系统一般都有数据表格及分页功能,尤其在后台管理系统之类,这类场景更是很多,layui也为我们提供了对应的支持,我这里要说的是,layui对异步返回的数据默认是有一套格式的,像下面这样 { code: 0, msg: "", count: 1000, data: [] } 字段的别名我们可以通过属性去配置,详情请参考layui官方文档 重点来啦,layui默认支持一级数据结果,像下面这种服务端返回的数据结

  • Layui数据表格 前后端json数据接收的方法

    先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量

  • 对layui数据表格动态cols(字段)动态变化详解

    如搜索查询时,常会遇到按日期时间段查询,并显示查询的每个日期的数据,后台拼装数据此处不讨论. 把表格渲染封装在函数里面,cols_arr是传入的字段数组 function tableRender(cols_arr){ table.render({ elem: '#demo' , url: 请求地址 //数据接口 , method: 'post' , page: true //开启分页 , cols: cols_arr , id: 'demo' , limit: 10 , limits: [10,

  • Layui数据表格之获取表格中所有的数据方法

    数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据. 2.将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数. 3.获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可,参照下面的代码,获取表格中的所有数据就是获取tableContent中的数据. // 存放数据表格中的数据的对象数组tableC

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

    开发工具与关键技术: VisualStudio 2015 mvc 数据表格,在mvc项目中很多地方都会见到,一般做mvc项目我们所写的数据表格都不用自己纯敲的,因为纯敲代码量比较大且麻烦,所以我们都是用插件,以下面的为例,这是我写的layui表格设计以及数据初始化. 我们写数据表格之前,需要引用这个layui的插件,引用完后接下来就是,我们需要一个table来装数据,table里面有一些layui插件定义的元素. 如下图所示: 这个插件我们可以模块化使用,我们只用到table这一块,所以我们先需

  • javascript动态创建表格及添加数据实例详解

    本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态

  • layui框架table 数据表格的方法级渲染详解

    如下所示: <table class="layui-table" lay-filter="demo11" id="test11"></table> //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field

  • layui写后台表格思路和赋值用法详解

    layui.form 模块用法总结. 基于layui做 表单 赋值 取值 思路 一. 初始一个方法用来给弹窗赋值,一种赋值,是按数据赋值,一种是清空数据 function initContorl (data){ //传数据 赋值为数组 不传数据赋值为空 if(data){ form.val("control",data) }else { form.val("control", { "name1": "", ,"nam

  • C/C++表格组件Qt TableWidget应用详解

    C/C++表格组件Qt TableWidget应用详解

    TableWidget 表格结构组件,该组件可以看作是TreeWidget树形组件的高级版,表格组件相比于树结构组件灵活性更高,不仅提供了输出展示二维表格功能,还可以直接对表格元素直接进行编辑与修改操作,表格结构分为表头,表中数据两部分,表格结构可看作一个二维数组,通过数组行列即可锁定特定元素,如下代码是针对表格结构的基本使用方法,分别实现了表头数据的初始化,元素的插入等基本操作. 在研究Widget组件之前先来熟悉一下View组件,View组件相对Widget组件来说只是不具备编辑功能,其他功

  • 关于Java变量的声明、内存分配及初始化详解

    实例如下: class Person { String name; int age; void talk() { System.out.println("我是: "+name+", 今年: "+age+"岁"); } } public class TestJava2_1 { public static void main(String args[]) { Person p; if (p == null) { p = new Person(); }

  • Bootstrap表格和栅格分页实例详解

    Bootstrap表格和栅格分页实例详解

    拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCTYPE html> <html> <head lang="zh-cn"> <title>产品列表</title> <meta charset="utf-" /> <meta http-equiv=&qu

  • MySQL 去除重复数据实例详解

    MySQL 去除重复数据实例详解 有两个意义上的重复记录,一是完全重复的记录,也即所有字段均都重复,二是部分字段重复的记录.对于第一种重复,比较容易解决,只需在查询语句中使用distinct关键字去重,几乎所有数据库系统都支持distinct操作.发生这种重复的原因主要是表设计不周,通过给表增加主键或唯一索引列即可避免. select distinct * from t; 对于第二类重复问题,通常要求查询出重复记录中的任一条记录.假设表t有id,name,address三个字段,id是主键,有重

  • 微信小程序后台解密用户数据实例详解

     微信小程序后台解密用户数据实例详解 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html openId : 用户在当前小程序的唯一标识 因为最近根据API调用https://api.weixin.qq.com/sns/jscode2session所以需要配置以下服务,但是官方是不赞成这种做法的, 而且最近把在服务器配置的方法给关闭了.也就是说要获取用户openid,地区等信息只能在后台获取. 一下是官方的

  • C++ 静态成员的类内初始化详解及实例代码

    C++ 静态成员的类内初始化详解及实例代码 一般来说,关于C++类静态成员的初始化,并不会让人感到难以理解,但是提到C++ 静态成员的"类内初始化"那就容易迷糊了. 我们来看如下代码: //example.h #include<iostream> #include<vector> using namespace std; class Example{ public: static double rate = 6.5; static const int vecSi

随机推荐