ASP.NET MVC表格初始化

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; }

上面的代码编写，再加上控制器的数据库内容表的查询代码，就可以完成，上面的一张图的效果。