table表格数据绑定

短命女 2022-04-24 06:02 230阅读 0赞

**table表格数据绑定**

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

上一次我们也讲了关于表格数据绑定的有关文章，但本篇是全表格数据绑定的介绍，table表格是我们经常用到的一种表格，用来组装数据的，也就相当一个书架子，上面堆满了整齐又排序的书籍，人们想查看什么书籍的时候，肯定是要从左到右或从右到左开始找书，第一层没有，就跳到第二层书架找，一层一层的找，当然啦，如果叫你在一个庞大的图书找一本书，那就是大海捞针，所以人家肯定会做标记的，哪本书会在哪个位置，都标记好的。我们的table表格也就是这样，一层一层的，整齐，而下一层的位置我们给它搞了分页，这样就会显得格更整齐了。  
![在这里插入图片描述][20190418085652503.png]  
它的分页效果就是这样，可以直接跳转到你想要跳转的页码，有总行数，每页分有几条数据，还有选中效果，在右边的操作中是两个按钮，是基础数据里的两种，这两个按钮是在表里面定义的，而不是我们日常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不对，也可能是其他问题，我们可以看看哪里出问题就去到它的源代码中找。  
![在这里插入图片描述][20190418085826969.png]  
本篇技术点分享结束啦，下期为大家带来更多技术的东西！

[20190418085652503.png]: /images/20220218/6d38449a7d264d1f96521a2392754a00.png
[20190418085826969.png]: /images/20220218/30ae9b64abc6489e9dac702fe6754745.png