Javascript UI网格的标头分组

我想更改UI网格AngularJS的标题呈现。我知道仅仅通过makeheaderTemplate很容易实现，但是我有一种情况，我需要像这样对标题进行分组

我不知道如何在ui网格中实现此功能。

---

下面是网格的ui

这是GitHub#963中的一个公开问题。自2013年8月以来，该计划一直悬而未决。 检查这个问题。

---

他们提到了一些替代方法

我们有同样的需求，但没有找到任何合适的解决方案，所以我使用

headerCellTemplate

的一些黑客方法实现了它

请参阅下面的jsfiddler或

var-app=angular.module（'app'，['ngTouch'，'ui.grid']）；
app.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.gridOptions={
columnDefs：[
{
名称：'firstCol'，
headerCellTemplate：“父代标题
//代码在这里
角度.module（“temp2”，“ui.grid”]）.controller（“Temp2Controller”，“uiGridConstants”，“Temp2Controller”）；
函数Temp2Controller（uiGridConstants）{
“严格使用”；
var$scope=this；
$scope.gridOptions={
headerTemplate:“”，
超低温：[{
名称：'group1'，
displayName:“组1”
}, {
名称：'group2'，
displayName:“组2”
}],
columnDefs：[{
姓名：'姓名'，
displayName:'名称'，
超级联赛：“第一组”
}, {
姓名：'头衔'，
displayName:“标题”，
超级联赛：“第一组”
}, {
姓名：'年龄'，
displayName:“年龄”，
超级联赛：“第二组”
}],
数据：[{
姓名：'鲍勃'，
标题：“首席执行官”，
年龄：31岁
}, {
姓名：'弗兰克'，
标题：“低级开发人员”，
年龄：'33'
}]
};  
}
（功能（）{
“严格使用”；
angular.module（“temp2”）.directive（'supercelwidthupdate'，['$timeout'，function（$timeout）{
返回{
“限制”：“A”，
“链接”：函数（范围、元素）{
var_colId=scope.col.colDef.supercl，
_el=jQuery（元素）；
_el.on（'resize'，函数（）{
_updateSuperColWidth（）；
});
var_updateSuperColWidth=函数（）{
$timeout（函数（）{
var\u parentCol=jQuery（'.ui网格头单元格[col name=“'+\u colId+'”）；
var\u parentWidth=\u parentCol.outerWidth（），
_宽度=_el.outerWidth（）；
如果（\u parentWidth+1>=\u width）{
_parentWidth=\u parentWidth+\u width；
}否则{
_parentWidth=\u宽度；
}
_parentCol.css({
“最小宽度”：_parentWidth+“px”，
“最大宽度”：_parentWidth+“px”，
“文本对齐”：“居中”
});
}, 0);
};
_updateSuperColWidth（）；
}
};
}]);
})（）；

/*风格就在这里*/
.电网{
宽度：700px；
}
使用
headerCellTemplate
很好，但我如何保留其他功能，如
排序
？但仍然无法使用GridMenu启用隐藏功能。
{
        name: 'Mapped By',
        enableColumnMenu: false,
        field: 'Mappedby',
        cellClass: 'intrighttextcell',
        width: 102,
        enableCellEdit: false,
        allowCellFocus: false
    },