dhtmlxTreeGrid使用

最终效果（只添加了一级子树，可以根据需求增加级数，方法在后面）。

HTML和js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <link href="../gridtest/dhtmlxgrid.css" rel="STYLESHEET" type="text/css" />
        <link href="../gridtest/skins/dhtmlxgrid_dhx_skyblue.css" rel="STYLESHEET" type="text/css" />
        <script type="text/javascript" src="../gridtest/dhtmlxcommon.js"></script>
        <script type="text/javascript" src="../gridtest/dhtmlxgrid.js"></script>
        <script type="text/javascript" src="../gridtest/dhtmlxgridcell.js"></script>
        <script  src="../gridtest/dhtmlxtreegrid.js"></script>
    </head>
    <body>
        <div id="gridbox" style="570px;height:137px;background-color:white;"></div>
     
        <script>
            mygrid = new dhtmlXGridObject('gridbox');
            mygrid.selMultiRows = true;
            mygrid.imgURL = "../gridtest/imgs/icons_greenfolders/";
            // mygrid.setHeader("#master_checkbox,模板名称,所属系统,条件名称,过程名,有效时长,修改时间,操作,#cspan");
            mygrid.setHeader(" ,模板名称,所属系统,条件名称,过程名,有效时长,修改时间,操作,#cspan");
            mygrid.setInitWidths("42,120,120,280,280,70,110,80,*");//设置列宽度
            mygrid.setColAlign("center,left,left,left,left,left,left,left,left");//这是列内容的对齐方式
            mygrid.setColTypes("ch,tree,ro,ro,ro,ro,ro,ro,ro");
            mygrid.setSkin("dhx_skyblue");//设置皮肤
            mygrid.enableAutoHeigth(true,220);
            mygrid.enableRowsHover(true,"hover");//设置鼠标移动到某一行上的样式z
            mygrid.setColSorting("int,str,str,str,str,str,str,str,str");//点击header排序
            mygrid.enableEditEvents(false, false, false);//是否禁用编辑,单击/双击/按F2键，这里全部禁用
            mygrid.init();
            // mygrid.kidsXmlFile = "../gridtest/test_list_2.xml";
            mygrid.loadXML("../gridtest/test_list_1.5.xml");
        
        </script>
    </body>
</html>

XML数据代码test_list_1.5.xml

<?xml version="1.0" encoding="UTF-8"?>
<rows>
     <row id="honda" selected="1" call="1" xmlkids="1">
        <cell/>
        <cell image="folder.gif">Honda</cell>
    </row>
    <row id="bmw">
        <cell/>
        <cell image="folder.gif">BMW</cell>
        <cell>30,800</cell>
        <cell>30,800</cell>
        <cell>30,800</cell>
        <cell>30,800</cell>
           <row id="head">
               <cell/>
               <cell image="blanc.gif"></cell>
               <cell>价格</cell>
               <cell>排量</cell>
               <cell>qwe</cell>
               <cell>qwe</cell>
           </row>
           <row id="bmw1">
               <cell/>
               <cell image="blanc.gif"></cell>
               <cell>30,800</cell>
               <cell>2.5L</cell>
           </row>
           <row id="bmw2">
               <cell/>
               <cell image="blanc.gif"></cell>
               <cell>47,100</cell>
               <cell>3.2L</cell>
               <cell>333</cell>
               <cell>16</cell>
               <cell>24</cell>
           </row>
    </row>

    <row id="vw">
        <cell/>
        <cell image="folder.gif">Volkswagen</cell>
           <row id="vw1">
               <cell/>
               <cell>Colf GL 2.0</cell>
               <cell>15,580</cell>
               <cell>2.0L</cell>
               <cell>115</cell>
               <cell>24</cell>
               <cell>30</cell>
           </row>
    </row>
    <row id="mazda">
        <cell/>
        <cell image="folder.gif">Mazda</cell>
           <row id="mazda1">
               <cell/>
               <cell>MX-5 Miata</cell>
               <cell>21,868</cell>
               <cell>1.8L</cell>
               <cell>142</cell>
               <cell>22</cell>
               <cell>28</cell>
           </row>
    </row>
    <row id="porsche">
        <cell/>
        <cell image="folder.gif">Porsche</cell>
           <row id="porsche1">
               <cell/>
               <cell>Porsche 911</cell>
               <cell>128,200</cell>
               <cell>3.6L</cell>
               <cell>415</cell>
               <cell>14</cell>
               <cell>22</cell>
               <cell>4.06</cell>
               <cell>12.31</cell>
               <cell>120.63</cell>
               <cell>119</cell>
           </row>
    </row>
</rows>

rows节点下面是多个row节点，表示有多个行，每个row下面有多个cell节点，表示多个列。

rows--|

|—row—|

|—cell

这样的结构和dhtmlxGrid数据一样，表示只有表格的行列数据，没有子级数据。

每个row节点下面的row节点就是树结构的子节点了，row1-1就是row1的子节点

如果想构造多级树结构就继续在row1-1节点下添加row1-1-1节点就可以了。

rows--|

|—row1—|

|—cell

|—row1-1—|

|—cell

参考：http://www.dhtmlx.com/docs/products/dhtmlxTreeGrid/index.shtml

http://www.dhtmlx.com/docs/products/dhtmlxTreeGrid/samples/01_initialization_loading/02_treeGrid_init.html