layui的使用

Table表格的使用之引用

开发工具与关键技术：Visual
Studio  layui表格的使用

撰写时间： 5月9号

作者： 曾子千

如果平常我们想要弄一个表格出来，在代码里可以用HTML和CSS样式表达出来，但是这样太麻烦了，代码量不但多，浪费的时间又长，毕竟表格这个元素我们在开发软件的过程中经常要用到它那有没有简单快捷又节省时间的方法呢？

（毕竟时间就是金钱啊）答案就是有的！

下面有请我们的主角“layui”登场，它自身是一款前端UI框架

里面已经包含了HTML/CSS/JS三种包装好的书写形式，适用于界面的快速开发！

还有的是用layui里的模块Table表格属性渲染出来的表格它还有分页功能的，我们想要达成一个数据绑定表格的话，

有两个步骤：

第一个步骤就是引用外面的js插件,

第二个步骤就是把layui里的表格模块Table跟我们的这边是代码和数据库进行一个绑定和渲染！

一、引用layui插件框架

首先我们要拥有layui的样式和框架，或者没有的去layui官网下载layui最新框架

把框架的文件先放入我们的操作工具项目内部（本人用的是VS）,

先引入layui的css样式

引入layui的js

（这有一个小方法：在VS里不用一个个代码的敲引用，直接找到你想要用的文件，用鼠标左击按住，拖出到js的引用区域就可以使用了）

写一个方法，给一个名称，因为我们要查询的是学院表，把名称命名为数据库那边学院表的名字

因为要查询数据给他加上一个All,

Public
ActionResult SelectAcademeAll()

{

Return Json这是返回的格式(JsonRequestBehavior.AllowGet)
允许获取数据

}

Layui它有两种格式：渲染模式 和 直接使用

（1） 
渲染模式：那什么是渲染模式呢？

渲染引擎开始载入html代码，并将HTML中的标签转化为DOM节点

如果引用了外部css文件，则发出css文件请求，服务器返回该文件；

如果引用了外部js文件，则发出js文件请求，服务器返回该文件后开始运行

（2）

直接使用：那什么是直接使用呢？

直接用Layui点出具体的属性（如layer.alert(data)）

注意的是我们引入的js模块的是 “layui,all.js”这的js，比如平时我们的对话框引用的js就是直接使用的