easyui树插件
[{
"id":1,
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1",
"checked":true
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop",
"checked":true
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}] 
布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>部门</title>
<script src="/Scripts/cnten.Loader.js"></script>
</head>
<body class="">
<div class="easyui-layout" style="width: 100%;height: 100%">
<!--左右布局，左树，右列表-->
<div id="pageloadingright" class="pageloadingright">
</div>
<div id="pageloading" class="pageloading">
<div class="loader-inner">
</div>
</div>
<div data-options="region:'west',border:false" style="width: 200px">
<div class="easyui-panel" style="height: 100%">
<ul id="streettree"></ul>
</div>
</div>
<div data-options="region:'center'" style="border: 0; padding-left: 5px; padding-right: 3px">
<div data-options="region:'north',border:false" style="padding-left: 5px">
<div class="search-panel">
<!--查询参数放到 from 中-->
<form id="search_form" method="post">
<input type="hidden" data-query="type:'eq'" name="id" id="id">
<input type="hidden" data-query="type:'eq'" name="streetTown" id="streetTown">
<table class="search-table">
<tr>
<td>
<input data-query="type:'ge'" id="tagTime" name="tagTime" class="easyui-my97"
data-options='editable:false,labelPosition:"left",label:"采集时间"'
style="width: 180px" /> 至
<input data-query="type:'le',filed:'tagTime_2'"
id="tagTime_2" name="tagTime_2" class="easyui-my97"
data-options='editable:false' style="width: 115px" />
</td>
<td>
<button type="button" class="btn btn-primary" id="btnquery">
<i class="glyphicon glyphicon-search"></i>
<span>查询</span>
</button>
<button type="button" class="btn btn-primary" id="btnreset">
<i class="glyphicon glyphicon-refresh"></i>
<span>重置</span>
</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<div data-options="region:'center'" style="border: 0; padding-left: 5px; padding-right: 3px">
<table id="dglist" style="width: 100%;">
</table>
<div style="height:360px;">
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var $streettree = $("#streettree");
var $dg = $("#dglist");
$streettree.tree({
url: 'security/area/getStreetTree',
method: 'GET',
loadFilter: function (data, parent) {
//debugger;
return data.data;
},
onSelect: function (node) {
//console.log(node);
debugger;
var flag = node.flag;
var id = node.id;
var idNode = "";
if(flag.length>0&&flag=="1"&&id!="-1"){
idNode = node.id;
$("#streetTown").val(idNode);
$("#id").val("");
}
if(flag.length>0&&flag=="0"){
idNode = node.id;
$("#id").val(idNode);
$("#streetTown").val("");
}
if(flag.length>0&&flag=="1"&&id=="-1"){
idNode = node.id;
$("#id").val("");
$("#streetTown").val("");
}
/*$.ajaxSettings.async = false;
$.post("alter/hismonitor/query",{"querystr":querystr},function(data) {
}); */
$dg.datagrid("load");
}
});
$(function(){
//页面加载完毕的事件
$Core.OnPageLoad(function () {
$Core.Loading.HidePageLoading();
});
});
</script>后台数据交换
@Table(name = "se_area")
public class Area {
@Id
private Integer areaId;
private Integer parentId;
private String areaName;
private Double longitude;
private Double latitude;
private Integer level;
} @Override
public List<Map<String, Object>> getHistorymonitory() {
// TODO Auto-generated method stub
List<Map<String, Object>> treeNodes = new ArrayList<Map<String, Object>>();
Map<String, Object> rtnNode = new HashMap<String, Object>();
List<Map<String, Object>> rtnNodes = new ArrayList<Map<String, Object>>();
Area area = new Area();
area.setLevel(3);
List<Area> areaList = mapper.select(area);
for(Area areas : areaList) {
List<Map<String, Object>> childrens = new ArrayList<Map<String, Object>>();
Map<String, Object> treeNode = new HashMap<String, Object>();
treeNode.put("id", areas.getAreaId());
treeNode.put("text", areas.getAreaName());
treeNode.put("flag", "1");
/*查询街道对应的用户*/
List<PublicServicesUser> idByStreet = publicServicesUserService.getIdByStreet(areas.getAreaId());
/*PublicServicesUser publicServicesUser = new PublicServicesUser();
publicServicesUser.setStreetTown(areas.getAreaId().toString());
List<PublicServicesUser> select = publicServicesUserMapper.select(publicServicesUser);*/
for(PublicServicesUser users:idByStreet) {
Map<String, Object> children = new HashMap<String, Object>();
children.put("id", users.getId());
children.put("text", users.getUserName());
children.put("flag", "0");
childrens.add(children);
}
if(childrens.size()>0) {
treeNode.put("children", childrens);
}else {
treeNode.put("children", null);
}
treeNodes.add(treeNode);
}
rtnNode.put("id", -1);
rtnNode.put("text", "街道");
rtnNode.put("flag", "1");
rtnNode.put("children", treeNodes);
rtnNodes.add(rtnNode);
return rtnNodes;
}