关于Extjs4 grid 合并行

最新推荐文章于 2021-02-15 20:18:30 发布

toweryangtao

最新推荐文章于 2021-02-15 20:18:30 发布

阅读量4.2k

点赞数

分类专栏： ExtJs

本文链接：https://blog.csdn.net/toweryangtao/article/details/8216249

版权

这篇博客探讨了如何在ExtJS4的Grid中实现行合并。通过检查相邻行的特定字段是否相等，来决定是否显示当前行的数据。在`renderer`函数中，如果当前行与前一行的'key'字段不匹配，则返回当前行的'publishdate'数据，否则返回空字符串，从而达到合并行的效果。

摘要由CSDN通过智能技术生成

 GridPanel row spanning (well, sort of...)
    The current GridPanel implementation doesn't support row spanning, because the rows aren't part of the same table.
    The only thing you can do is make the grid look like it has row spanning by changing the css.
    Example:
    Code:

<style type="text/css">
.grid-row-span .x-grid3-row {
    border-bottom: 0;
}
.grid-row-span .x-grid3-col {
    border-bottom: 1px solid #ededed;
}
.grid-row-span .row-span {
    border-bottom: 1px solid #fff;
}
.grid-row-span .row-span-first {
    position: relative;
}
.grid-row-span .row-span-first .x-grid3-cell-inner {
    position: absolute;
}
.grid-row-span .row-span-last {
    border-bottom: 1px solid #ededed;
}
</style>
<script type="text/javascript">

Ext.onReady(function(){
    new Ext.Viewport({
        layout: 'fit',
        items: {
            xtype: 'grid',
            store: new Ext.data.ArrayStore({
                fields: [
                   {name: 'company'},
                   {name: 'price', type: 'float'},
                   {name: 'change', type: 'float'},
                   {name: 'pctChange', type: 'float'},
                   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
                   {name: 'industry'}
                ],
                data: [
                    ['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
                    ['Alcoa Inc'