最终效果（只添加了一级子树，可以根据需求增加级数，方法在后面）。
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="width: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
dhtmlxTreeGrid使用,布布扣,bubuko.com
原文：http://www.cnblogs.com/llhua/p/3682294.html
