关闭上一个主行时，如何选择并打开下一个主行明细行？

时间：2019-01-16 20:18:44

标签： jquery kendo-ui kendo-grid

我有一个使用detailInit的网格，当我展开一行并从detailrow的网格中选择一个值时，它会合并masterrow，但是我不知道如何在masterrow是之后选择并打开下一行的detail单元格关闭。

以下是一些截图，可以提供更好的解释

Open masterrow 我从详细信息行网格中选择一行

它关闭，应该看起来像这样 enter image description here

我不是很确定如何做到这一点

var gridData = [{
    "ID": "1",
    "FName": "Adam",
    "LName": "Zoo"
  },
  {
    "ID": "2",
    "FName": "Ben",
    "LName": "York"
  },
  {
    "ID": "3",
    "FName": "Chris",
    "LName": "Xavier"
  },
  {
    "ID": "4",
    "FName": "Dan",
    "LName": "Went"
  },
  {
    "ID": "5",
    "FName": "Eddy",
    "LName": "Victor"
  },
  {
    "ID": "6",
    "FName": "Freddy",
    "LName": "Under"
  },
  {
    "ID": "7",
    "FName": "George",
    "LName": "Trenton"
  },
  {
    "ID": "8",
    "FName": "Harry",
    "LName": "Salvador"
  }
];

var detailData = [{
    "ID": "9",
    "City": "Arlen",
    "Province": "Ontario"
  },
  {
    "ID": "10",
    "City": "Bancroft",
    "Province": "Ontario"
  },
  {
    "ID": "11",
    "City": "Calgary",
    "Province": "Alberta"
  },
  {
    "ID": "12",
    "City": "Dartmouth",
    "Province": "Ontario"
  },
  {
    "ID": "13",
    "City": "Embro",
    "Province": "Ontario"
  },
  {
    "ID": "14",
    "City": "Fullerton",
    "Province": "Ontario"
  },
  {
    "ID": "15",
    "City": "Georgetown",
    "Province": "Ontario"
  },
  {
    "ID": "16",
    "City": "Huntsville",
    "Province": "Ontario"
  }
]

$(document).ready(function() {
  LoadGridData();
});

function LoadGridData() {
  $('#MyGrid').kendoGrid({
    dataSource: {
      data: gridData
    },
    schema: {
      model: {
        id: "ID",
        fields: {
          ID: {
            type: "string"
          },
          FName: {
            type: "string"
          },
          LName: {
            type: "string"
          }
        }
      }
    },
    columns: [{
        field: "ID",
        title: "ID"
      },
      {
        field: "FName",
        title: "First"
      },
      {
        field: "LName",
        title: "Last"
      }
    ],
    height: 550,
    detailInit: detailInitGrid,
    detailExpand: function(e) {
      this.select(e.detailRow.prev());
      this.collapseRow(this.tbody.find('> tr.k-master-row').not(e.masterRow));
    }
  });
}
var masterRow;

function detailInitGrid(e) {
  masterRow = e.masterRow;
  $("<div/>").appendTo(e.detailCell).kendoGrid({
    dataSource: {
      data: detailData
    },
    columns: [{
        field: "ID",
        title: "ID"
      },
      {
        field: "City",
        title: "City"
      },
      {
        field: "Province",
        title: "Province"
      }
    ],
    selectable: true,
    change: function(e) {
      let index = this.select().index();
      let dataItem = this.dataSource.view()[index];

      let grid = $("#MyGrid").data("kendoGrid");
      $(".k-master-row").each(function(index) {
        grid.collapseRow(this);
        $(this).removeClass("k-state-selected");
      });
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="MyGrid"></div>

1 个答案:

答案 0 :(得分：1)

您可以在change事件中计算当前主行ID的值：

var nmr = +e.sender.element.closest('tr').prev().find('[role=gridcell]:first').text();

因此，在每个循环之后，您可以打开下一个主行：

grid.expandRow(".k-master-row:eq(" + nmr + ")");
$(".k-master-row:eq(" + nmr + ")").addClass("k-state-selected");


var gridData = [{
  "ID": "1",
  "FName": "Adam",
  "LName": "Zoo"
},
  {
      "ID": "2",
      "FName": "Ben",
      "LName": "York"
  },
  {
      "ID": "3",
      "FName": "Chris",
      "LName": "Xavier"
  },
  {
      "ID": "4",
      "FName": "Dan",
      "LName": "Went"
  },
  {
      "ID": "5",
      "FName": "Eddy",
      "LName": "Victor"
  },
  {
      "ID": "6",
      "FName": "Freddy",
      "LName": "Under"
  },
  {
      "ID": "7",
      "FName": "George",
      "LName": "Trenton"
  },
  {
      "ID": "8",
      "FName": "Harry",
      "LName": "Salvador"
  }
];

var detailData = [{
  "ID": "9",
  "City": "Arlen",
  "Province": "Ontario"
},
  {
      "ID": "10",
      "City": "Bancroft",
      "Province": "Ontario"
  },
  {
      "ID": "11",
      "City": "Calgary",
      "Province": "Alberta"
  },
  {
      "ID": "12",
      "City": "Dartmouth",
      "Province": "Ontario"
  },
  {
      "ID": "13",
      "City": "Embro",
      "Province": "Ontario"
  },
  {
      "ID": "14",
      "City": "Fullerton",
      "Province": "Ontario"
  },
  {
      "ID": "15",
      "City": "Georgetown",
      "Province": "Ontario"
  },
  {
      "ID": "16",
      "City": "Huntsville",
      "Province": "Ontario"
  }
]

$(document).ready(function () {
  LoadGridData();
});

function LoadGridData() {
  $('#MyGrid').kendoGrid({
      dataSource: {
          data: gridData
      },
      schema: {
          model: {
              id: "ID",
              fields: {
                  ID: {
                      type: "string"
                  },
                  FName: {
                      type: "string"
                  },
                  LName: {
                      type: "string"
                  }
              }
          }
      },
      columns: [{
          field: "ID",
          title: "ID"
      },
          {
              field: "FName",
              title: "First"
          },
          {
              field: "LName",
              title: "Last"
          }
      ],
      height: 550,
      detailInit: detailInitGrid,
      detailExpand: function (e) {
          this.select(e.detailRow.prev());
          this.collapseRow(this.tbody.find('> tr.k-master-row').not(e.masterRow));
      }
  });
}

var masterRow;

function detailInitGrid(e) {
  masterRow = e.masterRow;
  $("<div/>").appendTo(e.detailCell).kendoGrid({
      dataSource: {
          data: detailData
      },
      columns: [{
          field: "ID",
          title: "ID"
      },
          {
              field: "City",
              title: "City"
          },
          {
              field: "Province",
              title: "Province"
          }
      ],
      selectable: true,
      change: function (e) {
          let index = this.select().index();
          let dataItem = this.dataSource.view()[index];

          let grid = $("#MyGrid").data("kendoGrid");

          $(".k-master-row").each(function (idx, ele) {
              grid.collapseRow(this);
              $(this).removeClass("k-state-selected");

          });
          // open next master row...
          var nmr = +e.sender.element.closest('tr').prev().find('[role=gridcell]:first').text();
          grid.expandRow(".k-master-row:eq(" + nmr + ")");
          $(".k-master-row:eq(" + nmr + ")").addClass("k-state-selected");

      }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>


<div id="MyGrid"></div>

相关问题
最新问题