简单使用layui完成表格

开发工具与关键技术：Visual Studio 2015  layui
作者：孙水兵
撰写时间：2019年5月 15日

一、layui及数据表格的简介
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，而且门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋。
layui的兼容性：layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。
Layui的数据表格（table 模块）：在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
layui官网：www.layui.com （可下载）

二、使用layui完成数据表格
需达到的目标：表格的第一行为表头，第一列为单选框，第二列为表格中数据的序号，第三列为学院的名称，第四列为学院代号，第五列为操作列，可以对对应的那行数据进行操作。这样做的好处是可以更方便、更直观的对数据进行操作。

1． linq的前期工作
由于控制器中需要用到linq从数据库中将数据查询出来，因此，使用linq的前期工作是必不可少的，而linq的前期工作也很简单，只需在控制器最上端引入Models，实例化Models。具体可以参考我的linq方面的文章。

2.代码
HTML代码
HTML代码很简单，最主要的就是一个table标签，其中存在数据表格id，其中的lay-filter是事件过滤器，他一般是用于监听特定的自定义事件。

    <div class="row"><div class="col"> <table id="tabAcademe" lay-filter="tabAcademe"></table></div></div>

JS代码
首先，得引用layui的JS文件，虽然layui部分组件依赖jQuery，Layui部分组件依赖jQuery（比如layer），但是并不用去额外加载jQuery。因为layui已经将jQuery最稳定的一个版本改为Layui的内部模块，当你去使用layer的时候，它会首先判断你的页面是否已经引入了jQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。这里由于其他地方用到的，所以引用的jQuery文件

    <script src="~/Plugins/jquery-3.2.1.min.js"></script><script src="~/Plugins/layui/layui.js"></script>

之后，在JS中先声明一些全局变量方便后面引用，然后在jQuery read事件中加载layui中的数据表格模块（table模块），然后用layuiTable（表格模块名）接收layui模块。其中layer模块是其他地方需要的，数据表格不需要加载，加载其他模块也是类似，使用layui.use(mods, callback)的方法，如果只需加载一个模块是不需要使用数组的，直接加载就可。加载完数据模块之后，需要初始化数据表格（形式：表格名=接收layui模块的变量.render({});）。其中的elem是表格的id（HTML中的）；url:查询出数据的路径；cols:表头，其中的type是那一列的类型，radio是单选框，number是序号列等等，注意，其中的filed中的需要和控制器中查询出来的一致，以便查询出来回填数据，隐藏列一般是数据的主键ID，为的是后续更好对该数据进行操作；page:开启分页，limit: 指定每页显示的条数， limits: 每页条数的选择项。

    var layer, layuiTable;//保存layui模块以便全局使用var tabAcademe;//存放表格$(function () {//layui模块的使用layui.use(['table', 'layer'], function (args) {layer = layui.layer;  layuiTable = layui.table;//表格初始化tabAcademe = layuiTable.render({elem: '#tabAcademe',url: '/SystemManagement/CollegeInfor/SelectAcademeAll', //数据接口cols: [[//表头{ type: 'radio', fixed: 'left' },//单选框列,fixed:'left' 将列固定在左边{ type: 'numbers', title: '序号' },//序号列，title设定标题名称{ field: 'AcademeID', title: 'AcademeID', hide: true },//hide:true 隐藏列{ field: 'AcademeName', title: '学院名称' },{ field: 'AcademeCode', title: '学院代号' },{ title: '操作', templet: setOperate, width: 160, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式]], page: {//开启分页limit: 10,//指定每页显示的条数limits: [5, 10, 15, 20, 25, 30, 35, 40, 50]//每页条数的选择项},});});});

表格的监听事件，写在layui加载模块之中，监听单击事件形式为：表格模块名.on(‘row(表格名)’，function（）{})；监听双击事件将row改为rowDouble，然后获取选中的数据，之后的标中选中样式和单击选单选框或者单击选中/取消复选框就是固定的了

    layuiTable.on('row(tabAcademe)', function (obj) { //监听单击事件（双击事件为rowDouble)var data = obj.data;//获取点击数据 console.logobj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); //标注选中样式 obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();//****单击选中单选框 // obj.tr.find('div.layui-unselect.layui-from-checkbox')[0].click(); //****单击选中/取消复选框});

控制器代码
需用到的两个实体类LayuiTablePage和LayuiTableData：
LayuiTablePage：用来分页，其中page 代表当前页码，limit 代表每页数据量。然后用方法计算分页开始的序号和分页结束的序号。如第一页的页码为1，若10条每页，limit为10，分页开始序号 = （1-1）10 = 0；结束序号 = 110-1 = 9。
LayuiTableData：封装数据的方法，将查询到的数据封装并将其返回给视图。
LayuiTablePage

    /// <summary>/// layui table组件分页请求数据封装/// </summary>public class LayuiTablePage{/// <summary>/// page 代表当前页码/// </summary>public int page { get; set; }/// <summary>/// limit 代表每页数据量/// </summary>public int limit { get; set; }//方法/// <summary>///分页开始序号/// </summary>public int GetStartIndex(){return (page - 1) * limit;}/// <summary>/// 分页结束序号/// </summary>public int GetEndIndex(){return page * limit - 1;}}

LayuiTableData

 public class LayuiTableData<T>{/// <summary>/// 数据状态码——可以不设置/// </summary>public int code { get; set; }/// <summary>/// 状态信息——可以不设置/// </summary>public string msg { get; set; }/// <summary>/// 总行数——必须/// </summary>public int count { get; set; }/// <summary>/// 数据——必须/// </summary>public List<T>data { get; set; }}

先创建一个方法，引用LayuiTablePage，然后用linq查询，从数据库中将需要的数据查出，注意：分页的时候要使用orderby进行排序，可以根据主键ID排序，然后计算查询出多少条数据，之后对所有数据分页，之后用LayuiTableData方法将数据封装，最后一以Json格式将数据返回给页面。

  public ActionResult SelectAcademeAll(LayuiTablePage layuiTablePage){var linq = from tbAcademe in myModel.SYS_Academeorderby tbAcademe.AcademeIDselect tbAcademe; int totalRow = linq.Count();//查询SYS_Academe的总行数//分页查询SYS_Academe的数据List<SYS_Academe> list = linq.Skip(layuiTablePage.GetStartIndex()).Take(layuiTablePage.limit).ToList();//封装layui table数据LayuiTableData<SYS_Academe> layuiTableData = new LayuiTableData<SYS_Academe>{   count = totalRow,data = list,  }; return Json(layuiTableData, JsonRequestBehavior.AllowGet);}

简单使用layui完成表格相关推荐

layui一个表格中怎么接两个接口的值_layer学习笔记之table表格引入数据实现分页...
LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的 ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
Layui 数据表格合计
Lay-ui数据表格合计实现基础的数据表格合计获取合计数据修改合计数据合计后计算平均值去除小数合计所有数据(有分页) 编辑后重新合计总代码阅读提示:本人萌新一枚,写此博客仅仅是记录一下 ...
layui数据表格中导出所有数据的简易解决办法
layui数据表格中导出所有数据的简易解决办法官方文档的困惑解决办法官方文档的困惑首先要说明的是:layui在 table 的工具栏内置了数据导出按钮,如果你是用它内置的导出按钮来导出数据,是 ...
layui动态表格下拉菜单
解决layui动态表格内插入下拉菜单简单方法简单来讲就是在table.render里的done里获取该列表格创建select插入节点,再将res数据拼接上去.layuiselect模块加载进表格会被 ...
layui怎么表格中显示图片
layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了如果你想了解更多关于layui的知识,可以点击:layui教程 1.jsp代码 <div class=&quo ...
LayUI数据表格的使用指南
LayUI是现在比较流行的一款前端框架,数据表格也是后台管理中很长用到的工具了. 最近做项目就用到了,项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮.之后就写了一 ...
解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...
在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...

简单使用layui完成表格

简单使用layui完成表格相关推荐

最新文章

热门文章