如何根据下拉列表更改剑道网格列

Question

我们正在开发一个使用 Kendo UI 的 Web 应用程序项目。是否可以将第一列标题/标题作为我们从下拉列表中选择的内容。例如：- 如果搜索序列号，则序列号应位于搜索的第一列。但我无法得到这一点，因为我们通常以排序方式定义列定义。根据选择，我们隐藏列的其余部分。 例如：

xxx.GridColDef = [ {
    field : "serialNo",
    title : "Serial No",

}, {
    field : "firstname",
    title : "firstname",
    }, {
    field : "lastnameo",
    title : "lastname",
    }, 

如果我选择名字，则从下拉列表中，名字应该在第一列。但我得到第一列作为序列号有什么办法吗？无需为每个添加单独的列定义。

剑道版 - 2012.1.322

这应该自动完成，而不是使用列重新排序而不是手动

---

对不起，如果我不清楚。我想要的是

在下拉列表中我有

序列号 名 姓 出生日期

最初的网格如下所示

序列号 名字 姓氏 DOB

如果用户从下拉列表中选择“名字”，它应该是这样的

名字序列号姓氏出生日期

希望这会有所帮助。如果您需要更多说明，请告诉我。感谢您为此提供解决方案。

还有一件事：-

“使用当前版本的 Kendo 2012.1.322 小提琴”在此小提琴中，我无法从下拉列表中进行选择。

Answer 1

更新答案 2

当前的 KendoUI 网格框架不支持在代码中切换列的功能。我创建了一个新的小提琴，您不必在每个 switch case 中完全重新排序列。它遍历您的列定义，如果存在下拉值，则将其从数组中删除并将其放在第一个位置。我不知道你的 50 列和 8 个下拉菜单是如何相互作用的，所以我很难给出一个完全准确的答案。但是在这里的多个建议之间，我希望你能找到一个解决方案:)

我创建了一个新的 tempColumn 定义变量，以便原始列定义在其原始状态下仍然可用。

function onSelect(e) {
    var ddlVal = this.dataItem(e.item.index()).value;
    var tempColumns = columnDefinitions;

    $(tempColumns).each(function(index) {
        if (ddlVal == this.title) {
            tempColumns.splice(index, 1);
            tempColumns.splice(0, 0, this);
        }
    });

    createGrid(tempColumns);

}

New fiddle which uses spice to re-order the columns

更新答案

我用你当前版本的剑道创建了一个新的小提琴。您不需要更新您的版本，因为我认为在 Kendo 框架内没有任何方法可以做到这一点。

此解决方案涉及在您从下拉列表中进行选择时重新定义列定义，然后重新创建网格。

Updated fiddle with your current version of Kendo

*出于某种原因，Internet Explorer 有时不能很好地与 jsfiddle 配合使用。此示例适用于 Firefox 和 Chrome，但不适用于 IE。如果您无法尝试使用其他浏览器来查看它是否正常工作，请将代码插入您的解决方案并进行测试。

原答案

我提供了两种不同的解决方案。

1) 您可以更新您的 KendoUI 版本吗？如果可以，那么您可以利用 .showColumn() 和 .hideColumn() 方法。

下面是使用 KendoUI 2012.2.710 的小提琴。在下拉的选择事件中，您只需显示/隐藏相应的列。非常简单直接。

Fiddle using Kendo 2012.2.710

2) 如果您无法更新您的 KendoUI 版本，您可以更改您的 columnDefinition 数组，然后重新创建网格。

在下拉列表的 onSelect 方法中，从 columnDefinition 数组中删除第一列，然后将新的列对象添加到数组中。之后，您删除网格的 div 元素的内容，然后重新创建网格。

您仍然绑定到相同的数据，因此您不必通过网络再次获取数据。

Fiddle using your current version of Kendo 2012.1.322

~ 在这两种情况下，绝对可以清理代码以更好地满足您的需求，但我只是想为您提供一些基本功能。希望这会有所帮助！