Telerik的剑道UI格：分组和排序生存grid.refresh（），但倒塌的群体得到扩大;

2019-08-04 08:03发布

站内文章 / 前沿技术

124 0

放荡不羁爱自由

女 | 书童

私信

如在“仪表板”应用程序，监视动态变化的数据，我的（Telerik的）是典型的网格剑道UI网格被刷新以周期性地刷新数据，每60秒：

grid.dataSource.data(freshData);
grid.refresh();  // have been informed this refresh may not be necessary

该模式没有改变，但一些新的行可能在数据集中显示了一些可能已被删除。

虽然grid.refresh()离开分组保存完好，也被保留的那种状态，任何塌陷组得到扩展。

问：如何保存（或恢复）组（这样注重与其他群体的特定扩展群用户倒塌没有造成不便/通过，其中每个群组来重新扩大了定期更新受挫的展开/折叠状态默认）？

编辑：一些的WinForms网格提供了一种“拍摄快照”组展开/刷新数据之前崩溃状态，然后将数据源刷新后重新应用状态。 如果剑道UI网格组头行了的UID（幸存刷新），这是可以做到。 但看到下面的建议的方法不涉及持久的UID。

使用案例：这是一个典型的，如果有些戏剧性的情况下使用该功能。疾病预防中心是监控流感的特定菌株的实时爆发，由城市。每15秒的数据集被刷新。它们发生在洛杉矶的那一刻被聚焦和具有城市扩大，而其他城市倒塌。如果每15秒对整个电网的扩大，这尿尿关闭在CDC的医生和他们去扼杀程序员，然后他们回家打高尔夫球，每个人都在洛杉矶屈从。难道剑道真正要负责的是灾难？

可能的功能改进建议：忽略我上面的左右一个UID建议。这里有一个更好的办法。网格有

<div class="k-group-indicator" data-field="{groupedByDataFieldName}">
    ...
</div>

现在，如果该K-基指示器DIV可以包含的不同的值的列表data-field与每个键的相关联的数据作为对应的节的展开/折叠状态时，其将随后有可能该列表保存到缓冲拨打电话到dataSource.data（someNewData）方法，然后在事件处理程序侦听数据绑定事件之前，这些扩大的状态，可以重新申请。要查找分组值对应的分组节，这将是非常有益的，如果k-grouping-row可能有一个属性称为group-data-value ，其持有的特定分组段，如“销售”或分组值“营销”，如果一个被称为部门数据字段分组。

<div class="k-group-indicator" data-field="dept" data-title="Dept" data-dir="asc">
       ...
   <div class="k-group-distinct-values">
     <div group-data-value="Sales" aria-expanded="false" />
     <div group-data-value="Events Planning" aria-expanded="true" />
   </div>  
</div>

然后在k-grouping-row ： <tr class="k-grouping-row" group-data-value="Sales">

Answer 1:

这是可以理解的，这是不是一个内置功能。这是很复杂的，因为如果你嵌套了分组，你必须要记住，它的存在的层次中的每个折叠组。由于项目将进出数据源来移动，这将是一个痛苦的跟踪。

这就是说，这里是完成你想要的，只要你不要太复杂了非常hackish的方式。它只是使用了groupHeaderTemplate属性设置为UID添加到每个分组行。我只是用列名+值的UID，如果你进入多个分组在技术上是错误的，但它是一个例子不够好。

你刷新你可以找到从剑道有现在ARIA属性晕倒组从那里，前（边注，你必须要使用2012 Q3这个工作）。然后深入和获取由模板添加的UID。

刷新后，你可以找到一个匹配的UID的行，并将它们传递到网格的.collapseGroup()函数来重新折叠它。

下面是一个说明这个工作的jsfiddle。

而从副本的jsfiddle /粘贴的代码（请注意，我只设置在城市列的模板，所以才有了城市列将保持在这个例子中分组崩溃！）：

HTML：

<button id="refresh">Refresh</button>
<div id="grid" style="height: 380px"></div>

JavaScript的：

var _getCollapsedUids = function () {
    var collapsedUids = [];
    $("#grid .k-grouping-row span[data-uid]")
        .each(function(idx, item) {
            if($(item)
               .closest(".k-grouping-row")
               .children("td:first")
               .attr("aria-expanded") === "false") {
                collapsedUids.push($(item).data("uid"));
            }
        }
    );
    return collapsedUids;
};

var _collapseUids = function (grid, collapsedUids) {
    $("#grid .k-grouping-row span[data-uid]")
        .each(function(idx, item) {
            if($.inArray($(item).data("uid"), collapsedUids) >= 0) {
                console.log("collapse: " + $(item).data("uid"))
                grid.collapseGroup($(item).closest("tr"));
            }
        }
    );
};

var refresh = function () {
    var collapsedUids = _getCollapsedUids();
    var grid = $("#grid").data().kendoGrid;
    grid.dataSource.data(createRandomData(50));
    _collapseUids(grid, collapsedUids);
};

$("#refresh").click(refresh);

$("#grid").kendoGrid({
    dataSource: {
        data: createRandomData(50),
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [ {
            field: "FirstName",
            width: 90,
            title: "First Name"
        } , {
            field: "LastName",
            width: 90,
            title: "Last Name"
        } , {
            width: 100,
            field: "City",
            groupHeaderTemplate: '<span data-uid="City-#=value#">#= value #</span>'
        } , {
            field: "Title"
        } , {
            field: "BirthDate",
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        } , {
            width: 50,
            field: "Age"
        }
    ]
});

个人而言，我真的不喜欢这个解决方案在所有。这是太哈克和太多的DOM遍历。但是没有重新实现网格控件我想不出更好的方式来做到这一点。也许这将是你所要完成的还是给你一个更好的主意什么不够好。

最后一点; 我查了剑道UI源代码，它不会出现跟踪哪些分组展开/折叠。他们做的相似，我与咏叹调属性做了什么，而是检查驱动图标状态类：

            if(element.hasClass('k-i-collapse')) {
                that.collapseGroup(group);
            } else {
                that.expandGroup(group);
            }

如果您使用的不是剑道2012 Q3和不能使用的咏叹调扩展属性，你可以改变代码来检查图标类代替。

Answer 2:

“回答”我自己的问题只是为了获得答案的编辑器的代码格式化的更好的可读性。这是讨论的一个扩展。

我同意，嵌套的分组更加复杂。如果每个k-grouping-row具有包含不同数据值的阵列在其上分组基于的JSON-表示的特性，这将是开发人员能够提取从每个数据值的不同组合的折叠K-分组-行。（这将有助于如果第k分组行直接表示，它是否展开或折叠但信息可以从它所包含的细胞中获得了吧？）

有了这一套在手不同的值进行折叠组，其中一个可以构建者自己的地图到崩溃组。的不同的数据值可以作为关键此映射中的对象; 每个不同的数据组合是独一无二的，只有一个在网格分组节，无论怎样嵌套多层次的参与有关。

例如，对于一个双层嵌套by Department by ProductType我们会看到这样的内容：

<tr class="k-grouping-row" data-distinct-values="['Sales','Toys, Games and Videos']">.

该部值是“销售”和ProductType值是“玩具，游戏和视频”。该JSON处理数据值的逗号。

对于由三层分组state, city, zipcode ，我们将有：

   ...  data-distinct-values="['California','Beverly Hills','90210']"

当创建的组，以便它们可被注入到第k分组列作为一个独特的句柄它这些数据值是已知的。

虽然不同的值是一个独特的把手，他们不排除需要遍历DOM，来访的每一位k-grouping-row当一个人想重新折叠状态。然而，剑道电网不会在默认情况下实现折叠状态的恢复，如果有人认为这是过于昂贵的操作。但你会为开发人员提供一个简单的方法使用来完成它data-distinct-values=[...]和开发商可以自行决定是否对性能的影响，如果有的话，是由应用程序的要求合理。