树形结构json格式赋值，传值_给树结构赋值-优快云博客

本文介绍了如何使用ZTree插件在前端构建树形结构，并从后端获取JSON数据填充。在用户选择节点后，通过AJAX提交已选择的节点ID。关键步骤包括设置ZTree配置、初始化树结构、处理用户选择及提交表单时的值传递。后端返回的JSON数据需经过处理，确保符合ZTree所需的格式，即包含`id`、`pId`和`name`字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做树形结构把在数据库中查到的数据，存在的打上对勾，首先导入

<!--ztree -->
<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/metro.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>

这两个插件，再使用getjson请求后台数据

var data = rel.data;
    var setting = {
        check: {enable: true, nocheckInherit: true}, view: {selectedMulti: false},
        data: {simpleData: {enable: true}}, callback: {
            beforeClick: function (id, node) {
                tree.checkNode(node, !node.checked, true, true);
                return false;
            }
        }
    };
    var zNodes =${list};

    // 初始化树结构
    var tree = $.fn.zTree.init($("#menuTree1"), setting, zNodes);
将以上作为全局变量，因为在后面要用到，再从新选择后提交后台接收值得情况。

var url = "${ctx}/meetingIn/usertype/?type=1&meetingId=${meeting.id}";
$.getJSON(url, function (rel) {
    
    // 不选择父节点
    tree.setting.check.chkboxType = {"Y": "ps", "N": "s"};
    // 默认选择节点
    var ids = data.split(",");
    for (var i = 0; i < ids.length; i++) {
        var node = tree.getNodeByParam("id", ids[i]);
        try {
            tree.checkNode(node, true, false);
        } catch (e) {
        }
    }
    // 默认展开全部节点
    tree.expandAll(true);
});
function checkUser(){
    $("#users1").val("");
    var ids1 = [], nodes = tree.getCheckedNodes(true);
    for (var i = 0; i < nodes.length; i++) {
//这里判断将父节点为空的排除掉
        if(nodes[i].pId!=""){
            ids1.push(nodes[i].id);
        }
    }
    alert($("#users1").val(ids1));

    $("#users1").val(ids1);

    if($("#users1").val()==""){
        return false;
    }else {
        return true;
    }
}
这里在提交表单时进行传值，要判断为空的状态，还要每次选择的时候的将之前的数据清空
<input type="hidden" name="usersid" id="users1"/>
将选中的值放入上面文本框。
<div id="menuTree1" class="ztree" style="margin-top:3px;float:left;"></div>
在这里有两点非常重要，一个是zNodes,zNodes是一个json格式，在这里要给正确的json格式，因为在前端不好展示，所以在后端利用map，将要的数据变成json格式

一个是data.split(",")，将显示的树形结构放到div中。

下面是后端的ajax请求和返回的json格式

@RequiresPermissions(value={"meetingIn:meetingIn:view"},logical=Logical.OR)
@RequestMapping(value = "usertype")
@ResponseBody
public String usertype(MeetingIn meetingIn) {
   Gson gson = new Gson();
   try{
      List<MeetingIn> list=meetingInService.findUserIdList(meetingIn);
      String str="";
      for(MeetingIn meeting:list){
         str+=meeting.getUserId()+",";
      }
      JsonResult jsonResult = new JsonResult(1,str);
      return gson.toJson(jsonResult);
   }catch(Exception ex){
      JsonResult jsonResult = new JsonResult(0,ex.getMessage());
      return gson.toJson(jsonResult);
   }
}
将返回的集合对象，将它的ID利用字符串拼接，返回一个字符串，在前端解析出  var data = rel.data; var ids = data.split(",");
List<HashMap> hashMapList = new ArrayList<HashMap>();

List<Office> officeList=officeService.getListOffice();
for (Office office:officeList){
   HashMap hashMap = new HashMap();
   hashMap.put("id",office.getId());
   hashMap.put("pId",0);
   hashMap.put("name",office.getOfficename());
   hashMapList.add(hashMap);
   for(User u :officeService.getListUser(office.getId())){
      HashMap hashMap1 = new HashMap();
      hashMap1.put("id",u.getId());
      hashMap1.put("pId",office.getId());
      hashMap1.put("name",u.getName());
      hashMapList.add(hashMap1);
   }
}
Gson gson = new Gson();
model.addAttribute("list",gson.toJson(hashMapList));
上面这段代码非常的重要，就是利用了这个特点将数据转换成了标准的json格式。其中 pId是必须要的，它代表了节点，父节点为0，它的子节点要跟它的id相同。