Jquery 在按钮上显示文本并更改按钮剑道UI的颜色

我想根据数据库中的值在按钮上显示文本

因此，每一行的按钮文本都不同（例如：在用、过期、30天过期）

1） 如何在剑道行的按钮中显示文本

2） 我想根据以上3个值更改按钮的颜色。（例如：在用-绿色，过期-红色，30天过期-黄色）

我想在下面的代码中的自定义命令按钮中显示该按钮

我该怎么做

@(Html.Kendo().Grid(Model)
       .Name("grid")
       .Columns(columns =>
       {
           columns.Bound(c => c.UserName).Title("User").Filterable(false);               
           columns.Bound(c => c.Role).Title("Role");               
           //columns.Command(command => command.Custom().Click("showDetails"));
       })
       .HtmlAttributes(new { style = "height: 500px;" })
       .Sortable()
       .Scrollable(x => x.Height(400))
       .Filterable()
       .Pageable(x => x.Enabled(true).PreviousNext(false).PageSizes(true))
   )

---

看起来您正在对网格进行服务器端绑定。在这种情况下，需要使用列生成器的Template（）方法

我试着复制你的场景。我有一个定义如下的模型：

 public class StatusModel
    {
        public string Col1 { get; set; }
        public string Status { get; set; }
    }

然后在我的控制器中，我正在创建一个包含以下3项的列表：

public ActionResult Index()
        {
            var data = new List<StatusModel>()
            {
                new StatusModel {Col1="Row 1",Status="In Service" },
                new StatusModel {Col1="Row 2",Status="Expire" },
                new StatusModel {Col1="Row 3",Status="30 days Expire" },
            };
                return View(data);
        }

public ActionResult Index（）
{
变量数据=新列表（）
{
新的状态模型{Col1=“Row 1”，Status=“In Service”}，
新的StatusModel{Col1=“Row 2”，Status=“Expire”}，
新状态模型{Col1=“第3行”，Status=“30天到期”}，
};
返回视图（数据）；
}

在视图中，您需要如何定义网格：

@(Html.Kendo().Grid(Model)
                  .Name("kGrid")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.Col1).Title("Column 1");
                      columns.Bound(c => c.Status).Template(@<text>
                        @if (@item.Status == "In Service")
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:green;color:white;width:150px" })
                        }
                        else if (@item.Status == "Expire")
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:red;color:white;width:150px" })
                        }
                        else
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:orange;color:white;width:150px" })
                        }
                    </text>);
                  })
            )

@（Html.Kendo（）.Grid（模型）
.名称（“kGrid”）
.列（列=>
{
columns.Bound（c=>c.Col1）.Title（“Column 1”）；
columns.Bound（c=>c.Status）.Template(@
@如果（@item.Status==“在用”）
{
@Html.Kendo（）.Button（）.Name（“kButton”）.Content（@item.Status）.HtmlAttributes（新{style=“background color:green；color:white；width:150px”}）
}
如果（@item.Status==“到期”），则为else
{
@Html.Kendo（）.Button（）.Name（“kButton”）.Content（@item.Status）.HtmlAttributes（新{style=“background color:red；color:white；width:150px”}）
}
其他的
{
@Html.Kendo（）.Button（）.Name（“kButton”）.Content（@item.Status）.HtmlAttributes（新{style=“background color:orange；color:white；width:150px”}）
}
);
})
)

您可以通过执行if-else来进一步优化代码，以确定可以应用的CSS类，最后调用Kendo.Button（）并将CSS类作为HTML属性传递

---

希望这有帮助

听起来像是ClientTemplate的工作