dhtmlxgrid使用基础

目录

1. 包含的javascript文件

2. 初始化grid

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

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

---

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

1. 包含的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>
   

2. 初始化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
    >
   

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

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

   

    
    mygrid.loadXML(
    "
    data.xml
    "
    );
   

4. 数据来源于本页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
    ]);