Question

我可以使用if条件在列中显示命令

数据源：

[
    {
        "ProductID":1,
        "ProductName":"Chai",
        "UnitPrice":18,
        "UnitsInStock":39,
        "Discontinued":false
    },{
        "ProductID":2,
        "ProductName":"Chang",
        "UnitPrice":19,
        "UnitsInStock":17,
        "Discontinued":false
    }
]

我想在列声明中添加条件

$("#my_workspaces_grid").kendoGrid({
    dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
        {
            field: "ProductName", 
            title: "Project"
        },
        { 
            field: "UnitsInStock", 
            title: "WorkspacePath", 
            width: 400
        },
        {
            command: ["edit", "destroy"],
            title: "&nbsp;", width: 180
        }
});

帮帮我预先感谢

Answer 1

您可以使用template。检查以下演示。

$("#grid").kendoGrid({
    dataSource: {
        data:[
                {
                 "ProductID":1,
                 "ProductName":"Chai",
                  "UnitPrice":18,
                  "UnitsInStock":39,
                  "Discontinued":true
                },{
                "ProductID":2,
                "ProductName":"Chang",
                "UnitPrice":19,
                "UnitsInStock":17,
                "Discontinued":false
               }
              ]
    },
     pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            { field: "ProductID", title: "Id"  },
            { field: "ProductName", title: "Name"  },
            { field: "UnitsInStock", title: "WorkspacePath", width: 400},
            { field: "Discontinued", title:"DSP",
              template: "# if (Discontinued) {# <button onClick=function1()>Edit</button> # } else {  # <button onClick=function2()>Destroy</button> # } #"
           }]
 });

<head>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
   </body>

在Kendo Grid中基于条件应用样式

1 个答案: