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

在这里插入图片描述

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值