layui应用之表格篇

前言：个人转码小说网站：友书-绿色、纯净、无广告，欢迎广大小说阅读爱好者同行来本网站看小说，书友交流群：580462139（群主及管理均为资深90后程序猿哦）

正文：先来张效果图镇楼

如图，利用layui前端框架我们可以很简单的做出带分页的数据表格，并且表格支持表格内排序

前端代码：

   <table class="layui-table" lay-data="{url:'GetBookList', method: 'post', page:true, id:'idTest'}" lay-filter="demo"><thead><tr><th lay-data="{ field:'BookNo', title: 'ID',sort: true, width: '6%', sort: true, fixed: 'left', align: 'center' }">ID</th><th lay-data="{field:'TypeName', width:'6%', sort: true,align: 'center'}">类别</th><th lay-data="{field:'AuthorName', width:'8%', sort: true, align: 'center'}">作者</th><th lay-data="{field:'BookName', width:'8%',sort: true, align: 'center'}">书名</th><th lay-data="{field:'Intro', width:'22%',sort: true, align: 'center'}">简介</th><th lay-data="{field:'WordCount', width:'6%', sort: true,align: 'center'}">字数</th><th lay-data="{field:'ClickCount', width:'6%',sort: true, align: 'center'}">点击量</th><th lay-data="{field:'DownloadCount', width:'6%',sort: true, align: 'center'}">下载量</th><th lay-data="{field:'IsFinish', width:'8%',sort: true, align: 'center'}">完结状态</th><th lay-data="{ field: 'IsDelete', title: '是否上架', width: '8%',sort: true, templet: '#checkboxTpl', unresize: true, align: 'center' }">是否上架</th><th lay-data="{fixed: 'right', width:'8%', align:'center', toolbar: '#barDemo'}">操作</th></tr></thead></table><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a></script><script>layui.use('table', function () {var table = layui.table, form = layui.form;//监听表格复选框选择table.on('checkbox(demo)', function (obj) {console.log(obj)});//监听工具条table.on('tool(demo)', function (obj) {var data = obj.data;if (obj.event === 'detail') {//layer.msg('ID：' + data.BookNo + ' 的查看操作');layer.open({title: ['查看图书', 'font-size:18px;'],//titletype: 2,//入场方式area: ['80%', '80%'],//页面比列content: 'ViewBookInfo?BookId=' + data.BookId});} else if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {obj.del();layer.close(index);});} else if (obj.event === 'edit') {//layer.alert('编辑行：<br>' + JSON.stringify(data))layer.open({title: ['编辑图书', 'font-size:18px;'],//titletype: 2,//入场方式area: ['80%', '80%'],//页面比列content: 'EditBookInfo?BookId=' + data.BookId});}});//监听上下架操作form.on('checkbox(lockDemo)', function (obj) {$.post("ChangeBookStatus", { BookId: obj.value }, null, "Json");});//监听是否免费操作form.on('checkbox(ChkIsFree)', function (obj) {$.post("ChangeIsFreeStatus", { BookId: obj.value }, null, "Json");});var $ = layui.$, active = {reload: function () {var demoReload = $('#demoReload').val();var selected = $("#selectType").val();if (selected != undefined && selected != null && selected != ""&&selected!=0) {demoReload = demoReload + "selected:" + selected;}//执行重载table.reload('idTest', {url: 'GetBookList', where: {data: demoReload}});}};//监听搜索点击按钮$('.demoTable .layui-btn').on('click', function () {var type = $(this).data('type');active[type] ? active[type].call(this) : '';});});</script>

Ps:表格请求数据方式为ajax-post请求 url："GetBookList" 表示所请求ajax的后台方法，page：true表示开启分页

后台控制器方法：

  [HttpPost]public ActionResult GetBookList(){try{//接收前端传来的分页参数PageIndex = Convert.ToInt32(Request.Form["page"]);PageSize = Convert.ToInt32(Request.Form["limit"]);var SearchText = Request.Form["data"] == null ? "" : Request.Form["data"];var resData = new BookBLL().GetBookListPage(PageIndex, PageSize, SearchText);BookRes<VM_Book> result = new BookRes<VM_Book>();result.code = 0;result.msg = "";result.count = resData.count;result.data = resData.data;return Json(result, JsonRequestBehavior.AllowGet);}catch (Exception ex){BookRes<VM_Book> result = new BookRes<VM_Book>();result.code = 404;result.msg = "Error";result.count = 0;result.data = null;return Json(result, JsonRequestBehavior.AllowGet);}}

参阅layui官方文档，前端需要的返回值为：

     code：状态码msg：返回消息count：数据总行数（分页用）data：返回的数据list集合

数据查询BLL层代码：

（Ps:本人一直做asp.net开发，故mvc、linq相关技能很差，仅处于满足功能阶段，一下代码仅供参考，以下代码仅供参考，写的很烂，不喜勿喷）

  /// <summary>/// 分页获取图书列表/// </summary>/// <returns></returns>public BookRes<VM_Book> GetBookListPage(int PageIndex, int PageSize, string SearchText){BookRes<VM_Book> res = new BookRes<VM_Book>();using (FriendBook2Entities db = new FriendBook2Entities()){var book = db.Book;var type = db.Book_Type;var auther = db.Book_Author;var list = from bk in bookjoin tp in type on bk.TypeId equals tp.TypeIdjoin au in auther on bk.AuthorId equals au.AuthorIdselect new VM_Book(){BookId = bk.BookId,BookName = bk.BookName,BookNo = bk.BookNo,TypeName = tp.TypeName,TypeId = tp.TypeId + "",AuthorName = au.AuthorName,Intro = bk.Intro,Cover = bk.Cover,IsFree = bk.IsFree,IsFinish = bk.IsFinish == true ? "已完结" : "连载中",WordCount = bk.WordCount,ClickCount = bk.ClickCount,DownloadCount = bk.DownloadCount,CreateTime = bk.CreateTime,UpdateTime = bk.UpdateTime,IsDelete = bk.IsDelete,};//拼接查询条件if (SearchText.Trim() != string.Empty){if (SearchText.IndexOf("cted:") > 0){var types = SearchText.Substring(SearchText.IndexOf("selected:") + 9);SearchText = SearchText.Substring(0, SearchText.IndexOf("selected"));if (SearchText != null && SearchText != ""){list = list.Where(p => p.BookName.Contains(SearchText) && p.TypeId == types);}else{list = list.Where(p => p.TypeId == types);}}else{list = list.Where(p => p.BookName.Contains(SearchText) || p.AuthorName.Contains(SearchText) || p.Intro.Contains(SearchText) || p.TypeName.Contains(SearchText));}}//获取总数据条数res.count = list.Count();//分页list = list.OrderByDescending(p => p.CreateTime).Skip(PageSize * (PageIndex - 1)).Take(PageSize);List<VM_Book> result = new List<VM_Book>();result = list.Select(p => new VM_Book(){BookId = p.BookId,BookName = p.BookName,BookNo = p.BookNo,TypeName = p.TypeName,TypeId = p.TypeId,AuthorName = p.AuthorName,Intro = p.Intro,Cover = p.Cover,IsFree = p.IsFree,IsFinish = p.IsFinish,WordCount = p.WordCount,ClickCount = p.ClickCount,DownloadCount = p.DownloadCount,CreateTime = p.CreateTime,UpdateTime = p.UpdateTime,IsDelete = p.IsDelete,}).ToList();res.data = result;}return res;}

Model层代码：

（Ps:个人觉得其实model层没必要贴出来，太基础）

namespace FriendBook2._0.Admin.Models
{public class BookRes<T>{public int code { get; set; }public string msg { get; set; }public int count { get; set; }public List<T> data { get; set; }}public class VM_Book{//SELECT TOP(5) BookNo,BookId,TypeId,BookName,AuthorId,Intro,Cover,IsFree,IsFinish,WordCount,ClickCount,DownloadCount,CreateTime,UpdateTime,IsDelete,* FROM dbo.Book/// <summary>/// 图书ID/// </summary>public Guid BookId { get; set; }/// <summary>/// 图书编号/// </summary>public int BookNo { get; set; }/// <summary>/// 类别ID/// </summary>public string TypeId { get; set; }/// <summary>/// 类别名称/// </summary>public string TypeName { get; set; }/// <summary>/// 作者ID/// </summary>public string AuthorId { get; set; }/// <summary>/// 作者名称/// </summary>public string AuthorName { get; set; }/// <summary>/// 书名/// </summary>public string BookName { get; set; }/// <summary>/// 简介/// </summary>public string Intro { get; set; }/// <summary>/// 封面图片/// </summary>public string Cover { get; set; }/// <summary>/// 是否免费/// </summary>public bool IsFree { get; set; }/// <summary>/// 是否已完结/// </summary>public string IsFinish { get; set; }/// <summary>/// 总字数/// </summary>public int WordCount { get; set; }/// <summary>/// 点击量/// </summary>public int ClickCount { get; set; }/// <summary>/// 下载量/// </summary>public int DownloadCount { get; set; }/// <summary>/// 创建时间/// </summary>public DateTime CreateTime { get; set; }/// <summary>/// 修改时间/// </summary>public Nullable<System.DateTime> UpdateTime { get; set; }/// <summary>/// 是否删除/// </summary>public bool IsDelete { get; set; }}

以上，为layui表格使用一个简单demo

联系方式：

wechat&QQ&Tel：13501715983（如查不到请加QQ：631931078或352167311）

个人邮箱：13212644043@163.com

如有问题或改进地方请多多指点，本文为个人原创，转载请加以说明

layui应用之表格篇相关推荐

layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
html 隐藏表格某一行,layui怎么隐藏表格行？
layui怎么隐藏表格行?下面本篇文章给大家介绍一下layui数据表格隐藏列的办法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在使用layui做数据表格的时候,插入的数据的id ...
html表格的隐藏列,layui实现数据表格隐藏列的示例
在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性. table.render({ elem: '#test' ,url:'${p ...
html 表格中显示图片,layui如何在表格中显示图片
layui如何在表格中显示图片发布时间:2020-09-21 09:58:30 来源:亿速云阅读:137 作者:小新这篇文章主要介绍layui如何在表格中显示图片,文中介绍的非常详细,具有一定的 ...
HTML之表格篇——表格的嵌套
表格的嵌套一方面是为使页面(贴子)的外观更为漂亮,利用表格嵌套来编辑出复杂而精美的效果,另一方面是出于布局需要,用一些嵌套方式的表格来做精确的编排,或者二者兼而有之.熟练地掌握表格的嵌套技巧并不是很困 ...
从零开始的 React 组件开发之路 (一)：表格篇
React 下的表格狂想曲 0. 前言欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇,表格篇.本系列的特色是从需求分析.API 设计和代码设计三个递进的过程中,由简到繁地开发一个 ...
layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
3、Latex学习笔记之表格篇
目录表格 1.基本结构 1.1框架 1.2行高 1.3标题 1.4标签 1.5居中 1.6表格 2.引用表格 3.常见表格类型 3.1三线表 3.2 斜线表头 3.3合并单元格 4.在线表格生成工具 ...
LayUI treetable树形表格的实现，数据格式正确，不显示的解决方案和在这个过程中遇到的坑~ 认真看你会得到一些想要的答案。
先给大家看下效果吧! 我这边只是针对数据显示的问题做了解释.并没有增删改查.找增删改查的同学可以不用看了. 做出这样的效果,首先我们要借用LayUI的内置插件,treetable.js 网上有很多,之 ...

layui应用之表格篇

layui应用之表格篇相关推荐

最新文章

热门文章