table表格数据绑定

table表格数据绑定

开发工具与关键技术：VS、table表格数据绑定
作者：黄桂康
撰写时间：2019.04.16

上一次我们也讲了关于表格数据绑定的有关文章，但本篇是全表格数据绑定的介绍，table表格是我们经常用到的一种表格，用来组装数据的，也就相当一个书架子，上面堆满了整齐又排序的书籍，人们想查看什么书籍的时候，肯定是要从左到右或从右到左开始找书，第一层没有，就跳到第二层书架找，一层一层的找，当然啦，如果叫你在一个庞大的图书找一本书，那就是大海捞针，所以人家肯定会做标记的，哪本书会在哪个位置，都标记好的。我们的table表格也就是这样，一层一层的，整齐，而下一层的位置我们给它搞了分页，这样就会显得格更整齐了。

它的分页效果就是这样，可以直接跳转到你想要跳转的页码，有总行数，每页分有几条数据，还有选中效果，在右边的操作中是两个按钮，是基础数据里的两种，这两个按钮是在表里面定义的，而不是我们日常HTML中的内容按钮，我们是定义在表里面，然后再定义那个函数，这些效果都比较实用，也是绝大部分项目经常出现的内容，所以要掌握好这一小内容。
简单地介绍完这些功能，下面就和大家去看看实现这些效果的方法是咋样。
首先还是一样，控制器先查询表数据，要查询哪张表的数据就选择哪张表，还要记得用Models时要先实例化Models，
Models.CQUPTTEntities myModels = new Models.CQUPTTEntities（）；//实例化Models
然后定义一个查询方法：
public ActionResult SelectNoticeTypeAll（LayuiTablePage layuiTablePage）
{
var listNoticeType = (from tbNoticeType in myModels.SYS_NoticeTypeTable
orderby tbNoticeType.NoticeTypeID descending
select tbNticeType);
//分页操作
List<SYS_NoticeTypeTable> listnNoticeTypeDetails =listNoticeType
.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit)
.ToList();
//返回列表
LayuiTableData<SYS_NoticeTypeTable> layuiTableData = new LayuiTableData
<SYS_NoticeTypeTable>();
layuiTableData.count = listNoticeType.Count();
layuiTableData.data = listnNoticeTypeDetail;
return Json(layuiTableData,JsonRequestBehavior.AllowGet);
}//公告类型查询
上面的代码就是查询啦，查询就查询表，然后分割列表，返回列表等。
下面是它的JS内容了：（本次内容用的是layui插件）

JS的整个思路就是上面的script标签，当然了，代码还有写一遍……………

下截图就是table表格数据绑定成功了，上面是表头，中间是数据，选中单选框，操作下面就是表里面设置的按钮，最下面是分页了，由于显示全部数据截图量太大，所以分页显示调成了5条/页，这些都可以看自己喜欢设置的这些都是比较简单的。有时候表头显示出来，却没有数据，有可能是我们的路径url不对，也可能是其他问题，我们可以看看哪里出问题就去到它的源代码中找。

本篇技术点分享结束啦，下期为大家带来更多技术的东西！