Kendo UI Grid - 如何将类添加到生成的表中

Posted 2023-05-07

【中文标题】Kendo UI Grid - 如何将类添加到生成的表中

【英文标题】：KendoUI Grid - how to add a class to the generated table

【发布时间】：2013-05-24 15:43:43

【问题描述】：

我正在使用 ajax 数据源生成 KendoUI 网格。该表已生成，默认情况下没有类。为了使它与网站的其他部分保持一致，我想为其添加一个“交互式”类。

$("#pending_documents").kendoGrid(
    dataSource: 
        transport: 
            read: "/get-data?type=1"
        ,
        schema: 
            data: "data",
            total: "total"
        ,
        pageSize: 2,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        reorderable: true
    ,
    height: 500,
    filterable: 
        extra: false
/*
, ui: "datetimepicker" // use Kendo UI DateTimePicker
*/
    ,
    sortable: true,
    pageable: 
        pageSize: 2        ,
    columns: [...]
);
    );

我知道我可以使用JQuery.addClass() 方法来执行此操作，在生成网格后运行，但是是否可以在网格设置/配置中进行设置？

提前致谢。

【参考方案1】：

我猜你别无选择，只能使用addClass()。在他们的文档中找不到任何关于使用 JS 中的内置属性设置网格（不是网格列）htmlAttributes 的内容。我也试过了，没有成功。除非你这样声明（C#）：

@(Html.Kendo().TabStrip()
    .Name("TabStrip")
    .HtmlAttributes( new  @class = "newclass")
)

但是如果你真的在 JS 中需要它，那么你将不得不这样做：

$("#pending_documents").kendoGrid(
dataSource: 
   //code
  
).addClass("newclass");

【讨论】：

是的，不幸的是，该类需要直接应用于表格，所以我唯一的选择是按照我在问题中所述的方式生成的表格之后添加它。感谢您花时间进行调查！

【参考方案2】：

您也可以使用TableHtmlAttributes()

@(Html.Kendo().Grid<Object>()
        .Name("dataGrid").TableHtmlAttributes(new  @class = "interactive" )

【参考方案3】：

我这样做的方法是将它添加到我的配置中的列中，在attributes 部分。根据您要设置类的列，执行以下操作：

columns: [ field: 'Name', title: 'Company Name', width: '250px',attributes: 
                    "class": "class1 class2"
                ,
           .
           .
           .
           .
           .
           .
           .]

这样，“名称”列中的所有项目（在我的例子中）都在网格初始化时设置了它们的类。不需要做额外的 jquery 来添加类。我一开始就尝试过。使用 jquery 方式（使用 addClass）进行操作，直到我尝试对列进行排序，然后绑定中断（可能是因为我们在实现中使用的魔法）。按照我上面的方式完成后，我的绑定即使在排序后也能正常工作。

【讨论】：

嗨，DJ Burb 是否可以让您通过 knockout.js 而不是 aJax 嵌入数据？谢谢

这对我很有用...唯一需要注意的是不能使用模板...即以下内容不起作用....模板：'#=Name#'，属性： 'class': 'ui-icon-arrowthick-2-n-s', ....

【参考方案4】：

您可以通过在原始元素中定义一个类来做到这一点，您使用过，例如：

<div id="pending_documents" class="your-class-name"> </div>