Question

我有一个Kendo UI网格，上面有3个命令按钮：

$('#Grid').kendoGrid({
    columns: [{
        field: "Data1",
    },
    {
        field: "Data2"
    },
    {
    command: [{
        text: " ",
        click: testFunction,
        iconClass: "fa fa-align-justify"
    },
    {
        text: " ",
        click: testFunction2,
        iconClass: "fa fa-code"
     },
     {
         text: " ",
         click: testFunction3,
         iconClass: "fa fa-database"
     }]
     }],
     dataSource: {
          pageSize: 10,
          data: data
     }
});

具有以下功能：

testFunction: function () {
    alert("testFunction");
},

testFunction2: function () {
    alert("testFunction2");
},

testFunction3: function () {
    alert("testFunction3");
}

但是，当我单击命令按钮之一时，所有3个功能都会被触发。

有人知道为什么会这样吗？

有什么方法可以防止这种行为，因此只有与单击的按钮相连的功能才会触发？

Answer 1

向每个命令按钮添加name属性，例如：

command: [{
    text: " ",
    click: testFunction,
    iconClass: "fa fa-align-justify",
    name: "btn1"
}

Demo：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      var testFunction= function () {
        alert("testFunction");
      },

      testFunction2= function () {
          alert("testFunction2");
      },

      testFunction3= function () {
          alert("testFunction3");
      };
      
      $('#Grid').kendoGrid({
          columns: [{
              field: "Data1",
          },
          {
              field: "Data2"
          },
          {
          command: [{
              text: " ",
              click: testFunction,
              iconClass: "fa fa-align-justify",
            name: "btn1"
          },
          {
              text: " ",
              click: testFunction2,
              iconClass: "fa fa-code",
            name: "btn2"
           },
           {
               text: " ",
               click: testFunction3,
               iconClass: "fa fa-database",
            name: "btn3"
           }]
          }],
        dataSource: {
          pageSize: 10,
          data: [{a: 1}]
        }
      });
    });
  </script>
</head>
<body>
  <div id="Grid"></div>
</body>
</html>

Kendo UI网格命令可通过不同的命令按钮触发多种功能

1 个答案: