将 kendo ui 网格格式化为层次结构答案

【问题标题】：Format kendo ui grid to hierarchy将 kendo ui 网格格式化为层次结构
【发布时间】：2014-06-16 23:37:26
【问题描述】：

我想通过 kendo ui 创建一个网格，如下图所示。加载数据时，如果 level 为 0，则字段名的 padding 为 1，加粗，如果 level 2：font-size small，padding 为 10。

// 剑道 ui 网格

@(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);
}

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

【问题讨论】：

标签： javascript jquery kendo-ui kendo-asp.net-mvc

【解决方案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;
}**

希望对您有所帮助！

【讨论】：