tree 增删改

@@ -9,6 +9,11 @@ public class HttpUriContants {
     public static final String HOST_GROUP_GETALL = "/hostGroup/getHostGroups";
 
     /***  机组信息   ****/
-    public static String GET_ALL_TYPE = "/type/query";
+
+    //类型信息
+    public static String TYPE_GET_ALL = "/type/query";
+    public static String TYPE_ADD = "/type/add";
+    public static String TYPE_DEL = "/type/delete";
+    public static String TYPE_UPDATE = "/type/update";
 
 }

+package com.ui.ctrl;
+
+import com.alibaba.fastjson.JSONObject;
+import com.ui.contants.HttpUriContants;
+import com.ui.http.HttpRestClient;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+/**
+ * Created by fruwei on 2016/6/16.
+ */
+@Controller
+@RequestMapping("type")
+public class TypeCtrl {
+    Logger logger = LoggerFactory.getLogger(TypeCtrl.class);
+
+    @Autowired
+    private HttpRestClient httpClient;
+
+    @RequestMapping("/all")
+    @ResponseBody
+    public String getAllType() {
+        String strType = "";
+
+        logger.debug("get all type");
+
+        strType = httpClient.defaultGet(HttpUriContants.TYPE_GET_ALL, String.class);
+
+        logger.info("all type: {}", strType);
+
+        return strType;
+    }
+
+
+    @RequestMapping("/add")
+    @ResponseBody
+    public String addType(@RequestParam String name, @RequestParam int pid, @RequestParam int isleaf) {
+
+        String rel;
+        logger.info("add  type name:{},pid:{},isLeaf{}", name, pid, isleaf);
+
+        JSONObject req=new JSONObject();
+        req.put("typeName",name);
+        req.put("typeParentId",pid);
+        req.put("typeIsLeaf",isleaf);
+
+        rel = httpClient.defaultPost(HttpUriContants.TYPE_ADD, req,String.class);
+
+        logger.info("all type: {}", rel);
+
+
+
+        return rel;
+    }
+
+
+    @RequestMapping("/del")
+    @ResponseBody
+    public String delType(@RequestParam int id) {
+        String rel = "";
+        logger.info("update  type id {} ", id);
+        rel = httpClient.defaultGet(HttpUriContants.TYPE_DEL+"/"+id,String.class);
+        logger.info("update type: {}", rel);
+        return "ok";
+    }
+
+
+    @RequestMapping("/update")
+    @ResponseBody
+    public String updateType(@RequestParam int id, @RequestParam String name) {
+        String rel = "";
+
+        logger.info("update  type id {} ,name {}", id, name);
+
+        JSONObject req=new JSONObject();
+
+        req.put("typeId",id);
+        req.put("typeName",name);
+
+        rel = httpClient.defaultPost(HttpUriContants.TYPE_UPDATE, req,String.class);
+        logger.info("update type: {}", rel);
+
+        return rel;
+    }
+
+}

@@ -20,7 +20,6 @@
         <!-- 树 -->
         <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
             <div class="widget-title">
-
                 <h5>Tree Title</h5>
             </div>
             <ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;">
@@ -31,8 +30,8 @@
                 <li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span
                         class="ui-icon ui-icon-minusthick"></span></li>
             </ul>
-            <div id="continer"></div>
-            <div id="jstree"></div>
+            <div id="jstree" class="jstree jstree-default jstree-default-small" role="tree" aria-multiselectable="true"
+                 tabindex="0" style="height: 400px"></div>
         </div>
         <!-- 列表 -->
         <div class="widget-content nopadding" style="margin-left: 300px;">
@@ -107,10 +106,6 @@
     });
 
 
-
-
-
-
     var dom = document.getElementById("icons");
     var str = dom.getAttribute("style");
     str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");
@@ -126,82 +121,149 @@
 
 <script>
     var treeData = [];
-    var addType = function (id, pid, name, isleaf) {
+    var addType = function (node) {
         var rel = 0;
+        var pid;
+        var name;
+        var isleaf;
+        $('#modal_type_update').hide();
+        $('#modal_type_add').show();
 
-        $.get("type/add",
-                {
-                    "id": id, "pid": pid, "name": name, "isleaf": isleaf
-                }
-                ,
-                function (data, state) {
+        $('#tx_type_id').val(node.id);
+        $('#tx_type_action').val("add");
+        $('#tx_new_type_isleaf').val(1);
+        $('#tx_new_type_parent').val(node.id);
 
-                }
-        );
+        $('#myModal').modal({keyboard: true});
 
         return rel;
     };
-    var delType = function () {
+    var delType = function (id) {
         var rel = 0;
-        $.get("type/del", function (data, state) {
-
-
-        });
+        $('#tx_type_action').val("del");
+        $('#modal_type_update').hide();
+        $('#modal_type_add').hide();
+        $('#tx_type_id').val(id);
+        $('#myModal').modal({keyboard: true});
+        $.get("type/del",
+                {"id": id},
+                function (data, state) {
 
+                });
         return rel;
     };
-    var updateType = function () {
+    var updateType = function (id, oldName) {
         var rel = 0;
-
+        $('#tx_type_action').val("update");
+        $('#tx_type_id').val(id);
+        $('#tx_update_type_name_old').val(oldName);
+        $('#modal_type_update').show();
+        $('#modal_type_add').hide();
+        $('#myModal').modal({
+            keyboard: true
+        });
 
         return rel;
     };
 
+    var doAddType = function () {
+        var pid = $('#tx_type_id').val();
+        var name = $('#tx_new_type_name').val();
+        var isleaf = 1;
+        $.get("type/add",
+                {"pid": pid, "name": name, "isleaf": isleaf},
+                function (data, state) {
+
+
+                }
+        );
+    }
+    var doUpdateType = function () {
+        var id = $('#tx_type_id').val();
+        var name = $('#tx_update_type_name_new').val();
+        console.log("update "+id+" name "+name );
+        $.get("type/update",
+                {"id": id, "name": name},
+                function (data, state) {
+
+
+                }
+        );
+    }
+    var doDelType = function () {
+        var id = $('#tx_type_id').val();
+        console.log("delete "+id);
+        $.get("type/del",
+                {"id": id},
+                function (data, state) {
+
+                }
+        );
+    }
+    $("#btn4type").click(function () {
+        console.log("frw");
+        if ($("#tx_type_action").val() == "add") {
+            doAddType();
+        }
+        else if ($("#tx_type_action").val() == "update") {
+            doUpdateType();
+        } else if ($("#tx_type_action").val() == "del") {
+            doDelType();
+        }
+        $('#myModal').dialog('hide');
+    });
+
     $(function () {
         $.get("type/all", function (data, state) {
-            console.log(state)
+//            console.log(state)
             console.log(data);
             var jsonData = JSON.parse(data);
-            treeData=[];  //重置
+            treeData = [];  //重置
             $.each(jsonData, function (n, val) {
                 var treeNode = {};
                 treeNode.id = "" + val.typeId;
                 treeNode.parent = "" + (val.typeParentId == 0 ? "#" : val.typeParentId);
                 treeNode.text = val.typeName;
+                treeNode.isleaf = val.typeIsLeaf;
                 treeData.push(treeNode)
             })
 
             $('#jstree').jstree({
-                "plugins": ["themes", "checkbox", "contextmenu", "ui", "types"],
+                "plugins": ["themes", "checkbox", "contextmenu", "ui", "types", "crrm", "core"],
                 'core': {
                     "themes": {
                         "icons": false
                     },
-                    'data': treeData
+                    'data': treeData,
+                    'check_callback': true
                 },
                 'contextmenu': {
                     "items": {
                         "ADD": {
-                            "label": "ADD",
+                            "label": "添加",
                             "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);
+                                console.log(obj);
+                                console.log(clickedNode);
+                                console.log("add operation--clickedNode's id is:" + clickedNode.id);
+                                addType(clickedNode);
                             }
                         }, "DEL": {
-                            "label": "DEL",
+                            "label": "删除",
                             "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()
+                                delType(clickedNode.id);
+                                $('#jstree').jstree("delete_node", clickedNode);
                             }
                         }, "UPDATE": {
-                            "label": "UPDATE",
+                            "label": "修改",
                             "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);
+                                updateType(clickedNode.id, clickedNode.text);
                             }
                         }
                     }
@@ -209,19 +271,60 @@
             }).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>
\ No newline at end of file
+</script>
+
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
+     aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close"
+                        data-dismiss="modal" aria-hidden="true">
+                    &times;
+                </button>
+                <h4 class="modal-title" id="myModalLabel">
+                    添加类型
+                </h4>
+            </div>
+            <div class="modal-body" style="height: 200px">
+                <input type="hidden" id="tx_type_action"/>
+                <input type="hidden" id="tx_type_id"/>
+
+                <div id="modal_type_add">
+                    <div class="input-group" style="float: left;">
+                        <span class="input-group-addon">Name：</span>
+                        <input type="text" id="tx_new_type_name" class="form-control" placeholder=""/>
+                    </div>
+                    <div class="input-group" style="float: left;">
+                        <span class="input-group-addon">父节点：</span>
+                        <input type="text" id="tx_new_type_parent" class="form-control" placeholder=""/>
+                    </div>
+                    <div class="input-group" style="float: left;">
+                        <span class="input-group-addon">是否叶子节点：</span>
+                        <input type="text" id="tx_new_type_isleaf" class="form-control" placeholder=""/>
+                    </div>
+                </div>
+                <div id="modal_type_update">
+                    <div class="input-group" style="float: left;">
+                        <span class="input-group-addon">原名称：</span>
+                        <input type="text" id="tx_update_type_name_old" class="form-control" placeholder=""/>
+                    </div>
+                    <div class="input-group" style="float: left;">
+                        <span class="input-group-addon">新名称：</span>
+                        <input type="text" id="tx_update_type_name_new" class="form-control" placeholder=""/>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                <button type="button" id="btn4type" class="btn btn-primary">确认</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file