下面我想跟大家讲一下数据表格的编写,与表格的渲染,这也是我在这一次项目中做的最多一个操作,
大家可以看一下下面的一个已近渲染完成的表格表格。以往我们编写这种表格的时候。都会用HTML进行编写。这样的编写量太大了,而且编写出来的格式还不是很美观。那么我们就必须借助一些其他辅助物啦,layui就是一个很好的辅助,
这个表格主要是通过layui这个插件来实现的。
怎样利用这个插件来完成表格呢?
一、要用这个插件必须要把这个插件放在你的项目里面,并进行引用。
这个插件有一个最大的好处就是并不需要加载整个。你需要哪个模块就加载哪一个模块。并初始化它就可以了。
二、怎样去加载呢?
1、先声明一个变量。
Var layer ,layuiTable
Var TabTitiles
2、加载模块
Layui.use(‘table’) 这个是加载一个模块。 如果加载多个就必需加一个以数组的形式进行加载
Layui.use([‘table, ‘layer’’]) //多个
3、赋值 (声明了边练并进行了加载 必须进行赋值)
layer = layui.layer, layuiTable = layui.table;
4、进行表格的渲染;
表格的渲染也同样可以在上面定义一个变量来接收。表格的渲染有几个参数要记住的。
TabTitiles= layuiTable.render({
Elem:’’ 这里传递的是表格的ID
url: 这里传递的路径值;
cols:[[
这里传递的就是你的表头行 一般是以键值对的形式 例如:
{ title: ‘序号’, type: ‘numbers’, align: ‘center’ },
{ title: ‘员工编号’, field: ‘employeeNum1’, align: ‘center’ },
{ title: ‘联系电话’, field: ‘telphone’, align: ‘center’ },
{ title: ‘家庭地址’, field: ‘address’, align: ‘center’ },
{ title: ‘操作’, templet: setOption, align: ‘center’ }
]]
})
注意:这里就是我们表格里所需要获取字段明必需与你数据库所连接表表里面的字段相一致。否则数据无法
显示。大家可以看下面的表格 ,这种就是属于字段不一致的情况所导致的。这里展示的是另一个表,主要就
就是为了让大家对比上一个表。两个表之间有什么不同,少了选择那一个单选框,这就是要根据大家所需要的
来决定咯?
这就是一个表格所需要的字段。
表格的值是通过连接数据库在控制器里所查询出来的,
查询这样的一个表数据有不同的查法。主要是Linq与lambd 这种两者的查法 ,这个主要还是看大家习惯来,
我这里主要善于的是linq 的查法。
注:至于什么是linq查询与语法知识,在这这前我前面有很详细的案例讲解。这里我就不再多说。我就直接运用啦!
一、 在控制器定义一个查询表数据的方法
二、 把这个方法名Selecemploce 传递到View 视图里的URL 路径就可以,在这了又要注意路径 问题了
如果路经传递不成功数据也是无法显示的,
注: 关于路径问题在此之前的文章讲解中我也做了特别详细的介绍。有兴趣的人可以去看看
public ActionResult Selecemploce(LayuiTablePage layuiTablePage)
{
var listEmployee = (from tb in myModel.PW_Employee
select tb).ToList();
// 3、查询总条数据
int totals = listEmployee.Count();
// 5、Skip从哪里开始显示数据 Take显示多少条
//listEmployee = listEmployee.Skip(layuiTablePage.GetStartIndex()).Take(layuiTablePage.limit).ToList();
listEmployee = listEmployee.OrderByDescending(m => m.employeeID)
.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit).ToList();//排序
// 例外:新增后数据蒋按倒序好查 OrderBy
// 2、实例化
LayuiTableData<PW_Employee> layuiTable = new LayuiTableData<PW_Employee>();
// 4、赋值回去按照表格数据的显示
layuiTable.data = listEmployee;
layuiTable.count = totals;
return Json(layuiTable,JsonRequestBehavior.AllowGet);
//JsonRequestBehavior.AllowGet允许客户端进行访问
}
注意一、在这里我封装了一个实体类 LayuiTablePage 这个主要运用于分页,大家应该注意到那个表格里面的最后一行有分页的效果。就是通过这也来实现。
三、 在那个方法里我运用了OrderByDescending 来对他排序。至于有什么作用与效果 在挂于 linq 语句查询那里有很详细的介绍。大家可以去看看 ,主要是一个为了更快看到新增所运用的一个技巧,
为什么要分页呢?主要是为了适应全局的需要。因为一个项目涉及所需要的分页应该不少。这时定义一个类提供给全项目来用,这样对提示你代的编写效率都是很不错的。
还有一点就是:大家可以看到我那里有两个修改与操作的按钮,这个是自定义列的方法实现。并不是只要输入字段就可以显示的。而是有一个字定义的方法;
//1.0 自定义列模板的方法
function setOption(data) {
// console.log(data);
var employeeID = data.employeeID;//根据ID删除
var btn = “”;
// s= s+2 s+=2 三目运算 对比下面就可以看的懂了
btn += “修改”;
btn += “删除”;
return btn;
}
这种自定义模板的写法固定的,大多数都差不多,大家可以直接用,有多的参数和条件另外算。
通过这个查询与路径的传递,不出错的情况下一个完整的数据表格就可以渲染成功了
在此要注意:路径不要错,参数的拼接不要错,参数获取不要错,id要有 单词不要错哈
这就是一个表格渲染完成的一个全过程,至于有什么错误的地方请大家多多谅解。
以上就是我对一个表格渲染进行的解的一个过程希望大家会喜欢。