自定义数据表格&跳转页面

开发工具与关键技术：VS软件，自定义数据表格&跳转页面
作者：陈隆
撰写时间：2019年07月27日

说到数据表格就一定回想到是用什么插件生成的数据表格，现在的时代都是为了追求打代码的速度，所以就出现了许许多多的插件，这些插件就是为了让程序员更好的更快的开发项目，任何的插件存在都是为了给程序员的使用的，我现在正在做的数据表格也是使用一种插件来实现的，插件的用处是非常的大的，可以使用插件来实现的功能也是很多的，数据表格只是其中的一种，还有表格的自定义列也是需要插件来实现的，如果不使用插件来制造数据表格，那么打代码的量就会增加了许多的，只有使用插件才可以减少了不少的代码，就是这样的方便所以插件就会越来越的多，使用插件的程序员也是不少的，那么我这里使用的插件是layui插件，需要使用这个插件的可以在网上下载来使用的，那么下面就开始写主要内容的代码。（数据表格中自定义列代码）
$(function () {
layui.use([‘layer’, ‘table’], function () {
layer = layui.layer;
layuiTable = layui.table;
//表格初始化
tabCustomer = layuiTable.render({
elem: “#tabCustomer”,
url: “/MarketingManagement/CustomerManagement/SelectTabCustomer”,//数据接口
cols: [[//表头
{ field: “CustomerComplaintID”, title: “CustomerComplaintID”, hide: true },
{ field: “ProjectName”, title: “所在项目”, align: “center” },
//表格自定义列
{ title: “投诉类型”, templet: setComplaintType, align: “center”, sort: true },
{ field: “ComplaintStatus”, title: “投诉状态”, align: “center”, width: 100 },
{ field: “CustomerName”, title: “客户姓名”, align: “center” },
{ field: “ComplaintContent”, title: “投诉内容”, align: “center” },
]],
data: [],
}) })})
其实自定义列就是在数据表格中的表头中操作的，表头中只是需要一句代码就可以了，然后就是需要写一个方法把需要的数据给自定义列添加上，接着就继续写一下方法中的代码把。
//表格自定义列(投诉类型)
function setComplaintType(data) {
//获取需要的内容
var customerComplaintId = data.CustomerComplaintID;//客户投诉ID
var complaintType = data.ComplaintType;//投诉类型
var str = "<a style='color:#888;text-decoration:underline' href='javascript:showComplaintPage(" + customerComplaintId + ")'>" + complaintType + "</a>";
return str;
}
//打开客户投诉查看页
function showComplaintPage(customerComplaintId) {
window.location.href = “/MarketingManagement/CustomerManagement/ComplaintPage?customerComplaintId=” + customerComplaintId;
}
就是获取到需要的内容就可以了，需要显示什么内容就获取就可以了，但是是需要查询出来的数据才可以获取到的，要不然是没有数据的，简单的查询我这里就不写了，获取到需要的数据后就声明一个变量等于一个a标签就可以了，然后在标签中写上需要的样式和跳转页面的参数就可以了，记得页面跳转是需要拼接一个数据的ID的要不然跳转后无法操作其他的功能，比如最基本的删、查、改，这都是需要获取到数据的ID才可以完成的，那么拼接上ID后就还需要写一个方法来进行页面的跳转，就是打开某查看页的方法，到这里欧接收一下上面方法传的ID然后传送到需要打开的页面的控制器中，接的要拼接上ID，然后页面中的代码就完成了。
接下来就是需要继续写控制器的代码了。（控制器中的代码）
public ActionResult ComplaintPage(int customerComplaintId)
{
//设置session
Session[“customerComplaintId”] = customerComplaintId;
return View();
}
这就是控制器中的代码，其实跳转页面不需要ID也是可以进行跳转的，只不过没有ID就不能进行其他的操作了，在控制器中接收到传过来的ID后，还需要把ID传到session中，反正我想到的就是这样把需要的ID在新打开的页面中拿到，或许还有很多的方法可以把这个ID给传到新打开的页面中，这也是没有可能的，因为可以实现同一个功能的代码真的有很多很多的方法可以实现的。把ID通过session传到页面中。然后就是可以在页面中通过session把这个ID给拿到了。拿到后就可以在页面做任何的可以实现的功能了。那么下面来看一下在新打开的页面可以实现什么的功能。（页面截图）

上图就是通过自定义表格列中所打开的页面，在这个页面中是可以实现很多的功能的，不过这些公能都是和传过来的ID有着一定的关系的，没有关系的功能，在这个页面上实现应该也是没有什么大用处的，这样就玩成了这些功能了。