layui.table
发布日期:2021-11-02 20:00:49 浏览次数:2 分类:技术文章

本文共 1941 字,大约阅读时间需要 6 分钟。

开发工具与关键技术: MVC

作者:彭水清

撰写时间:2019/4/15

Layui里面包括了很多模块,但是你要用那个模块就只加载那个模块,而不用全部引进来。Layui有很多功能,但是我可以单独使用一个功能,比如我只用他表格这个功能,而我只需要加载表格这个模块就够了,因为表格的样式layui会自动的给你加载,相应的其它js它也会自动的给你加载。你想要哪一块就给你加载哪一块,而其他不用的就不用加载,这样就会减少页面的大小。layui 框架可以直接在官网下载即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js。

table 模块也将是 layui 重点维护的项目之一。

创建一个table实例最简单的方式是,在页面放置一个元素

,然后通过 table.render() 方法指定该容器,如下所示

在这里插入图片描述

上面你已经看到了一个简单数据表格的基本样子,你一定迫不及待地想知道它的使用方式。下面就是它对应的代码:

首先看我们要用到哪些模块,在这里我用到了’layer’弹出层和’table’数据表格,接下来function会对它的表格数据进行初始化,还有就是表头的一些结构,表头可以自定义。

以下就是layui.table的代码:

//加载&&初始化layui模块

layui.use([‘layer’, ‘table’], function () {

layer = layui.layer,

layuiTable = layui.table;

//初始化表格

tabStudent = layuiTable.render({

elem: ‘#tabStudent’, //html table id

height: 250,                url:

“selectStudentAll”, //数据接口

cols: [[//表头

{ type: “checkbox”, fixed: “left” }, //多选框列,fixed:‘left’ 将列固定在左边

{ type: “numbers”, title: “序号” }, //序号列,title设定标题名称

{ field: “studentID”, title: “studentID”, hide: true }, //hide:true 隐藏列

{ field: “UserID”, title: “userID”, hide: true },

{ field: “StudentNumber”, title: “学号”, align: “center” },// align: "center"居中对齐

{ field: “StudentName”, title: “姓名”, width: 100, align: “center” }, //width: 100 指定宽度,align

指定对其方式

{ field: “StudentIDNum”, title: “省份证号”, align: “center” },

{ field: “StudentSex”, title: “性别”, width: 70, align: “center” },

{ field: “AcademeName”, title: “学院”, width: 150, align: “center” },

{ field: “SpecialtyName”, title: “专业”, width: 150, align: “center” },

{ field: “GradeName”, title: “年级”, width: 80, align: “center” },

{ field: “ClassName”, title: “班级”, align: “center” },

{ field: “UserNuber”, title: “账号”, align: “center” },

// {

field: “操作”, templet:

setOperate, align: “center”, field: “right” }

]],

page: {                 limit: 10,//指定每页显示的条数                 limits: [5, 10, 15, 20, 25, 30, 35, 40, 45,

50],//每页条数的选择项

}, //开启分页

});

一切都并不会陌生:绑定容器、设置数据接口、在表头设定对应的字段,剩下的…就交给 layui 吧。

新手上道,大神勿喷,请多多指教。如果有更好的方法欢迎在评论区教导喔!

转载地址:https://blog.csdn.net/weixin_44540414/article/details/89370741 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:layui table分页查询
下一篇:定时器计算

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月17日 16时00分06秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java list详解_java集合List解析 2019-04-21
java坐标代码_java实现计算地理坐标之间的距离 2019-04-21
kettle调用java程序_Kettle ETL调用 java代码来进行数据库的增删改查 2019-04-21
mysql 取两个时间差 php_在php和MySql中计算时间差的方法详解 2019-04-21
mysql 重启数据库实例_mysql 单机多实例重启数据库服务 2019-04-21
oracle12c order by,oracle 数据库中order by 的一些高级用法 2019-04-21
oracle8i substr,Oracle中的INSTR,NVL和SUBSTR函数的用法详解 2019-04-21
导出oracle11g的空表,轻松解决oracle11g 空表不能 exp 导出 的问题。 2019-04-21
php把整数拆分成数组,数组拆分处理(整数时的处理),该怎么处理 2019-04-21
oracle numlist,oracle sql str2numlist numtabletype 2019-04-21
php红包平均分配,红包平均分配算法 2019-04-21
linux磁盘的命令是,linux磁盘相关的命令 2019-04-21
linux服务器 缓存,Linux服务器内存使用分析及内存缓存 2019-04-21
linux查进程内存问题,关于linux 查看服务进程内存,cpu,内存占用的一些基础命令... 2019-04-21
linux英文包安装教程视频,Linux源码包安装过程讲解 2019-04-21
linux 关闭rsync服务器,linux下配置rsync服务器和实时同步 2019-04-21
linux初始化TCP服务失败,深入Linux系统追踪TCP初始化 2019-04-21
arch Linux添加源,在Arch Linux系统中使用Archlinuxcn源(清华源)的方法 2019-04-21
私人linux远程连接,Linux远程连接 - osc_5g1gl9wp的个人空间 - OSCHINA - 中文开源技术交流社区... 2019-04-21
windows文件迁移到linux,从Windows到Linux迁移之文件服务器(Samba和AD完美结合) 2019-04-21