1. 将需要的数据呈现在网页,并绑定在table表格里面应该是web开发人员都少不了的操作 ,那么制作表格和将数据库的数据绑定在页面上显示出来需要哪些操作?
    这里我就在MVC框架里面来显示着一操作 ,用到了layui(前端框架)和bootstrap4(前端框架)来帮助设计
  2. 首先在div中放入table标签来接收到数据库中的数据,其中row类和col-12都bootstrap4中已经封装好的类
    表格制作和数据绑定
  3. 接下来开始写JavaScript代码了
     先定义一个全局变量layuiTable
    表格制作和数据绑定
     再定义一个变量tabStudent
    表格制作和数据绑定
     然后开始加载和初始化模块 ,这里呢我只需要加载table模块 ,之后开始将模块赋值

layui.use([‘table’], function () {
layuiTable = layui.table;
});
 模块赋值之后开始初始化表格
tabStudent = layuiTable.render({
});
 开始填写必要的参数elem(指定原始 table 容器的选择器或 DOM,方法渲染方式必填)、url(异步数据接口相关参数。其中 url 参数为必填项)、cols(设置表头。值是一个二维数组。方法渲染方式必填)。elem选择到table容器,通过jQuery中的id选择器来选择,url选择控制器中查询数据库数据的方法。
表格制作和数据绑定
 在cols中用花括号来装载需要的数据
type(设定列类型。可选值有:normal(常规列,无需设定)、checkbox(复选框列)、radio(单选框列)、numbers(***)、space(空列))
fixed(固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。
注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。)
field(设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识)
title(设定标题名称)
hide(是否初始隐藏列,默认:false)
align(单元格排列方式。可选值有:left(默认)、center(居中)、right(居右))
width(设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比
请结合实际情况,对不同列做不同设定。)
templet(自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等)
表格制作和数据绑定

相关文章: