Question

我想通过kendo ui创建一个网格，如下图所示。加载数据时，如果级别为零，则字段名称的填充为1，粗体，如果级别2：字体大小较小，填充为10.

// Kendo ui grid

@(Html.Kendo().Grid<Model>()
          .Name("gridModel")
          .HtmlAttributes(new { @class = "table" })
          .DataSource(x => x.Ajax()
                      .Read("ReadData", "Information")

          )       
          .Events(r => r.DataBound("FormatTable"))
          .Columns(c =>
          {

             c.Bound(i=>i.ID)
             ....

我想在加载数据时调用事件来格式化表格。它将检查水平字段的值然后格式化行，但我不知道如何实现它。

// javascript

function FormatTable() {
    alert('b');
    var grid = $("#gridModel").data("kendoGrid");
    grid.closest("tr").has("td:eq(2):contains(1)").setSize(7);
}

这不行。如果您有任何想法，请帮助我。非常感谢。 enter image description here

Answer 1

尝试以下代码（粗体是代码中的更改）

 @(Html.Kendo().Grid<Model>()
      .Name("gridModel")
      .HtmlAttributes(new { @class = "table" })
      .DataSource(x => x.Ajax()
                  .Read("ReadData", "Information")

      )       
      .Events(r => r.DataBound("FormatTable"))
      .Columns(c =>
      {

         c.Bound(i=>i.ID)
         **c.Bound(i=>i.Name).HtmlAttributes(new {@class="grid-name-column"})**
         ....

 function FormatTable() {     
    var grid = $("#gridModel").data("kendoGrid");
    **$.each(data, function (i, row) {
        if (row.Level!= null) {                
            var element = $('tr[data-uid="' + row.uid + '"]');
            $(element).find(".grid-name-column").addCss("level-"+row.Level);
        }
    });**
}

**.level-1{
   margin-left:10px;
}
.level-2{
   margin-left:20px;
}
.level-3{
   margin-left:30px;
}**

希望有所帮助！

将kendo ui grid格式化为层次结构

1 个答案: