ztree 右键事件演示增删改及拖拽功能

在ztree官网上有详细的API和demo，这里就不在详细的介绍了，主要对一些用到的功能进行讲解。

需要用到的文件

css  js

<link href="js/ztree/css/demo.css" rel="stylesheet"></link>

 <link href="js/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"></link>

<script src="js/jquery-1.11.1.min.js"></script>//这里jquery的版本可以自己选择，在项目中我们采用的是jquery-1.11.1

<script src="js/ztree/js/jquery.ztree.core.min.js"></script>

<script src="js/ztree/js/jquery.ztree.excheck.min.js"></script>

 <script src="js/ztree/js/jquery.ztree.exedit.js"></script>

项目结合：

项目采用的是基于注解的springmvc+spring data jpa hibernate+bootstrap

需求：

首先点击网站频道管理---》网站展示页面----》点击频道---》频道树的展示页面（包含右键增删改，拖拽功能）

网站展示：

频道树形展示（包含右键事件增删改，拖拽）

右键的增删改的修改展示：

代码展示：

html页面：

<div id="content_wrap">
		<div style="position:relative;float:left;margin:40px;" class="menuContent" >
		<div id="zTreeChannels" class="ztree"></div>
		<input type="hidden" id="callbackTrigger" checked /> 
		<div id="rMenu"  style="width: 60px;">
            <ul>
                <li id="m_add" ><img  src="js/ztree/image/add.png" width="15px"/>  新增</li>
                <li id="m_rename" ><img  src="js/ztree/image/rename.png" width="15px"/>  修改</li>
                <li id="m_del" ><img  src="js/ztree/image/del.png" width="15px"/>  删除</li>
            </ul>
	</div>	
	  </div>
	<div id="managerMenu" style="  float:left; display:inline;margin:60px;text-align: center;display: none;" > 
   			<table id="tab" >
	   			<tr id="pidTr" height="40px">
	   				<td>父级节点ID:</td>
	   				<td colspan="2"><input type="text" id="pid"></td>
	   			</tr>
	   			<tr id="pidNametr"  height="40px">
	   				<td>父级节点名称:</td>
	   				<td colspan="2"><input type="text" id="parentName"></td>
	   			</tr>
	   			<tr  height="40px">
	   				<td>节点名称:</td>
	   				<td colspan="2"><input type="hidden" id="menuId"><input id="menuName" type="text" name="name" >
<!-- 	   				<span id="errorName"></span> -->
	   				</td>
	   			</tr>
	   			<tr  height="40px">
	   				<td>url:</td>
	   				<td colspan="2"><input id="url" type="text" name="name" >
<!-- 	   				<span id="errorUrl"></span> -->
	   				</td>
	   			</tr>
	   			<tr>
	   				<tr  height="40px">
	   				<td>频道层次展示:</td>
	   				<td colspan="2"><input id="chCascadeName" type="text" name="chCascadeName" >
	   				<input id="focId" type="hidden" name="focId" >
	   				</td>
	   			</tr>
	   			<tr  height="50px">
	   				<td colspan="3" align="center">
						<input id="updateSave" type="button" value="节点维护" />
						<input id="menu_save" type="button" value="添加节点">
					</td>
				</tr>
   			</table>
   </div>
   <div id="unknown" style="display: none"><span style="color: red;font-size: 24px;">没有找到相应的数据！！！</span></div>
</div>
<style type="text/css">
	div#rMenu {
		position:absolute; 
 		visibility:hidden;  
		top:0;  
		background-color: #555; 
 		text-align: left; 
		padding: 2px; 
		}
	div#rMenu ul li{
		margin: 2px 0;
		padding: 0 2px;
		cursor: pointer;
		list-style: none outside none;
		background-color: #DFDFDF;
}
	</style>
	

js展示：

function foc_channels() {
    var crudServiceBaseUrl = '/focChannels',
        DataSourceOption_this = Object.create(DATASOURCE_OPTION_OBJ_SP),
        DataSourceOptionTransport_this = Object.create(DATASOURCE_OPTION_TRANSPORT_OBJ),
        DataSourceOptionSchema_this = Object.create(DATASOURCE_OPTION_SCHEMA_OBJ_SP),
        GridOption_this;
    DataSourceOptionTransport_this.read = {
              url: crudServiceBaseUrl + "/findB"
          };
    //TODO bug 
    DataSourceOptionTransport_this.parameterMap = function(data, operation) {
        // if(operation !== "read") {
         console.log(data);
        switch(operation) {
            case "read":
                return encodeURI('page=' + data.page + '&pagesize=' + data.pageSize +'×tamp=' + $.now());
                break;
            default:
                return -1;
        }
        // }
    };
    DataSourceOptionSchema_this.model = {
            id: "id",
              fields: {
                  name: {
                      validation: {
                          required: true
                      }
                  },
                  url: {
                      validation: {
                          required: true
                      }
                  }
              }
    };
    DataSourceOption_this.transport = DataSourceOptionTransport_this;
    DataSourceOption_this.schema = DataSourceOptionSchema_this;
    DataSourceOption_this.schema.parse = function(response) {
        // if(!response.data) {
        //     response.data = [];
        // }
        var array = response.data || [];
        //for(var i = 0; i < array.length; i++) {
         //   array[i].id = i;
       // }
        response.data = array;
        // console.log(response);
        return response;
    };
    GridOption_this = {
        pageable: {
            pageSize: 10,
            refresh: true,
            buttonCount: 5,
            messages: {
                display: "当前 {0}-{1} , 共 {2} ",
                empty: "无数据",
                first: "首页",
                last: "末页",
                next: "后一页",
                previous: "前一页",
                refresh: "刷新",
                morePages: "更多页"
            }
        },
        columns: [{
            command: [{
            	name: "content_wrap",
            	text: "频道",
            	click: function(e) {
                    var tr = $(e.target).closest("tr");
                    var siteId = this.dataItem(tr).id;
                    // console.log(data);
                    $("#window").kendoWindow({
                        resizable: false,
                        draggable: false,
                        modal: true,
                        width: "750px",
                        position: {
                            top: "15%",
                            left: "25%"
                        },