学步园

由于TreeGrid使用的js文件是专业版的，因此此处直接引用js(可下载官方引用)(使用jquery之类的js引入文件略)

引入必要文件

<link rel="stylesheet" type="text/css" href="http://www.dhtmlx.com/docs/products/dhtmlxTreeGrid/samples/common/css/style.css"/>
<link rel="stylesheet" type="text/css" href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/codebase/dhtmlxgrid.css"></link>
<link rel="stylesheet" type="text/css" href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css"></link>
<link rel="stylesheet" type="text/css" href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_blue.css"></link>

<script type="text/javascript" src="http://www.dhtmlx.com/docs/products/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="http://www.dhtmlx.com/docs/products/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="http://www.dhtmlx.com/docs/products/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="http://www.dhtmlx.com/docs/products/dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"></script>

jsp页面中为treegrid写一个div

<div id="grid_samplelimit" style="width:570px;height:537px;background-color:white;"></div>

前台js实现初始化，加载等

                        var grid_sample;
			grid_sample = new dhtmlXGridObject('grid_samplelimit');
			grid_sample.selMultiRows = true;
			//grid_sample.imgURL = "http://www.dhtmlx.com/docs/products/dhtmlxGrid/codebase/imgs/icons_greenfolders/";
//			grid_sample.setHeader("Tree,Plain Text,Long Text,Color,Checkbox");
			grid_sample.setHeader("抗生素名称,抗生素结果1,抗生素结果2,范围");
			grid_sample.setInitWidths("120,90,90,90");
			grid_sample.setColAlign("left,left,left,left");
			grid_sample.setColTypes("tree,ed,txt,txt");
			grid_sample.setColSorting("str,str,str,str");
			grid_sample.init();
			//grid_sample.enableAutoHeight(true, "350");
			grid_sample.setImagePath("dhtmlxGrid/codebase/imgs/");
			grid_sample.setSkin("dhx_skyblue");
			//grid_sample.kidsXmlFile = "http://127.0.0.1:8080/his/file/test_list_2.xml";
			//grid_sample.loadXML("http://127.0.0.1:8080/his/file/test_list_1.xml");
			grid_sample.load("CheckOperate2/loadnoNRGrid.htm");
			setTimeout('grid_sample.expandAll()',1000);//默认展开全部节点

由于expandAll()的机制关系，不采用延迟函数setTimeout()可能不会默认全展开。

后台数据库取数据(db.find()为数据库操作类里的方法)

	@RequestMapping("/loadnoNRGrid")
	public void loadnoNRGrid(HttpServletRequest req,
			HttpServletResponse response) throws IOException, ParseException {
		response.setContentType("text/xml;charset=utf-8");
		Bas_hospitals basHospitals = (Bas_hospitals) req.getSession()
				.getAttribute("login_hospital");
		String hosnum = basHospitals.getHosnum();
		List<Map> list = new ArrayList<Map>();
		DBOperator db = null;
		try {
			db = new DBOperator();
			Date d1=new Date();
			PrintWriter pw = null;
			String sql="select * from result_micro w order by w.micro_data_id_name ";
			list=db.find(sql); 
//			System.out.println(list.get(0).get("micro_data_id_name").toString());
			pw = response.getWriter();
			String vmpagckage = "com/cpinfo/his/template/lis/";
			String vmname ="treegrid.vm";
			String vm = VelocityUtils.generateGridVm(vmpagckage, vmname, "list", list);
//			System.out.println(vm);
			pw.print(vm);
			pw.flush();
			pw.close();
			db.commit();
		} catch (Exception e) {
			e.printStackTrace();
			db.rollback();
		} finally {
			db.freeCon();
		}
	}

vm文件代码如下：

<?xml version="1.0" encoding="UTF-8"?> 
	<rows> 
		#set($amt=0)
		#set($flag="")
		#set($var = $list.size())
		<userdata name="gud1"> userdata value 1 </userdata> 
		<userdata name="gud2"> userdata value 2 </userdata> 
		#foreach($!list in $list)
		#set($amt=$amt+1)
	 		#if($!list.micro_data_id_name!=$flag)
	 			#if($amt!=1)
					</row>
				#end
	 			#set($fla = $list.size())
	 			#set($fla = $amt)
				<row id="$amt">
					<cell image="folder.gif">$!list.micro_data_id_name</cell>
					<row id="$!list.micro_data_id2_name">
						<cell image="leaf.gif">$!list.micro_data_id2_name</cell>
						<cell>$!list.micro_data_id2_result1</cell>
						<cell>$!list.micro_data_id2_result2</cell>
						<cell>$!list.micro_data_id2_range</cell>
					</row>

			#else
				<row id="$!list.micro_data_id2_name">
					<cell image="leaf.gif">$!list.micro_data_id2_name</cell>
					<cell>$!list.micro_data_id2_result1</cell>
					<cell>$!list.micro_data_id2_result2</cell>
					<cell>$!list.micro_data_id2_range</cell>
				</row>
			 #end
			 
			#if($!list.micro_data_id_name!=$flag)
				#set($flag="$!list.micro_data_id_name")
				#if($amt!=$fla)
					</row>
				#end
			#end
			#if($amt==$var)
					</row>	
			#end
	 #end
</rows> 

TreeGrid的执行效果