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

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")