Javascript 平滑网格中的聚合标题和列

Javascript 平滑网格中的聚合标题和列,javascript,slickgrid,Javascript,Slickgrid,我想在SlickGrid中实现类似的东西。我有一个非常糟糕的解决方法 var columns = [ name:getAggregatedName(), field: 'save', width:160, formatter: customFormatter} ]; function customFormatter(){ var text = '<div> <span style ="float:left"> Value1 </span

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

 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;
} 
var列=[
名称:getAggregatedName(),字段:“保存”,宽度:160,格式设置程序:customFormatter}
];
函数customFormatter(){
变量文本='Value1 Value2';
返回文本;
}
函数getAggregatedName(){
var html=“操作1操作2”;
返回html;
} 
它不合适,既不可扩展,也不会给出正确的格式

为了正确地布局它,我不得不在
slick.grid.js
文件中更改标题行的高度,这也是错误的方法

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

谢谢

编辑

这是我想要的东西的快照


啊,你的意思是将单元格合并在一起。。。这是通过命名“colspan”来实现的,这意味着列跨越。这是你的电话号码

如果这不能满足您的需要,您还可以使用第一行(顶部面板行)显示您希望显示的内容。看看这个,然后点击右上角的放大镜图标,你会看到上面的面板显示出来,并且只为该页面定制。如果您决定使用顶部面板,您可以如下使用它(基本上取自示例代码)

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>

编辑#2
或者,我还发现了这个叉子,这个人在叉子上做了一个非常好的科尔斯潘和罗斯潘。这实际上可能比其他的都好。。。


下载代码,然后运行名为
example row跨多个列的示例。html
并查看第一行和第二行,它们是合并的标题单元格

您是否查看了分组和聚合示例@我已经为这个问题添加了更多信息。你能详细说明一下这个例子将如何帮助实现它吗。我已经看过了所有的例子,但没有发现这里还有一个类似的问题:编辑2中提到的例子,这就是我想要的。谢谢这个例子,这也是一个很好的例子,很高兴我能帮上忙:)
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();