我想在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
文件中标题行的高度,这又是错误的方式。
有没有正确的方法呢?欢迎所有想法
由于
修改
以下是我想要的快照。
答案 0 :(得分:3)
啊,你的意思是将单元格合并在一起......这是通过命名“colspan”实现的,意思是列跨越。这是example
如果这不能满足您的需求,您还可以使用第一行(顶部面板行)显示您想要显示的内容。看看这个example,然后单击右上角的放大镜图标(放大镜),您将看到顶部面板仅显示该页面的自定义和自定义。如果您决定使用Top Panel,可以按照以下方式使用它(基本上从示例代码中获取)
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
<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 或者,我也找到了这个人,这个人做了一个非常好的colspan和rowspan。这实际上可能比其他所有人都好......
GerHobbelt Fork
下载代码,然后运行名为example-row-span-many-columns.html
的示例并查看第一行和第二行,它们是合并的标题单元格