• 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. ,  120, dataIndex: , sortable: },
    33. ,  200, dataIndex: , sortable: },
    34. ,  100, dataIndex: , sortable: }]
    35. ,  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. %>
  • 相关阅读:
    测试管理工具
    测试用例--zy
    测试计划和测试用例
    测试用例
    软件测试基础
    异步任务 ---- django-celery
    图片验证码接口
    测试作业
    数据库原理
    HTTPS原理
  • 原文地址：https://www.cnblogs.com/shsgl/p/4776514.html
Copyright © 2020-2023  润新知