Layui改变数据的状态
开发工具与关键技术: VisualStudio 2015 mvc
作者：杨泽平
撰写时间：2019、6、26
Layui改变数据状态，其实是给每条数据通过js方法往HTML里嵌入两种不同的文字或者两个不同的按钮，以达到区分的效果，这不仅是改变表面的状态，他还要改变数据库字段设置的状态。
这个功能在mvc里也是常用的，通常在一些收费数据里可以看到到，实现这个功能需要写三个方法，以费用数据的注销为例。
首先，将layui数据表格数据初始化出来，并把数据库的状态查出来显示在数据表格里，数据库默认状态是未注销，也就是true，数据初始化就不多说，下面先设置费用数据状态，获取页面显示的状态，然后if判断两种状态。
详情代码如下：
//设置费用状态
function setState(data) {
var ChargeNo = data.ChargeNo;
if (ChargeNo == "trun" || ChargeNo == true) {
return "未注销";
} else {
return "已注销"
}
}
然后就是将费用注销的操作，先是要获取选中行数据，然后判断数据，注销是将状态改为false，这里需要到在控制器写修改方法，这方法是查询注销的那条数据修改他的状态，控制器方法详情看文末。
注销方法代码详情如下：
var returnLength = 0;
//将费用注销
$("#ToVoid").click(function () {
returnLength = 0;
//获取选中的行数据
var checkStatus = layuiTable.checkStatus("tabAdvancesReceived");
//判断是否选中数据
if (checkStatus.data.length > 0) {
layer.confirm("确定要将这条费用注销吗?", { icon: 3, title: "提示" },
function (layerIndex) {
layer.close(layerIndex);
for (var i = 0; i < checkStatus.data.length; i++) {
var ChargeDtailID = checkStatus.data[i].ChargeDtailID;
//修改费用状态
modifyTitleState(ChargeDtailID,
false);
}
if (returnLength == checkStatus.data.length) {
//刷新表格
tabAdvancesReceived.reload({
page: { curr: 1 } });
layer.alert("已注销！", { icon: 1, title: "提示" });
}
});
}
else {
layer.alert("请选择需要注销的费用!");
}
});
注销后还有一个方法，这个是ajax方法，用这个方法将该条数据的ID 传过去，同时将上面方法里的控制器方法路径传过去。
详情代码如下：
//修改费用状态
function
modifyTitleState(ChargeDtailID, state) {
$.ajax({
type: "get",
url: "ModifyTitleState",
data: { ChargeDtailID: ChargeDtailID,
ChargeNo: state },
async: false,
dataType: "json",
success: function (data) {
if (data) {
returnLength++;
}
}
});
}
最后就是效果了，页面上开始状态为绿色字体未注销，也就是数据库状态为true。
如下图所示：
然后勾选要注销的一条数据，点击注销，会提示是否确定要注销，如下图所示：
当点击确定后，方法执行后数据库状态改为false，页面上也会改变成红色已注销的状态。
如下图所示：
后面是上面提到的控制器方法：
public ActionResult ModifyTitleState(int ChargeDtailID, bool ChargeNo)
{
try
{
//根据收费明细ID查询收费明细信息
B_ChargeDetail dbChargeDtail = myModels.B_ChargeDetail.Where(m
=> m.ChargeDtailID == ChargeDtailID).Single();
if (dbChargeDtail != null)
{
dbChargeDtail.ChargeNo = ChargeNo;
myModels.Entry(dbChargeDtail).State
= EntityState.Modified;
myModels.SaveChanges();
return Json(true, JsonRequestBehavior.AllowGet);
}
else
{
return Json(false, JsonRequestBehavior.AllowGet);
}
}
catch (Exception)
{
return Json(false, JsonRequestBehavior.AllowGet);
}
}