单击更改剑道网格行答案

【问题标题】：Change Kendo grid row on click单击更改剑道网格行
【发布时间】：2014-01-03 17:38:49
【问题描述】：

我希望有人可以在这方面提供帮助。我在 html 文档中有一个剑道网格（没有 MVC），我想在行选择上更改整行的类。我尝试了各种方法，仍然没有运气。我目前在：

// 在剑道网格定义中 - 名为“#grid”的网格

    change: function (e) {
        $("#grid tbody").find("tr[k-state-selected]").css("color", "black");
        var id = $("#grid").closest("tr").css("color", "black");
        CallDocument(this._data[0]);
    },

函数 CallDocument 正在被触发，所以我知道我至少可以访问该函数。

编辑：这是我想出的解决方案，感谢大家

change: function (e) {
            $("#grid tbody").find("tr.k-state-selected").attr("class", "detail read k-state-selected");

    },

我需要使用“tr.k-state-selected”表单，并使用 attr 进行更改以更改类集。

【问题讨论】：

您能否在选择器级别中断链并调试并执行 console.log 或旧警报以查看是否选择了实际行。休息看起来不错，我认为选择器无法到达该行。什么是 k-state-selected？
'k-state-selected' in kendo 保证为选中行。所以我应该能够扫描表以查找具有“k-state-selected”的行并更改类。
所以 k-state-selected 是该行元素 tr 上的一个类？而不是 tr[k-state-seected] 你应该在你的 find 方法中使用 tr.k-state-selected
谢谢，这对我刚刚提出的解决方案有所帮助。
您可以使用 jquery 函数，如 addClass 和 removeClass 而不是 attr，这不会影响任何现有的类，只需添加和删除您指定的类。例如$("#grid tr.k-state-selected").addClass("detail") 会将这个类添加到 #grid 内的 tr 中，removeClass 将删除它。

标签： select grid kendo-ui row

【解决方案1】：

要将每个访问的行标记为选中，您可以在 change 事件上添加一个 CSS 类。

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    selectable: true,
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" },
        { field: "City", width: 200 }
    ],
    change : function (e) {
        this.select().addClass("ob-selected");
    }
}).data("kendoGrid");

当您移动到另一个单元格时，ob-selected 类会保留，因为这与 KendoUI 无关。

此处示例：http://jsfiddle.net/2TGLp/1/

唯一的问题是，如果您应用过滤器，它不会保持选中状态，更改到其他页面...但不确定这对您是否重要。

【讨论】：

我现在已经让这个工作了，就像你建议的那样。我有一些与当前行关联的类，所以我把它放在网格更改事件上：change: function (e) { $("#grid tbody").find("tr.k-state-selected") .attr("class", "detail read k-state-selected"); CallDocument(this._data[0]); },

【解决方案2】：

我使用 css 和 javascript 覆盖了我的剑道样式（取决于场景）。

CSS：

.k-state-selected {
    color: black;
}

Javascript/jQuery：

$('k-state-selected').css('color', '#000000')

【讨论】：

谢谢，但要详细说明，一旦我转到另一行，我需要让课程持续存在。
然后我们可以添加一个类（例如，.black { color: #000 !important }) using javascript and use !important` 如有必要。这可以通过使用 $('#grid k-state-selected').addclass('black')