Slick Grid 中的聚合标题和列

Question

我想在 SlickGrid 中实现类似 Sencha Aggregation Grid 的东西。我有一个非常糟糕的解决方法，

 var columns = [
      name:getAggregatedName(),  field: 'save', width:160, formatter: customFormatter}
 ];

function customFormatter(){

    var text = '<div> <span style ="float:left"> Value1 </span> <span style ="float:right"> Value2 </span> </div>';
    return text;                
}
function getAggregatedName(){
    var html ="<div style=\"text-align: center;border-bottom: 1px solid red;\"> <span> Action </span> </div> <span style =\"float:left\"> Action1</span><span style =\"float:right\"> Action2</span>";
    return html;
} 

它不合适，它既不可扩展，也不会给出正确的格式。

为了正确显示它，我不得不更改 slick.grid.js 文件中标题行的高度，这又是错误的方法。

有什么合适的方法吗？欢迎所有想法

谢谢

编辑

这是我想要的快照。

Answer 1

啊，你的意思是将单元格合并在一起......这是通过命名“colspan”实现的，意思是跨列。这是example

如果这不能满足您的需求，您还可以使用第一行（顶部面板行）来显示您希望显示的任何内容。看看这个example，然后单击右上角的放大镜图标（放大镜），您将看到顶部面板出现并且仅为该页面定制。如果您决定使用顶部面板，您可以按如下方式使用它（基本上取自示例代码）

html代码

<div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;">
    Show tasks with title including <input type="text" id="txtSearch2">
    and % at least &nbsp;
    <div style="width:100px;display:inline-block;" id="pcSlider2"></div>
</div>

然后使用它作为您的网格定义

var options = {
    editable: true,
    ...
    topPanelHeight: 25,
    showTopPanel: true
};

dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#myGrid", dataView, columns, options);

// move the filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
    .appendTo(grid.getTopPanel())
    .show();

编辑 #2
另外，我还发现了这个 fork，这个人在其中做了一个非常好的 colspan 和 rowspan。这实际上可能比所有其他人都好......
GerHobbelt Fork
下载代码，然后运行名为example-row-span-many-columns.html的示例，看到第一行和第二行，是合并的标题单元格