layui应用之表格篇

最新推荐文章于 2024-03-27 12:34:06 发布
最新推荐文章于 2024-03-27 12:34:06 发布
阅读量9.4k 收藏 7
点赞数
分类专栏： LayUI 文章标签： layui layui数据表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37781450/article/details/82054598
版权

前言：个人转码小说网站：友书-绿色、纯净、无广告，欢迎广大小说阅读爱好者同行来本网站看小说，书友交流群：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;'],//title
                        type: 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;'],//title
                        type: 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 book
                           join tp in type on bk.TypeId equals tp.TypeId
                           join au in auther on bk.AuthorId equals au.AuthorId
                           select 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

                 

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

纪寻川
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
LayUI中的内置模块之 table 数据表格文档(layui 重点维护的项目之一)
daimeijin的博客
08-14 6736
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 table 数据表格文档 table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务
Layui的树形表格treeTable
06-20
Layui、treeTable、树形表格、无限层级
Layui table的动态表格lay-data怎么传递参数给后端
小洪帽i的博客
11-20 4335
Layui table的动态表格lay-data怎么传递参数给后端
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件
最新发布
小5聊的博客
03-27 4407
最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。 因此通过本篇文章大概记录常用的功能方法，比如，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件等
layui框架学习（34：数据表格_基本用法）
gc_2299的博客
07-30 1769
学习并记录了数据表格模块table的最基本用法
Layui数据表格
u013744998的博客
03-26 855
3.设置toobar。
layui数据表格的使用（前端和后端）
热门推荐
qq_45598422的博客
03-26 1万+
数据表格（纯前端） 快速使用 首先需要引入layui的css和js <link rel="stylesheet" href="../static/layui/css/layui.css"> <script src="../static/layui/layui.js" charset="utf-8"></script> 然后再定义一个table标签，并写入js代码即可快速使用 <table id="demo"></table> <script
LayUi之数据表格的增删改查（内含完整源代码）
m0_74315688的博客
07-14 5527
关于使用layui进行增删改查的一整套流程清晰明了的编写出来啦！！感兴趣的话就点进来看看呢！！！
Layui如何给lay-data插入按钮呢？如何通过按钮获取Id值呢？
是个非常热爱生活、乐观、奋斗、努力的逗比青年
07-06 2118
好了，写完了，如果对Layui熟悉度高的话，直接看‘精简输出部分’就好了，剩下的那些显示数据和删除或修改的逻辑就不过多的去展示出来了，主要的主题就是Layui如何给lay-data插入按钮，如何通过按钮获取Id值；大家如果觉得有什么不对的地方，望指出，愿与诸君共同学习进步！
layui 监听表格复选框选中值的方法
10-18
本篇将详细介绍如何在layui中监听表格复选框的选中值，并将其用于异步请求的参数。 首先，我们的目标是实现当用户在layui表格中勾选或取消复选框时，能够动态获取选中的数据项ID，并将其存储在一个数组中，以便在...
layui使用templet格式化表格数据的方法
10-16
在本文中，我们将深入探讨如何使用layui框架中的templet功能来格式化表格数据，以便更好地展示和处理数据。...希望这篇文章能帮助你更好地理解和应用layui的templet特性，让你的项目更加高效和美观。
在Layui中操作数据表格,给指定单元格添加事件示例
10-16
本篇将详细介绍如何在Layui的数据表格中给指定单元格添加事件。 首先，创建一个Layui数据表格需要使用`table.render()`方法。在给出的代码中，我们可以看到一个表格被初始化，其中包含了多个列，每列都有自己的字段...
浅谈layui框架自带分页和表格重载的接口解析问题
10-16
在本篇文章中，我们将深入探讨layui框架中自带的分页和表格重载的接口解析问题。 首先，我们来看layui的分页功能。layui的分页组件提供了一个方便的方式来展示和操作数据的分页。在使用时，需要确保返回的JSON数据...
layui获取选中行数据的实例讲解
10-18
layui是一款流行的前端UI框架，它提供了丰富的组件和功能，便于开发者构建美观且易用的Web应用。在layui中，表格是常用的数据展示组件，而获取选中行的数据是常见的操作，特别是在需要进行数据交互或处理用户选择时...
layui
while(life)++；
10-10 1246
先下载layui——https://layui.dev/ layui文档地址：https://layui.dev/docs/2/versions.html 下载以后把解压的文件夹放入项目中 引入css和js 弹出消息看一下 日期与时间 laytpl 是 Layui 的一款轻量 JavaScript 模板引擎，在字符解析上有着比较出色的表现。 是外层标签，里面写的是表达式，以下是个if判断示例，更多示例：https://layui.dev/docs/2/laytpl/#test d为
layui框架学习（35：数据表格_列参数设置）
gc_2299的博客
07-30 3054
学习并记录layui框架中内置模块的数据表格模块中与列相关的主要参数设置方式。
Layui快速入门之第七节 表格
qq_61313896的博客
09-14 1406
Layui快速入门之第七节 表格
LayUI---数据表格
Han0221的博客
06-18 1566
table表格数据
layui table
闪耀星星的窝
08-16 1526
1.off移除on绑定的事件 2.列checkbox列single属性单选 3.render时changes属性可以动态改变列 4.初始化时rowStyleFormatter可以根据值改变行样式，rowClassFormatter可以根据值改变行css样式 例子： <table class="layui-table" lay-filter="tbUsers" id="tbUsers"> <thead> <tr> <th lay-data="{
layui 树形表格
08-09
layui 树形表格是一种基于layui框架的组件，可以将表格数据以树形结构的方式展示出来。 通过引入layui的相关资源文件，我们可以使用layui的treeTable模块来创建树形表格。 使用layui树形表格的步骤如下： 1. 引入layui的样式文件和脚本文件： ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 创建一个具有特定id的表格容器： ```html <table id="treeTable" lay-filter="demo"></table> ``` 3. 编写JavaScript代码来渲染树形表格： ```javascript layui.use('treeTable', function(){ var treeTable = layui.treeTable; // 渲染树形表格 treeTable.render({ elem: '#treeTable', data: data, // 表格数据 tree: { iconIndex: 2, // 树形图标的索引，默认为2 isPidData: true, // 是否是pid形式的数据，默认为false idName: 'id', // id字段的名称，默认为'id' pidName: 'parentId' // 父id字段的名称，默认为'parentId' }, cols: [ {field: 'name', title: '名称'}, // 表格列配置 {field: 'value', title: '值'} // 更多列... ] }); }); ``` 其中，`data`表示表格的数据，可以是一个数组，每个元素代表一条数据，还可以使用异步接口获取数据。 通过配置`tree`参数，可以设置树形相关属性，例如树形图标的索引、是否是pid形式的数据、id字段和父id字段的名称等。 `cols`参数用于配置表格的列，每个列的`field`表示数据对象的属性名，`title`表示表格列的标题。 通过以上步骤，我们就可以使用layui树形表格来展示数据，并实现树形结构的展开和折叠效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纪寻川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值