由于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的执行效果