frw_tree.jsp 3.62 KB
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>jsTree test</title>
    <link rel="stylesheet" href="./js/jstree/themes/default/style.min.css"/>

</head>
<body>
<div id="jstree"></div>
<script src="./js/jquery-1.12.0.min.js"></script>
<script src="./js/jstree/jstree.min.js"></script>
<script>
    var treeData = [];
    var addType = function (id, pid, name, isleaf) {
        var rel = 0;

        $.get("type/add",
                {
                    "id": id, "pid": pid, "name": name, "isleaf": isleaf
                }
                ,
                function (data, state) {

                }
        );

        return rel;
    };
    var delType = function () {
        var rel = 0;
        $.get("type/del", function (data, state) {


        });

        return rel;
    };
    var updateType = function () {
        var rel = 0;


        return rel;
    };

    $(function () {
        $.get("type/all", function (data, state) {
            console.log(state)
            console.log(data);
            var jsonData = JSON.parse(data);
            treeData.removeAll();  //重置
            $.each(jsonData, function (n, val) {
                var treeNode = {};
                treeNode.id = "" + val.typeId;
                treeNode.parent = "" + (val.typeParentId == 0 ? "#" : val.typeParentId);
                treeNode.text = val.typeName;
                treeData.push(treeNode)
            })

            $('#jstree').jstree({
                "plugins": ["themes", "checkbox", "contextmenu", "ui", "types"],
                'core': {
                    "themes": {
                        "icons": false
                    },
                    'data': treeData
                },
                'contextmenu': {
                    "items": {
                        "ADD": {
                            "label": "ADD",
                            "action": function (obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                alert("add operation--clickedNode's id is:" + clickedNode.id);
                            }
                        }, "DEL": {
                            "label": "DEL",
                            "action": function (obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                console.log("del operation--clickedNode's id is:" + clickedNode.id);
                                addType()
                            }
                        }, "UPDATE": {
                            "label": "UPDATE",
                            "action": function (obj) {
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                alert("update operation--clickedNode's id is:" + clickedNode.id);
                            }
                        }
                    }
                }
            }).bind("loaded.jstree", function (event, data) {
                $(this).jstree("open_all");
            });

//            .bind("select_node.jstree", function(event, data) {
//
//                var evt =  window.event || event;
//                var button = evt.which || evt.button;
//                console.log("fdfdfdf"+button);
//                if( button != 1 ) return false;
//
//            })
        });


    });


</script>
</body>
</html>