【Js__ztree】ztree使用

此次有两坑

静态文件放行<mvc:default-servlet-handler/>对应zTreeStyle的img文件夹
json乱码 @RequestMapping(value = "/getZtreeData", produces = "application/json; charset=utf-8")

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ztree</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="${ctx}/script/zTree_v3/css/zTreeStyle/zTreeStyle.css">
</head>
<body>
<h1 onclick="m1();">最简单的树 -- 标准 JSON 数据</h1>
<!-- treeDemo: 和初始化的id要对应   class=zTree 代表使用zTree的主题样式 -->
<div id="tree" class="ztree"></div>


<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="${ctx}/script/zTree_v3/js/jquery.ztree.core.js"></script>
<script src="${ctx}/script/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script>
    $(document).ready(function () {
        m1();
        treeInit();
    });

    function treeInit() {
        var setting = {
            check: {
                enable: true,
                chkStyle: "checkbox"//显示 checkbox 选择框,默认checkbox可选择值radio
            },
            callback: {
                onCheck: zTreeOnCheck
            },
            async: {
                enable: true, type: "post", dataType: "json",//要开启async功能必须设置为true,其他地方同理
                url: "${ctx}/ztree/getZtreeData"
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",//节点id名
                    pIdKey: "pid",//父节点id名
                    rootPId: 0//默认根节点为0
                }
            }
        };
        var zTreeNodes = [];
        var city = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
        /*
        $.ajax({
            type: "post", dataType: "json", async: true, cache: true,
            url: "${ctx}/ztree/getZtreeData2",
            data: {"id": ""},
            success: function (data) {
                if (data.code == 1) {
                    //console.log("code", data);
                    var zTreeNodes = data.data;
                    console.log("code", data.data);
                    var city = $.fn.zTree.init($("#tree"), setting, data.data);
                } else {
                    console.log(data);
                }
            }
        });
        */
    }

    function zTreeOnCheck(event, treeId, treeNode) {
        console.log(event);
        console.log(treeId);
        console.log(treeNode);
        console.log(treeNode.name);//弹出城市名字
        console.log(treeNode.id);//弹出城市名字
    }

    function m1() {
        $.ajax({
            type: "post", dataType: "json", async: true, cache: true,
            url: "${ctx}/ztree/m1",
            data: {"id": ""},
            success: function (data) {
                if (data.code == 1) {
                    console.log("data.code == 1", data);
                } else {
                    console.log(data);
                }
            }
        });
    }
</script>
</body>
</html>

@Controller
@RequestMapping("/ztree")
public class ZTreeController {

    @RequestMapping("/index")
    public String index() {
        return "ztree/index";
    }

    @RequestMapping(value = "/getZtreeData", produces = "application/json; charset=utf-8")
    @ResponseBody
    public String getZtreeData(HttpServletRequest request) {
        String data = "[\n" +
                "  {\"name\":\"北京\",\"open\":true,\"id\":1,\"pid\":0},\n" +
                "  {\"name\":\"东城区\",\"id\":11,\"pid\":1},\n" +
                "  {\"name\":\"朝阳区\",\"id\":12,\"pid\":1},\n" +
                "  {\"name\":\"重庆\",\"open\":true,\"id\":2,\"pid\":0},\n" +
                "  {\"name\":\"巴南区\",\"open\":true,\"id\":21,\"pid\":2},\n" +
                "  {\"name\":\"南泉\",\"id\":211,\"pid\":21},\n" +
                "  {\"name\":\"界石\",\"id\":212,\"pid\":21},\n" +
                "  {\"name\":\"渝中区\",\"id\":22,\"pid\":2}\n" +
                "]";
        return data;
    }
}

【Js__ztree】ztree使用

上一篇:fiddler网页抓包,更换请求前和返回后的数据


下一篇:JS 图片显示一部分 小计