`
wendy~QQ
  • 浏览: 34483 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

多表头grid例子

    博客分类:
  • ext
ext 
阅读更多
最近做了个多表头grid例子,跟大家分享下

jsp中需要先引入GroupHeaderPlugin.js和GroupHeaderPlugin.css文件  

文件下载地址:http://download.csdn.net/source/3470467和http://download.csdn.net/source/3470711

或者下载有问题可以留言,我给他发邮箱!



js文件内容


Ext.ns("text");
sasdw.text = function(){
var mainGrid;
var mainGrid_;
var mainWin;
return {
  init : function(){
    sasdw.text.doGridMain();
    sasdw.text.doGridMain_();
       sasdw.text.createWindow();
  },
  createWindow : function(){
   mainWin = new Ext.Window({
    title : '多表头例子',layout : 'column',width : 840,height : '100%',closable:false,
    items : [mainGrid,mainGrid_]
   });
   mainWin.setPosition(10, 10);
   mainWin.show();
  },
     doGridMain : function(){
   var store=new Ext.data.JsonStore({
    url : '/sas/pages/salereport/collectInOutStockAction.do?method=getList',
    root : 'root',
    totalProperty : 'totalCount',
    autoLoad : true,
    fields : [
       {name:'goodsCode',mapping:'goodsCode'},
       {name:'goodsName',mapping:'goodsName'},
       {name:'kindCode',mapping:'kindCode'},
       {name:'kindName',mapping:'kindName'},
       {name:'kindOne',mapping:'kindOne'},
       {name:'kindTwo',mapping:'kindTwo'},
       {name:'kindThree',mapping:'kindThree'},
       {name:'kindFour',mapping:'kindFour'}
    ]
   });
   var continentGroupRow = [];
   continentGroupRow = [
      {rowspan: 2},
      {header: '购进', colspan: 5, align: 'center', rowspan: 5},
      {rowspan: 1},
      {rowspan: 1},
      {header: '期初库存', colspan: 3, align: 'center', rowspan: 3}
       ]
      var group = new Ext.ux.plugins.GroupHeaderGrid({
     rows : [continentGroupRow]
   });
   mainGrid = new Ext.grid.GridPanel({
    region : 'center',layout : 'fit',height : 200,store : store,
    autoScroll: false,enableHdMenu : false,autoWidth : true,border: true,frame : true,
    columns : [

          new Ext.grid.RowNumberer(),
          {header : '商品指标',dataIndex:'kindName',width:150},
       {header : '合计',dataIndex:'goodsName',width:60},
       {header : '省内工业',dataIndex:'kindCode',width:60},
       {header : '省外',dataIndex:'goodsName',width:60},
       {header : '省内调入',dataIndex:'kindCode',width:60},
       {header : '专卖',dataIndex:'goodsName',width:60},
       {header : '系统外销',dataIndex:'kindOne',width:60},
       {header : '系统内销',dataIndex:'kindThree',width:60},
       {header : '合计',dataIndex:'kindFour',width:60},
       {header : '省内',dataIndex:'kindFour',width:60},
       {header : '省外',dataIndex:'kindFour',width:60}
       ],
    bbar : new Ext.PagingToolbar({
     pageSize : 50,
     store : store,
     displayInfo : true,
     displayMsg : "当前第{0}-{1}条记录,共 {2} 条记录"
    }),
    plugins : group,
    viewConfig : { width:840,forceFit : false}
   });
  }

}

}();
Ext.onReady(text.init, text);


分享到:
评论

相关推荐

    Ext3.4.0复杂(多行)表头+锁定多列例子

    "Ext3.4.0复杂(多行)表头+锁定多列例子"这个标题涉及到的是一个JavaScript库——Ext JS的一个高级功能应用。Ext JS是一个流行的前端框架,用于构建富互联网应用程序(RIA),它提供了一套完整的组件化开发工具,包括...

    dev Grid动态拼合并表头

    在`拼Grid多表头`这个文件中,很可能是包含了一个示例或者教程,演示了如何实现这种动态拼合并表头的功能。通过学习和实践这个例子,开发者可以更好地理解和运用这一技术,提高自己在开发数据驱动应用时的能力。

    GT-grid 例子

    2. **gtdemo**:这是一个目录,可能包含多个GT-Grid的示例代码。通过查看这些示例,我们可以了解到如何在项目中引入GT-Grid库,如何配置Grid实例,以及如何处理各种交互事件。例如,一个示例可能演示了如何实现动态...

    EXT复杂表头+锁定列例子

    标题“EXT复杂表头+锁定列例子”提示我们这里将探讨EXT库在实现这种功能时的应用。 EXT是一个强大的JavaScript库,专为构建桌面级的Web应用而设计。它提供了丰富的组件,包括表格(Grid),用于高效地展示和操作...

    js实现点击table表头字段,根据字段排序例子

    表头单元格通常是用来标识数据列的标题。 当用户点击表头时,我们可以捕获这个点击事件,然后对表格中的数据进行排序。以下是一个基本的步骤概述: 1. **绑定事件监听器**:给每个`<th>`元素添加点击事件监听器,...

    表头固定,页面下拉的几个小例子.rar

    5. Flexbox或Grid布局:随着现代浏览器对Flexbox和Grid布局的支持,也可以利用这些新的布局模式来实现固定表头。 通过分析这些HTML文件,我们可以学习到如何在实际项目中应用这些方法,以及在不同场景下选择合适的...

    ext gridpanel多层表头分组小计导出excel与Java后台交互全代码

    该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。

    一个基于GridView实现的多列表头合并显示的用户控件程序例子

    在标题提到的“一个基于GridView实现的多列表头合并显示的用户控件程序例子”中,我们探讨的核心技术是如何在GridView中实现多级表头的合并,以提供更清晰、更组织化的数据视图。 首先,GridView控件是ASP.NET Web ...

    Grid导出到Excel例子(源码+注释)

    总之,"Grid导出到Excel例子(源码+注释)"是一个实用的学习资源,涵盖了前端开发中数据处理和导出的关键技术。通过深入研究和实践,你不仅可以掌握Grid组件的使用,还能了解数据交换格式、Blob对象以及浏览器下载...

    Grid++Report报表构件

    提供了多个开发工具下的丰富例程,让你快速理解本产品,安装程序中包含丰富的可运行例子,安装后即刻体验 Grid++Report。Grid++Report 报表构件具有如下特点:1). 适用范围广:VB.NET、C#.NET、VB、VC、Delphi、C...

    Grid++Report5.6

    提供详尽帮助文档与各种编程平台下的丰富例子,安装中包括可直接运行例子程序,安装后即刻体验此报表工具。包括简体中文版、繁体中文版与英文版。经过数年的发展,已经被国内多家有影响力的通用软件厂商采用,其用户...

    DataGrid固定表头

    其他类似的组件库,如ag-Grid、Handsontable等,也提供类似的功能。 5. HTML5的新特性:`<thead>`元素的`sticky`属性在某些现代浏览器中可用,它可以设置表头在滚动时保持可见。但这不是所有浏览器都支持,所以可能...

    动态设置显示kendoui grid控件某一列的格式

    在这个例子中,点击按钮会更新日期列的格式为月/日/年,并通过调用`refresh`方法刷新Grid以应用新的格式。 至于自定义过滤,Kendo UI Grid提供了`filterable`配置项来定制过滤行为。我们可以为特定列定义一个过滤...

    html table 固定表头和列

    -- 更多行 --> ``` 二、固定表头 固定表头通常通过CSS实现。一种常见的方法是将表头部分独立出来,然后设置CSS样式使其相对于窗口或容器固定。以下是一个示例: ```html table { width: 100%; overflow-y:...

    Grid++Report 4.5破解补丁

    提供详尽帮助文档与各种编程平台下的丰富例子,安装中包括可直接运行例子程序,安装后即刻体验此报表工具。包括简体中文版、繁体中文版与英文版。经过数年的发展,已经被国内多家有影响力的通用软件厂商采用,其用户...

    Grid++Rport WEB报表插件安装包5.6.0.2

    提供详尽帮助文档与各种编程语言下的丰富例子,安装中包括可直接运行例子程序,安装后即刻体验报表功能。Unicode编码,多国语言集成支持。历经十年发展,多家有影响力的通用软件厂商选用,用户遍布各行各业,已经...

    div+css固定表头的

    9. **CSS Grid和Flexbox**:虽然不是传统意义上的"div+css",但现代CSS布局技术如Grid和Flexbox也可以实现固定表头的效果,而且更灵活,特别是在响应式设计中。 压缩包中的"DIV+CSS固定表头.html"文件很可能是包含...

    Grid++Report 报表设计器

    Grid++Report是一款C/S与B/S集成报表工具,功能全面易学易用。C/S开发适用于VB.NET,C#,VB,VC,Delphi,BCB,VFP,易语言等。B/S开发适用于ASP.NET,ASP,PHP,JSP等,支持所有WEB服务器。开发C/S报表与B/S报表共享相同的...

    Grid++Report6 报表开发者安装包

    11、全中文界面,针对中国式报表进行了很多专门实现,如:表格报表、财务金额线、大写金额、发票圈叉图标、负数红字、多层表头等。很多在国外报表工具中很难实现的功能都可以轻易实现。 12、提供丰富交互事件,轻松...

    Grid++Report3.6

    提供了多个开发工具下的丰富例程,让你快速理解本产品,安装程序中包含丰富的可运行例子,安装后即刻体验 Grid++Report。Grid++Report 报表构件具有如下特点:1). 适用范围广:VB.NET、C#.NET、VB、VC、Delphi、C...

Global site tag (gtag.js) - Google Analytics