2

我有一个使用 detailInit 方法实现的网格内网格场景。在这里，当用户进行编辑时，我会进行一些计算，这些计算会更改父子节点中的数据。然后刷新数据，我将调用 datasource.read 来呈现数据。这有效并且显示了数据，但是任何展开的细节网格都会被折叠，有什么办法可以防止这种情况发生。

4

4 回答 4

5

要回答这个问题和另一个问题：

“我想出了如何从子节点设置主数据，但是，当更新任何内容时，整个表都会折叠子网格，这是一个非常烦人的行为，无论如何我可以只更新主表中的字段而无需它折叠了所有子元素？（基本上，更新列，没有更新表）“

在另一个线程中：telerik

这是 Kendo Grid 极其烦人的行为，也是一个重大错误。从什么时候开始有人希望子网格消失并隐藏刚刚进行的更改！但这不是唯一的问题。change 函数被调用斐波那契数次，这将在大量点击后冻结浏览器。话虽如此，这是我提出的解决方案：

在主网格中

 $('#' + grid_id).kendoGrid({
     width: 800, 
     ...
     detailExpand: function (e) {
         var grid = $('#' + grid_id).data("kendoGrid");
         var selItem = grid.select();
         var eid = $(selItem).closest("tr.k-master-row").attr('data-uid')
         if (contains(expandedItemIDs, eid) == false)
              expandedItemIDs.push(eid);
 },
 detailCollapse: function (e) {
    var grid = $('#' + grid_id).data("kendoGrid");
    var selItem = grid.select();
    var eid = $(selItem).closest("tr.k-master-row").attr('data-uid')
    for (var i = 0; i < expandedItemIDs.length; i++)
        if (expandedItemIDs[i] == eid) 
            gridDataMap.expandedItemIDs.splice(i, 1);
},

不幸的是，在全球范围内，我们有：

function subgridChange() {
      var grid = $('#' + grid_id).data("kendoGrid");
      for (var i = 0; i < expandedItemIDs.length; i++)
       grid.expandRow("tr[data-uid='" + expandedItemIDs[i] + "']");
}
function contains(a, obj) {
   for (var i = 0; i < a.length; i++) 
       if (a[i] === obj)  return true;
   return false;
}
expandedItemIDs = [];

现在每次对子网格进行更改时都需要调用“subgridChange()”函数。

问题是子网格中的更改函数被调用的次数在每次更改调用时呈指数增长。Kendo 网格应该能够调用停止传播函数来防止这种情况发生，或者至少让程序员可以访问事件对象，以便程序员可以防止传播。在完全恼火之后，我们要做的就是将 'subgridChange()' 函数放在子网格 'datasource' 中，如下所示：

dataSource: function (e) {
    var ds = new kendo.data.DataSource({
        ...
        create: false,
        schema: {
            model: {
                ...
            }
        },

        change: function (e) {
            subgridChange();
        }
    });
    return ds;
}

我还必须使用类似这样的东西将“subgridChange()”函数放在“添加”按钮函数中

$('<div id="' + gridID + '" data-bind="source: prodRegs" />').appendTo(e.detailCell).kendoGrid({
      selectable: true,
      ...
      toolbar: [{ template: "<a class='k-button addBtn' href='javascript://'><span class='k-icon  k-add' ></span> Add Product and Region</a>" }]
});

$('.addBtn').click(function (event) {
    ...
    subgridChange();
});
于 2014-02-19T17:57:28.307 回答
2

当用户选择一行时，记录所选行的索引。然后在您的数据刷新后，使用以下代码展开一行

// get a reference to the grid widget
var grid = $("#grid").data("kendoGrid");
// expands first master row
grid.expandRow(grid.tbody.find(">tr.k-master-row:nth-child(1)"));

要展开不同的行，只需将nth-child()选择器中的数字更改为要展开的行的索引。

于 2012-08-28T02:10:38.477 回答
0

实际上，所需要的只是主网格“dataBound”函数中的“subgridChange()”函数：

 $('#' + grid_id).kendoGrid({
      ...
      dataBound: function (e) {
          gridDataMap.subgridChange();
      }
  });
于 2014-02-19T19:08:27.457 回答
0

我用于相同问题的不同但相似的解决方案：

       expandedItemIDs = [];

            function onDataBound() {
        //expand rows
                    for (var i = 0; i < expandedItemIDs.length; i++) {
                        var row = $(this.tbody).find("tr.k-master-row:eq(" + expandedItemIDs[i] + ")");
                        this.expandRow(row);
                    }
                }

        function onDetailExpand(e) {
            //refresh the child grid when click expand
            var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
            grid.dataSource.read();
            //get index of expanded row       
            $(e.detailCell).text("inner content");
            var row = $(e.masterRow).index(".k-master-row");
            if (contains(expandedItemIDs, row) == false)
                expandedItemIDs.push(row);
        }

        function onDetailCollapse(e) {
    //on collapse minus this row from array
            $(e.detailCell).text("inner content");
            var row = $(e.masterRow).index(".k-master-row");
            for (var i = 0; i < expandedItemIDs.length; i++)
                if (expandedItemIDs[i] == row)
                    expandedItemIDs.splice(i, 1);
        }

        function contains(a, obj) {
            for (var i = 0; i < a.length; i++)
                if (a[i] === obj) return true;
            return false;
        }
于 2017-12-05T12:19:07.730 回答