13518219792
最近要做一个树结构，就使用了jQuery 的树插件，感觉还不错，做个随笔
专注于为中小企业提供网站设计制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业荆州免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
页面的基本结构是这样的
这里的样式是使用了metroStyle文件夹里的类bootstrap风格，当然首先需要下载ztree插件，直接百度即可，下载完成后由对应的api和一些例子，这里使用的是复选框模板
jQuery zTree树的下载链接
页面jsp如下：
ZTREE DEMO - checkbox
上面的死数据替换为后台赋予的值，用的是ajax方式，当然后台需要用json方式进行交互
java代码控制器代码如下：
@Controller
@RequestMapping("/Units")
public class UnitsController{
@Autowired
private UnitsService unitsService;
@RequestMapping("/ListTree")
@ResponseBody
public List ListTree(){
List jsonList = new ArrayList();
List zTreeAll = unitsService.zTreeAll();
for (Units units : zTreeAll) {
JSONObject json = new JSONObject();
// { id:1, pId:0, name:"随意勾选 1", open:false}
if(units.getUnitsId() == units.getNodeData()){
JSONObject json1 = new JSONObject();
json1.put("id", units.getUnitsId());
json1.put("pId", 0);
json1.put("name", units.getUnitsName());
json1.put("open", false);
jsonList.add(json1);
json.put("id", -1);
json.put("pId", units.getNodeData());
json.put("name", units.getSectorName());
json.put("open", false);
}else{
json.put("id", units.getUnitsId());
json.put("pId", units.getNodeData());
json.put("name", units.getSectorName());
json.put("open", false);
}
jsonList.add(json);
}
// for (JSONObject units : jsonList) {
// System.out.println(jsonList.toString());
// }
return jsonList;
}
}
这样就可以实现所需要的树结构，ztree树是可以无限扩展的，就按照个人所需，来选择模板就可以了
jsp中的这段代码是获得当前选择值得id
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
nodes=treeObj.getCheckedNodes(true),
v="";
for(var i=0;i以上就是使用ztree的基本方法，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
