dhtmlxgrid使用基础

目录

1. 包含的javascript文件

2. 初始化grid

3. 数据来源于外部XML文件

4. 数据来源于本页XML数据岛

dhtmlxgrid用于显示表格，相关官方资料可参阅http://www.dhtmlx.com/

包含的javascript文件 ）

   
   
   
   

    
    
    
    1 <script type="text/javascript" src="jquery.js"></script> 
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
    2 <link rel="STYLESHEET" type="text/css" href="dhtmlxgrid.css">  
   
   
   
   
   
   
   
   

    
    
    
    3 <script type="text/javascript" src="dhtmlxcommon.js"><
    
    
    
    /script>  
   
   
   
   
   
   
   
   

    
    
    
    4 <script type="text/javascript" src="dhtmlxgrid.js"></script>  
   
   
   
   
   
   
   
   

    
    
    
    5 <script type="text/javascript" src="dhtmlxgridcell.js"></script>
   
   
   
   

初始化grid代码（回目录）

   
   
   
   

    
    
    
    1 mygrid = new dhtmlXGridObject('dataTable');  
   
   
   
   
   
   
   
   

    
    
    
    2 mygrid.setImagePath("/imgs/"); 
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
    3 mygrid.setHeader("第1列标题,第2列标题");　　// 列标题用逗号隔开  
   
   
   
   
   
   
   
   

    
    
    
    4 mygrid.setInitWidths("100,*");　　　　　　 // 各列宽度数字表示像素，弹性用*表示  
   
   
   
   
   
   
   
   

    
    
    
    5 mygrid.setColAlign("center,left");  
   
   
   
   
   
   
   
   

    
    
    
    6 mygrid.setSkin("light");  
   
   
   
   
   
   
   
   

    
    
    
    7 mygrid.enableAutoHeight(true);  
   
   
   
   
   
   
   
   

    
    
    
    8 mygrid.init();
   
   
   
   

 其中，在页面上先放一个表格容器：

  
  
  
  

   
   
   
   DIV id="dataTable"></DIV>
  
  
  
  

1. 数据来源于外部XML文件（回目录）

   初始化grid后，就可以从外部XML文件装入数据并在表格上显示：

         
         
         
         
   
          
          
          
          mygrid.loadXML("data.xml");
         
         
         
         

数据来源于本页XML数据岛（回目录）

如果数据来自于本页中的XML数据岛，形如：

   
   
   
   

    
    
    
     1 <xml id=dataXML>  
   
   
   
   
   
   
   
   

    
    
    
     2  <rows>  
   
   
   
   
   
   
   
   

    
    
    
     3  <row id=1>  
   
   
   
   
   
   
   
   

    
    
    
     4  <cell>cell11</cell>
    
    
    
     
    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     5  <cell>cell12</cell>
    
    
    
     
    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     6  </row>
    
    
    
     
    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     7  <row id
    
    
    
    =2>  
   
   
   
   
   
   
   
   

    
    
    
     8  <cell>cell21</cell>
    
    
    
     
    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     9  <cell>cell22</cell>
    
    
    
     
    
    
    
    
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     10  </row>
    
    
    
     
    
    
    
    
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     11  </rows>
    
    
    
     
    
    
    
    
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     
   
   
   
   
   
   
   
   

    
    
    
     12 </xml>
   
   
   
   

复制代码

则装入数据的javascript代码将是

  
  
  
  

   
   
   
   mygrid.parse($("#dataXML")[0]);
  
  
  
  
  
  
  
  

   
   
   
    
  
  
  
  
  
  
  
  

   
   
   
   文章转自：http://www.cnblogs.com/jyginger/archive/2010/12/09/1900858.html