表格渲染

博客介绍了在DW和VS中表格的使用方式,重点阐述VS中表格的三种渲染方法:方法渲染、自动渲染和转换静态表格,推荐使用方法渲染。还说明了渲染表格时需引用layui.css,要绑定容器、设置数据接口等,并给出了具体的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开发工具与关键技术: Visual Studio   layui
作者:黎凤焕
撰写时间:2019年 5月 27 日

很多时候会用到表格,在DW中,使用a标签就可以构建表格,而在VS中,表格的使用比较广泛,表格的使用不是通过a标签就可以实现效果的,在VS中,要使用表格,要通过渲染的方式来实现表格。
表格渲染有三种:
一、方法渲染:用JS方法的配置完成渲染。无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。
二、自动渲染:HTML配置,自动渲染。
所谓的自动渲染,即:在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。其特点在上文也有阐述。
你需要关注的是以下三点:
(1)带有 class=“layui-table” 的 table 标签。
(2)对标签设置属性 lay-data="" 用于配置一些基础参数
(3) 在 th标签中设置属性lay-data=""用于配置表头信息

三、转换静态表格:转化一段已有的表格元素。假设你的页面已经存在了一段有内容的表格,它由原始的table标签组成,这时你需要赋予它一些动态元素,比如拖拽调整列宽?比如排序等等?那么你同样可以很轻松地去实现。

这三种渲染方法,一般使用的比较多的是方法渲染。事实上我们更推荐采用“方法级渲染”的做法,其最大的优势在于你可以脱离HTML文件,而专注于JS本身。尤其对于项目的频繁改动及发布,其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单,也只能由各位猿猿们自行体味了。
渲染表格:绑定容器、设置数据接口、在表头设定对应的字段,剩下的…就交给 layui 吧!使用layui 中的元素,根据自己的需要来对表格进行设置。在渲染表格的时候,首先得引用,引用layui.css表格才会渲染成功,如果没有引用,表格渲染不出来,没有想要的效果。
在这里插入图片描述

这就是不引用layui.css的效果,引用layui.css的效果是不同的。
在这里插入图片描述

找到先前搭建页面的表格名称,对它进行渲染,field里面的名字要与数据库的字段名一样,一样才可以渲染出来。URL是数据的借口,说明那个控制器上的方法名。
var layer, layuiTable;
var tabExpenseDetail;
$(function () {
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer, layuiTable = layui.table;
tabExpenseDetail = layuiTable.render({
elem: “#tabExpenseDetail”,
url: “/ChargeManagement/ExpenseDemand/SelectPatientAlls”,
cols: [[
{ title: ‘选择’, type: ‘checkbox’ },
{ field: ‘CardNumber’, title: ‘卡号’ },
{ field: ‘StreamNumber’, title: ‘门诊流水号’ },
{ field: ‘Name’, title: ‘姓名’ },
{ field: ‘Telephone’, title: ‘联系电话’ },
{ field: ‘ProjectNumber’, title: ‘项目编号’ },
{ field: ‘MedicineName’, title: ‘项目名称’ },
{ field: ‘Specification’, title: ‘规格’ },
{ field: ‘Quantity’, title: ‘数量’ },
]],
page: {
limit: 10,//指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
}, //开启分页
data: [],//加载本地数据
});
});
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值