ExtJS4学习--多表头Grid

ExtJS4学习--多表头Grid

分类： javascript 2014-06-11 17:59 1676人阅读 评论(2) 收藏 举报
ext

转载来源：http://www.mhzg.net/a/20115/201151911240247.html


做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。

做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。

之前有一篇文章，讲的是如何实现Grid的分页功能（地址是：www.mhzg.net/a/20115/201151811170246.html），本文在此基础上做出修改，达到多表头Grid+分页功能。

先看下效果图：

 

实现代码如下：

HTML代码：

 
  1. <!DOCTYPE html PUBLIC >
  2. >
  3.  content=  type= href= />
  4.  src=></script>
  5.  src=></script>
  6.  src=></script>
  7. ></div>
  8. </html>

group-header.js：

 
  1. Ext.require([
  2. ,
  3. ,
  4. ,
  6. function ,{
  7. ,
  8. ,,
  10. ,type: },
  13.  store = Ext.create(, {
  15. ,
  17. ,
  19. ,
  20. ,
  21. ,
  25. ,
  29.  grid = Ext.create(,{
  30. ,
  31. ,
  32. , width: 120, dataIndex: , sortable: },
  33. , width: 200, dataIndex: , sortable: },
  34. , width: 100, dataIndex: , sortable: }]
  35. , width: 100, dataIndex: , sortable: }
  36. ,
  37. ,
  38. ,
  39. ,
  40. ,
  41. ,
  43. , {
  44. ,
  45. ,
  47. JS代码要注意的地方：

     

     

    1、记得载入'Ext.util.*',

    2、二级表头必须指定宽度，如果不指定的话，会提示错误。如图所示，红框里的项，必须要指定宽度。

    服务端代码，这里使用ASP编写，具体解释请参考前一篇文章。

     
    1. <%
    4. '返回JSON数据,自定义一些测试数据。。 '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。 '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。 )
    5. )
    6. If 
    7. End
    8. If 
    9. End
    10. )),,) 
    11. )),,)
    12. Dim '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。 Dim If
    13. End
    14. "{" """:" ""&counts&"," """:[" For Ls
    15. )
    16. "title""newstitle""" )
    17. "author""author""" )
    18. "hits""""" )
    19. "addtime""""" )
    20.  i<Ls 
    21. )
    22.  
    23. Next "]}" Function End
    24. %>

posted on 2015-09-01 18:20  山冈龙  阅读(1357)  评论(0)  编辑  收藏  举报

导航