Kendo ui 在KendoUIGrid的单元格中有条件地隐藏按钮_Kendo Ui_Kendo Grid

Kendo ui 在KendoUIGrid的单元格中有条件地隐藏按钮

kendo-ui

Kendo ui 在KendoUIGrid的单元格中有条件地隐藏按钮,kendo-ui,kendo-grid,Kendo Ui,Kendo Grid,我有一个剑道UI网格，其中一列有一个按钮，但我无法根据按钮所在的行（在本例中为第一行和最后一行）隐藏按钮我该怎么做我的代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="http://kendo.cdn.

我有一个剑道UI网格，其中一列有一个按钮，但我无法根据按钮所在的行（在本例中为第一行和最后一行）隐藏按钮

我该怎么做

我的代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>

</head>
<body>

<div id="grid">  
</div>

<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
        { width: 150, 
            command:            
                    [
                {
                    name:"Up",
                    imageClass: "k-icon k-i-arrow-s",
                    click: function(e) {
                        var tr = $(e.target).closest("tr"); 
                        var item = this.dataItem(tr);
                        var dir = "U";
                        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                        moveItem.moveUp(dir,dataItem.order).addCallback(function(response){
                        alert(response);
                        })
                    }
                },
          ]
            }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn(grid.columns[0].columns[0]);
</script>
</body>
</html>


剑道UI片段
$（“#网格”）.kendoGrid({
栏目：[
{字段：“名称”}，
{字段：“年龄”}，
{宽度：150，
命令：
[
{
姓名：“向上”，
imageClass:“k图标k-i-arrow-s”，
点击：功能（e）{
var tr=$（e.target）；
var项目=此.dataItem（tr）；
var dir=“U”；
var dataItem=this.dataItem（$（e.currentTarget）.closest（“tr”）；
moveItem.moveUp（dir，dataItem.order）.addCallback（函数（响应）{
警报（响应）；
})
}
},
]
}
],
数据源：[
{姓名：“Jane Doe”，年龄：30}，
{姓名：“约翰·多伊”，年龄：33}
]
});
var grid=$（“#grid”）.data（“kendoGrid”）；
grid.hideColumn（grid.columns[0].columns[0]）；

==================

我添加了包含moveItem.moveItemUp方法的代码

在这个方法中，我使用一个远程过程调用来执行一些服务器端javascript。实际上，这与隐藏按钮无关

<xe:jsonRpcService
        id="jsonRpcService1"
        serviceName="moveItem">
        <xe:this.methods>
            <xe:remoteMethod
                name="moveUp"
                script="return direction + order">
                <xe:this.arguments>
                    <xe:remoteMethodArg
                        name="direction"
                        type="string">
                    </xe:remoteMethodArg>
                    <xe:remoteMethodArg
                        name="order"
                        type="number">
                    </xe:remoteMethodArg>
                </xe:this.arguments>
            </xe:remoteMethod>
        </xe:this.methods>
    </xe:jsonRpcService>

定制剑道UI网格行和单元格外观有三种方法：

行和列模板不提供有关数据项索引的信息，因此剩余的选项是使用

dataBound

事件，获取网格，找到第一个和最后一个子表行，最后隐藏其中的按钮。按钮将具有

k-grid-Up

CSS类，即根据命令

name

（区分大小写）。

在网格内隐藏控件的一种方法是通过CSS。可以创建以下样式来隐藏行中的第一个和最后一个按钮：

#grid> tbody > tr:first-child > td > input {
  display:none;
}

#grid> tbody > tr:last-child > td > input {
  display:none;
}

（您需要更改这些样式以使其与您的特定网格和按钮配合使用）。

请共享方法“moveItem.moveUp”代码。您是否只需要在第一行和最后一行隐藏按钮，或者带禁用按钮的行会有所不同吗？在这种情况下，我需要在第一行禁用向下按钮，在最后一行禁用向上按钮。我的回答有帮助吗？