Question

我在Kendo UI中显示结果，并为用户提供通过客户端Web部件属性设置的背景颜色。下面是我的数据绑定功能

dataBound:   function(){
        $("#grid tr:odd").css("background-color", searchParams["c1"]);


            $("#grid tr:even").css("background-color", searchParams["c2"]);


            $("#grid tr:odd").hover(function () {
                $(this).css("background-color", searchParams["c3"]);
            }, function () {
                $(this).css("background-color", searchParams["c1"]);
            });


            $("#grid tr:even").hover(function () {
                $(this).css("background-color", searchParams["c4"]);
            }, function () {
                $(this).css("background-color", searchParams["c2"]);
            });


            **$("#grid tr").on('click', function () {
                $(this).css("background-color", searchParams["c5"]);
                $(this).css("border-color", searchParams["c5"]);
            } );**

    }

SearchParams是一个检索用户选择的颜色的函数。我可以设置行的背景颜色（奇数和偶数以及它们的悬停颜色）。但是，当我尝试设置所选行的背景颜色（代码介于之间）时，这不起作用。如果未添加行颜色，则选定的行颜色有效，但添加行颜色时，选择的行颜色不起作用。我知道行颜色正在上升，但不知道如何处理这个问题。

感谢任何帮助。谢谢。

Answer 1

我并不完全明白什么是想要实现或要求。但是根据我从问题中得到的解决方案，你可以尝试的解决方案是使用 k-state-selected 类，这个类将被添加到你点击/选择的td中，所以这里是代码

  $("#grid tr").on('click', function () {
      if($(this).find("td .k-state-selected")){
          $(this).css("background-color", "pink");
      } 
  });

问题是，它只会使选定的粉红色，但您已经选择的另一个粉红色。相反，也可以通过添加此

来尝试使用kendo grid's change event

change:function(e){
    $("#grid tr:odd").css("background-color", "red");
    $("#grid tr:even").css("background-color", "green");
    $("tr:has(td.k-state-selected)").css("background-color", "pink");
},

Working Example Here

如何以编程方式设置所选颜色kendo ui网格的背景颜色

1 个答案: