jQuery-zTree-异步加载

业务流程分：页面zTree配置，树展示，后台接口异步请求，第三方接口调用

树展示：

<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>

此处class按需求更改，ul中的id"treeDemo"为树的唯一定义，与下文中的初始化对应，以及树操作中定位树时id名对应。

页面zTree树处理：

<script type="text/javascript">
    var currentCode;
    //zTree配置
    var setting = {
        view: {
	    selectedMulti: false //是否多选
	},
	//异步树配置
	async: {
	    enable: true, //启用异步加载
    	    url:"url", //调用的后台的controler,该地址返回树json串
	    autoParam:["id"]  //向后台传递的参数，该id为返回树json中的节点名
	},
	//树操作事件注册
	callback: {
	    //点击树节点时执行的方法，该文章中用于获取选中树的id参数值分析动态展示页面中其他id关联信息
	    onClick: zTreeOnClick
	}
    };
    //点击树节点后页面操作
    function zTreeOnClick(event, treeId, treeNode) {
        currentCode = treeNode.code; //获取所点击节点的code值，code为树返回json串中的节点名
        ...  //业务操作
    }
    
    $(document).ready(function() {
        $.fn.zTree.init($("#treeDemo"), setting);  //"treeDemo"与html中存放树的标签id一致
        ...  //业务其他初始化信息
    })
</script>

这样异步，第一次请求时传参id值为null，后台记得处理。

后台Controler：

@RequestMapping("/sso/grant/getDeptTree.do")
public String getGroupList(HttpServletRequest request, PageBean pageBean
	    , HttpServletResponse response) {
    //上面异步传参时传递的参数id以post形式传给后台，此处为取出参数值，用于第三方接口调用
    String deptCode = request.getParameter("id");
    //我的系统中设置请求返回值要求为json，可根据自身系统情况处理
    pageBean.setType(PageBean.RESPOSE_TYPE_JSON);
    //zTree中传参id下的子树json（输出值）
    String jsonTree = "";
    try {
        //我的系统中Service层调用第三方接口并处理后返回zTree树结构的json串
        jsonTree = groupGrantService.getDeptPersonJson(deptCode);
    } catch (Exception e) {
        log.error("获取单位树错误: " + e.getMessage());
    }
    //ResponseUtils中writeUtf8JSON方法封装返回页面json串
    ResponseUtils.writeUtf8JSON(response, jsonTree);
    return null;
}

以上后台代码为系统中代码稍作修改，主要说明异步传参后台的接受方式。（Service层处理页面加载时请求的id为null的情况）

[
    {
        "id": "ff8080814dd8257f014ddaf6a6a90089",
        "pId": "0",
        "code": "41010001",
        "name": "名字1",
        "isParent": true
    },
    {
        "id": "ff8080814dd8257f014ddb0c639f011a",
        "pId": "0",
        "code": "41010002",
        "name": "名字2",
        "isParent": true
    },
    {
        "id": "ff8080814dd8257f014ddaf703ef0091",
        "pId": "0",
        "code": "41010100",
        "name": "名字3",
        "isParent": true
    },
    {
        "id": "ff8080814dd8257f014ddaf74ef70099",
        "pId": "0",
        "code": "41010200",
        "name": "名字4",
        "isParent": true
    },
    {
        "id": "ff8080814dd8257f014ddb0ce2290122",
        "pId": "0",
        "code": "41010300",
        "name": "名字5",
        "isParent": true
    }
]

这个是我后台返回的树json格式，其中code是我的异步传参节点

这个文档初学者可以参考，因为这就是我从刚了解到处理整个过程

想要详细了解zTree的话，请查阅zTree官网：http://www.ztree.me/v3/main.php#_zTreeInfo

来源：oschina

链接：https://my.oschina.net/u/2438708/blog/497193

标签

jquery