前端需要导入
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>
<ul id="authTree" class="zTree"></ul>
js代码:
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为’id’,通过URL发送到服务器上面检索子节点。
// 初始化权限zTree
function initzTree() {
var setting = {
check : {
enable : true,
// 每个节点上是否显示 CheckBox
},
data : {
simpleData : {// 简单数据模式
enable : true,
}
}
};
$.ajax({
url :'/moduleAction.action',//向后台获取数据
data : {
'methodName' : 'queryModuleAll',//向后台传的参数
},
dataType : 'json',
type : 'post',
async : false,
success : function(data) {
zTreeObj=$.fn.zTree.init($('#authTree'),setting,data);// 赋值
}
});
}
后台代码:
返回过滤过的数据进行展示,返回数据是标准树格式。
这个控件使用的重点在于后台返回数据的格式
private ObjectMapper mapper=new ObjectMapper();
public String queryModuleAll(HttpServletRequest request,HttpServletResponse response) {
try {
List<Module> lst=imd.queryModuleAll();//获取数据库的数据
List<Map<String, Object>> map=new ArrayList<>();
Map<String, Object> item=null;
for (Module mod : lst) {
item=new HashMap<>();
item.put("id", mod.getId());
item.put("pId", mod.getPid());
item.put("name", mod.getText());
map.add(item);
}
mapper.writeValue(response.getOutputStream(), map);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
dao方法,sql语句就是查询所有而已
public List<Module> queryModuleAll() throws Exception {
String sql="select *from t_module order by sort asc";
return super.executeQuery(sql, pb, Module.class);
}