Question

我有一个带有多列标题的网格，并且有一个组列A被锁定。这是代码：

$scope.gridOptions.columns = [
            {
                title: "A", locked: true, headerAttributes: { "class": "section-border" }, groupId : "A",
                columns: [{ field: "ROW_HEADER", filterable: false, width: "20px", title: "   .", sortable: false, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHeadYellow", "style": "border-right: 0px !important;" }, attributes: { "class": "contert-alpha  rowHeaderCell" } },
                          { field: "COLUMN1", title: "COLUMN1", width: "80px", hidden: true, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: "#: COLUMN1)#" },
                          { field: "COLUMN2", title: "COLUMN2", width: "150px", locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: #:COLUMN2#}
                          ]
            },
            {
                title: "B", headerAttributes: { "class": "section-border" }, groupId: "B",
                columns: [{ field: "COLUMN3", title: "COLUMN3", width: "110px", headerAttributes: { "class": "sub-col continuity" }, attributes: { "class": "contert-alpha center-middle" }, template: "#: COLUMN3 #" },
                          { field: "COLUMN4", title: "COLUMN4", width: "120px", headerAttributes: { "class": "sub-col no-left-border" }, attributes: { "class": "contert-number " }, format: "{0: MM/dd/yyyy}" },
                           }]
            }]

我想在打印网格之前以编程方式解锁组列A，使其显示为一个网格而不是两个网格。我在打印之前为COLUMN1，COLUMN2和组A列设置了locked = false，但它仍然保持锁定状态。然后我在打印前只将组列A设置为已解锁，并且该组仍然保持锁定状态。我正在使用递归方法来解锁它们但我为了展示这个功能的要点我正在解锁这个：

thisGrid.unlockColumn("A");thisGrid.unlockColumn("ROW_HEADER");thisGrid.unlockColumn("COLUMN1");thisGrid.unlockColumn("COLUMN2");

其中thisGrid是上面网格的实例。如果有人以编程方式锁定/解锁多列标题，请帮忙。感谢

Answer 1

当我们解锁列时，我们必须确保网格中至少有一列仍然被锁定。所以在我的情况下，我从A组中删除了ROW_HEADER并将其作为第一列单独放置，现在当我尝试解锁列组A时，它成功解锁。

$scope.gridOptions.columns = [{ field: "ROW_HEADER", filterable: false, width: "20px", title: "   .", sortable: false, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHeadYellow", "style": "border-right: 0px !important;" }, attributes: { "class": "contert-alpha  rowHeaderCell" } },
        {
            title: "A", locked: true, headerAttributes: { "class": "section-border" }, groupId : "A", field: "DUMMY_FIELD"
            columns: [
                      { field: "COLUMN1", title: "COLUMN1", width: "80px", hidden: true, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: "#: COLUMN1)#" },
                      { field: "COLUMN2", title: "COLUMN2", width: "150px", locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: #:COLUMN2#}
                      ]
        },
        {
            title: "B", headerAttributes: { "class": "section-border" }, groupId: "B",
            columns: [{ field: "COLUMN3", title: "COLUMN3", width: "110px", headerAttributes: { "class": "sub-col continuity" }, attributes: { "class": "contert-alpha center-middle" }, template: "#: COLUMN3 #" },
                      { field: "COLUMN4", title: "COLUMN4", width: "120px", headerAttributes: { "class": "sub-col no-left-border" }, attributes: { "class": "contert-number " }, format: "{0: MM/dd/yyyy}" },
                       }]
        }]

另一个问题是在分组列A中没有定义字段属性但是我们需要有字段属性或列索引来锁定/解锁列，所以我在那里添加了field: "DUMMY_FIELD"然后解锁它成功使用此代码：thisGrid.unlockColumn("DUMMY_FIELD")

Answer 2

首先，为了使unlockColumn方法适用于A列组，您需要为其指定一个字段属性。

问题是Kendo UI Grid文档指出在使用锁定列初始化网格后，至少有一列应始终处于锁定状态。

在您的情况下，您有两个主要的＆＃34;列＆＃34;，A和B，并且只有A被锁定。因此，当您尝试解锁A时，它会保持锁定状态。

一种解决方法是添加另一个零宽度的列，并始终将其锁定。

查看演示here。

如何以编程方式解锁Kendo-UI Grid多列标题

2 个答案: