javascript - 将单个模型值(字符串)作为参数传递给可重用的 javascript 函数以在 MVC 视图中设置表格单元格类
问题描述
我的视图显示了一个表格,其中包含一些数据的状态,按列分组:
- 准备好
- 完毕
- 跳过
- 不适用
我每次大约有 6 列和多行(下面的简化示例)我需要设置单元格背景颜色,这很容易通过 css 完成,但是每次通过视图中的重复代码设置样式类是繁琐的时间消耗每一列并且容易出错。
所以我想到了使用一个javascript函数使用模型值的参数(上面列出的状态)来动态设置类css样式。
我不是 100% 确定如何去做。
示例代码:
@using NS.Data
@model NS.Models.PublicationsModel
@{
ViewBag.Title = "PublicationState";
Layout = "~/Views/Shared/_Layout.cshtml";
var PublicationState = Model.PublicationState.ToList();
}
@*Below the idea of the intended "reusable" javascript function*@
<script type="text/javascript" language="javascript">
$(function ToggleCellColour(StepState) {
switch (StepState) {
case "Ready":
return "cssReadyState";
break;
case "Done":
return "cssDoneState";
break;
case "Skipped":
return "cssSkippedState";
break;
default:
return "";
break;
}
});
</script>
<h2>Publication State</h2>
@Html.ActionLink("Back to previous page", "ActionName", "ControllerName", new { returnActive = true }, null)
<table class="table">
<tr>
<th>Client</th>
<th>Availability Communicated to Team</th>
<th>Schedule Test</th>
<th>Tested</th>
<th>Planned Prod Implementation</th>
<th>Implemented to Prod</th>
</tr>
@*Returned Publication States: N/A, Ready, Skipped, Done*@
@foreach (var PubSt in PublicationState)
{
<tr>
<td>@PubSt.Client</td>
<td align="center" class="ToggleCellColour(@PubSt.Availability_Communicated_to_Team)"> @*This is where I thought of calling the javascript method to determine the css formatting for the cell*@
@if (PubSt.Availability_Communicated_to_Team != "N/A")
{
if (PubSt.Availability_Communicated_to_Team == "Done" || PubSt.Availability_Communicated_to_Team == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else @*The "Ready" State*@
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Availability_Communicated_to_Team
}
</td>
<td align="center" class="ToggleCellColour(@PubSt.Schedule_Test)">
@if (PubSt.Schedule_Test != "N/A")
{
if (PubSt.Schedule_Test == "Done" || PubSt.Schedule_Test == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Schedule_Test
}
</td>
<td align="center" class="ToggleCellColour(@PubSt.Tested)">
@if (PubSt.Tested != "N/A")
{
if (PubSt.Tested == "Done" || PubSt.Tested == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Tested
}
</td>
<td align="center" class="ToggleCellColour(@PubSt.Planned_Prod_Implementation)">
@if (PubSt.Planned_Prod_Implementation != "N/A")
{
if (PubSt.Planned_Prod_Implementation == "Done" || PubSt.Planned_Prod_Implementation == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Planned_Prod_Implementation
}
</td>
<td align="center" class="ToggleCellColour(@PubSt.Implemented_on_Prod)">
@if (PubSt.Implemented_on_Prod != "N/A")
{
if (PubSt.Implemented_on_Prod == "Done" || PubSt.Implemented_on_Prod == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Implemented_on_Prod
}
</td>
</tr>
}
}
</table>
可以像我为显示图像所做的那样重复 if else 语句代码,但是我认为通过使用 javascript 函数来简化事情,我可以省去麻烦并引入更少的错误。
任何帮助将不胜感激。
解决方案
如果您使用的是 JQuery,您可以向单元格添加一个数据属性以及一些允许您定位它的标识符(例如类名),然后让不显眼的 JS 为您设置 CSS 类:
<tr>
<td class="coloredCell" data-availability="@PubSt.Planned_Prod_Implementation">stuff</td>
</tr>
然后使用 JS 设置文档的颜色准备就绪:
$(function ()
{
$('.coloredCell').each(function (index, element)
{
var availability = $(element).attr("data-availability");
var cssClass;
switch (availability)
{
case "Ready":
cssClass = "cssReadyState";
break;
case "Done":
cssClass = "cssDoneState";
break;
case "Skipped":
cssClass = "cssSkippedState";
break;
default:
cssClass = "";
break;
}
$(element).addClass(cssClass);
});
});
推荐阅读
- fabricjs - 织物。禁用所有事件/选择。(制作滴管)
- javascript - 根据孩子的内容隐藏父母
- html - 创建四个互相覆盖的 2v2
- vue.js - Javascript 函数在 vuejs 中无法正常工作
- php - AWS 签名请求停止 - IAM 的事情?
- java - LibGDX:Buttonis 在舞台上绘制了两次
- autodesk-forge - Forge Viewer - 上传文件时出错
- amazon-web-services - python包的无服务器部署期间的连接错误
- php - Laravel 一个具有不同请求验证的 API 端点
- javascript - JS - 当新的文本元素添加到页面时,我如何再次运行脚本