ASP.NET MVC显示数据有很多种表示的方式,而表格的方式是最常见的,也是最方便的一种,大多数人都会用这种方式来显示要的数据,ASP.NET MVC项目的数据大多数都是从数据库里面导出来的,而不能在项目中直接用CSS样式显示出来,这样做会出现两种情况,第一种,完全用CSS样式显示出来的数据会用到大量的代码量,这会让人感到多而复杂,又感到多而乱。
第二种,代码的灵活性和变化性不高,很难做出想要的效果,而CSS样式做出的页面效果,看起来美观,不过要改变状态的话就会麻烦,它就像一个装饰品,要显示让你去改变它才会改变,就是在原代码的基础上,用大量代码去改变状态,而用js的形式的话,灵活性高,变化性高,而且代码量会少,看起来规范,不感的乱,修改数据不会麻烦,只要在页面中就可以改变自己想要效果。
而且,用一句代码的就能代替。CSS样式的很多的代码,
所以,CSS样式是前端的框架,而js是数据的显示器,两个要结合的使用才能做出完全的页面。
在开始制作表格前,要在HTML中编辑一句<table
id=“tabChothing” lay-filter=“tabChothing”>。
这是制作表格的重要的部分,没有这一句就制作不出想要的表数据,是必不可少的一部分。
在HTML中编辑完<tableid="tabChothing"lay-filter=“tabChothing”>,后就中编写js代码来进行表格的完善,首先编写$(function (){})给一个开始,然后再在里面编写表格初始化的代码,layui.use([‘layer’, ‘table’], function () {layer = layui.layer,
layuiTable = layui.table; 上面这一段为加载的代码, tabChothing = layuiTable.render上面这一段为初始化的代码({
elem: ‘#tabChothing’, 上面这一段为元素的代码 url: “/shopping/ChothingAll”,表格的路径,而以下的就是表的表头
cols: [[{ type:
“checkbox”, fixed: “left” },表示左边开始向右边排序
{ type:
“numbers”, title: “序号” },每一行的序号
{ field: "ChothingID",
title: “ChothingID”, hide: true },
这是数据隐藏的一行数据。
{ field:
“ChothingName”, title: “服装”, align: “center” },
这是为数据显示的内容行。
{ title: "操作",
templet: setOperate, align: “center”, fixed: “right” }]],
显示在表格最右边的一例数据,里面可以输入你需要的数据,这一行被称为操作行,是可以设置改变这整行数据的内容。
page: {limit: 10,指定每页显示的条数
limits: [5, 50],每页条数的选择项},
data: [],表示无数据});
下面为操作例的按钮的编辑
function setOperate(data) {
var chothingId = data.chothingId;
var btn = “”;
btn += ‘<button class=“layui-btn layui-btn-xs” οnclick="openUpdateModal(’
- chothingId + ‘)">修改’;
btn += ‘删除’;
return btn; }
上面的代码编写,再加上控制器的数据库内容表的查询代码,就可以完成,上面的一张图的效果。