ztree异步加载-------右键增删改------点击事件-----拖拽功能----项目整合

博客介绍了如何在ZTree中实现异步加载,并结合右键菜单提供增删改功能,同时涵盖点击事件响应及拖拽功能。通过HTML、JS和控制层代码展示了具体实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

同步ztree右键增删改点击事件拖拽功能


框架要求在上篇中都有,就不说了,

需求

首先点击网站频道管理---》网站展示页面----》点击频道---》频道树的展示页面(包含右键增删改,拖拽功能)、树的点击事件展示详情信息




代码展示:

html页面:

<span style="font-size:18px;"><div id="content_wrap">
		<div id="divId" style="position:relative;float:left;" class="menuContent" >
		<ul id="zTreeChannels" class="ztree"></ul>
		<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>
	<ul id="managerMenu" class="ztree2" style="  float:left; display:inline;text-align: center;display: none;" >
	<div style="margin-top: 40px;">
   			<table id="tab" >
	   			<tr id="pidTr" height="40px">
	   				<td>父级频道ID:</td>
	   				<td colspan="2"><input type="text" id="pid" style="width:290px;"></td>
	   			</tr>
	   			<tr id="pidNametr"  height="40px">
	   				<td>父级频道名称:</td>
	   				<td colspan="2"><input type="text" id="parentName"  style="width:290px;"></td>
	   			</tr>
	   			<tr  height="40px">
	   				<td>频道名称:</td>
	   				<td colspan="2"><input type="hidden" id="menuId"><input id="menuName" type="text" name="name"  style="width:290px;">
	   				<span id="errorName"></span>
	   				</td>
	   			</tr>
	   			<tr  height="40px">
	   				<td>url:</td>
	   				<td colspan="2"><input id="url" type="text" name="name"   style="width:290px;">
	   				<span id="errorUrl"></span>
	   				</td>
	   			</tr>
	   			<tr>
	   				<tr  height="40px">
	   				<td>频道层次展示:</td>
	   				<td colspan="2"><input id="chCascadeName" type="text" name="chCascadeName" style="width:290px;">
	   				<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> 
   </ul>
   <ul id="list_div" class="ztree2" style="  float:left; display:inline;text-align: center;display: none;">
   <div style="margin-top: 40px;">
   		<table border="1">
   			<tr  height="95px">
   				<td>频道名称</td>
   				<td><input  id="td_name" style="width:290px;"></td>
   			</tr>
   			<tr  height="95px">
   				<td>频道父级url</td>
   				<td><a href="" id="aFUrl" target="_blank"><input  id="td_FUrl" style="width:290px;"></a></</td>
   			</tr>
   			<tr  height="95px">
   				<td>频道url</td>
   				<td><a href="" id="aUrl" target="_blank"><input  id="td_url" style="width:290px;"></a></td>
   			</tr>
   			<tr  height="95px">
   				<td>频道层次展示</td>
   				<td><input  id="td_chName" style="width:290px;"></td>
   			</tr>
   		</table>
   		</div>
   </ul>
   <div id="unknown" style="display: none"><span style="color: red;font-size: 24px;">没有找到相应的数据!!!</span></div>
</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>
	</span>

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 = [];
        // }
    	//console.log(response);
        var array = response.data || [];
        response.data = array;
        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;
                    var siteName = this.dataItem(tr).name;
                    $("#window").kendoWindow({
                        resizable: false,
                        draggable: false,
                        modal: true,
                        width: "750px",
                        position: {
                            top: "15%",
                            left: "25%"
                        },
                        title: siteName,
                        content: "js/pindao2.html",
                        close: function(e) {
                            $("#window").off("click", "**");
                            $("#window").parent().remove();
                            $("#main").append('<div id="window" style="display: none;"></div>');
                        },
                        animation: {
                            open: {
                                duration: 100
                            }
                        },
                        activate: function() {
                          //ztree
                            //全局参数
                            var zTree;var ztreeNode;
                            var rMenu = $("#rMenu");
                            
                        	var setting = {
                        			async: {
                        				enable: true,
                        				type: "get",
                        				url: getUrl
                        			},
//                        			check: {//复选框样式
//                        				enable: true
//                        			},
                        			data: {
                        				keep: {
                                            leaf: true,//属性配置  leaf: true, 表示叶子节点不能变成根节点。parent: true 表示 根节点不能变成叶子节点
                                            parent: true
                                            },
                        				simpleData: {
                        					enable: true
                        				}
                        			},
                        			edit: {
                                        drag:{
                                            isCopy: false,
                                            isMove: true
                                            },
                                        enable: true,//设置是否处于编辑状态
                                        showRemoveBtn: false,
                                        showRenameBtn: false
                                    },
                        			view: {
                                        dblClickExpand: false,
                                        showLine: false,
                                        expandSpeed: ""
                                    },
                        			callback: {
                        				beforeExpand: beforeExpand,
                        				onAsyncSuccess: onAsyncSuccess,
                        				onAsyncError: onAsyncError,
                                         onClick : zTreeOnClick,
                                         onDrop: onDrop,
                                         onRightClick: function(event, treeId, treeNode){
                                             //判断是否为点击事件;如果是节点点击事件,给全局变量ztreeNode赋值
                                            if (treeNode) {
                                                ztreeNode = treeNode;
                                            }
                                            if(ztreeNode.pId==0){
                                                alert("根节点不能右键操作!");
                                                //判断是否为父节点
                                            }else {
                                            	if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                                                    zTree.cancelSelectedNode();
                                                    showRMenu("root", event.clientX, event.clientY);
                                                } else if (treeNode && !treeNode.noR) {
                                                    //zTree.selectNode(treeNode);
                                                    //console.log(event);
                                                    var X=event.pageX-340;
                                                    var Y=event.pageY-130;
                                                   // console.log("x=="+X+"    y=="+ Y);
                                                    showRMenu("node", X, Y);
                                                }
                                            }
                                        },
                                    }
                        		};

                        	//加载跟目标
                        		var zNodes;
                        		$.ajax({url:"/api/findrootid?chSiteId="+siteId+"&name="+siteName,
                        				async:false,
                        				type:'get',
                        				dataType: 'json',
                        				success:function(data){
                        					var arr=[];
                        					data.pId=0;
                        					data.openFlag=true;
                        					data.isParent=true;
                        					data.open=true;
                        					data.name=data.siteName;
                        					arr.push(data);
                        					zNodes = arr;
                        				}
                        				});
                        		
                        		

                        		var log, className = "dark",
                        		startTime = 0, endTime = 0, perCount = 100, perTime = 100;
                        		//获取异步加载子节点的路径
                        		function getUrl(treeId, treeNode) {
                        			//console.log(treeNode);
                        			var url="/api/findSiteChannelSync?chSiteId="+siteId+"&chParentId="+treeNode.id;
                        			return url;
                        		}
                        		
                        		//新建方法beforeExpand,为什么是beforeExpand而不是onExpand呢,是因为在这个树中,预加载比加载完成后显示效果好。
                        		function beforeExpand(treeId, treeNode) {
                        			if (!treeNode.isAjaxing) {
                        				startTime = new Date();
                        				treeNode.times = 1;
                        				ajaxGetNodes(treeNode, "refresh");
                        				return true;
                        			} else {
                        				alert("zTree 正在下载数据中,请稍后展开节点。。。");
                        				return false;
                        			}
                        		}
                        		//成功回调函数
                        		function onAsyncSuccess(event, treeId, treeNode, msg) {
                        			if (!msg || msg.length == 0) {
                        				return;
                        			}
                        			var zTree = $.fn.zTree.getZTreeObj("zTreeChannels"),
                        			totalCount = treeNode.count;
                        			if (treeNode.children.length < totalCount) {
                        				setTimeout(function() {ajaxGetNodes(treeNode);}, perTime);
                        			} else {
                        				treeNode.icon = "";
                        				zTree.updateNode(treeNode);
                        				zTree.selectNode(treeNode.children[0]);
                        				endTime = new Date();
                        				var usedTime = (endTime.getTime() - startTime.getTime())/1000;
                        				className = (className === "dark" ? "":"dark");
                        				showLog("[ "+getTime()+" ]  treeNode:" + treeNode.name );
                        				showLog("加载完毕,共进行 "+ (treeNode.times-1) +" 次异步加载, 耗时:"+ usedTime + " 秒");
                        			}
                        		}
                        		//失败回调函数
                        		function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                        			zTree = $.fn.zTree.getZTreeObj("zTreeChannels");
                        			alert("异步获取数据出现异常。");
                        			treeNode.icon = "";
                        			zTree.updateNode(treeNode);
                        		}
                        		//加载图片
                        		function ajaxGetNodes(treeNode, reloadType) {
                        			 zTree = $.fn.zTree.getZTreeObj("zTreeChannels");
                        			if (reloadType == "refresh") {
                        				treeNode.icon = "js/ztree/css/zTreeStyle/img/loading.gif";
                        				zTree.updateNode(treeNode);
                        			}
                        			zTree.reAsyncChildNodes(treeNode, reloadType, true);
                        		}
                        		function showLog(str) {
                        			if (!log) log = $("#log");
                        			log.append("<li class='"+className+"'>"+str+"</li>");
                        			if(log.children("li").length > 4) {
                        				log.get(0).removeChild(log.children("li")[0]);
                        			}
                        		}
                        		function getTime() {
                        			var now= new Date(),
                        			h=now.getHours(),
                        			m=now.getMinutes(),
                        			s=now.getSeconds(),
                        			ms=now.getMilliseconds();
                        			return (h+":"+m+":"+s+ " " +ms);
                        		}
                        		
                                //=================ztree点击事件开始=========================================
                                     function zTreeOnClick(event, treeId, treeNode) {
                                     	if (treeNode) {
                                             ztreeNode = treeNode;
                                         }
                                      // console.log(ztreeNode.id + ", " + ztreeNode.pId);
                                         $.ajax({url:"/api/findNodeOneByChidAndChParentId?chId="+ztreeNode.id+"&chParent="+ztreeNode.pId,
                             				async:false,
                             				type:'get',
                             				dataType: 'json',
                             				success:function(data){
                             					// console.log(data);
                             					 $("#managerMenu").hide();
                                                 $("#list_div").show();
                                                 $("#td_name").val(ztreeNode.name);
                                                 $("#td_url").html(data.chUrl);
                                                 $("#td_chName").val(data.chCascadeName);
                                                 $('#aUrl').attr('href',data.chUrl);
                                                 $("#td_FUrl").html(data.pUrl);
                                                 $('#aFUrl').attr('href',data.pUrl);
                             				}
                             				});
                                     };
                                     //=================ztree点击事件结束=========================================
                                     //=================ztree右键菜单开始=========================================
                                     function showRMenu(type, x, y) {
                                         $("#rMenu ul").show();
                                         if (type=="root") {
                                               $("#m_add").hide();
                                               $("#m_rename").hide();
                                               $("#m_del").hide();
                                           } else {
                                               $("#m_add").show();
                                               $("#m_rename").show();
                                               $("#m_del").show();
                                       }
                                         rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
                                         $("body").bind("mousedown", onBodyMouseDown);
                                     }
                                     function hideRMenu() {
                                         if (rMenu) rMenu.css({"visibility": "hidden"});
                                         $("body").unbind("mousedown", onBodyMouseDown);
                                     }
                                     function onBodyMouseDown(event){
                                         if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
                                             rMenu.css({"visibility" : "hidden"});
                                         }
                                     }
                                 //=================ztree右键菜单结束=========================================
                                //=================ztree页面加载开始及各个点击事件================================
                        		$(document).ready(function(){
                        			//初始化ztree树
                        			$.fn.zTree.init($("#zTreeChannels"), setting, zNodes);
                        			zTree = $.fn.zTree.getZTreeObj("zTreeChannels");
                        			//鼠标点击事件不在节点上时隐藏右键菜单  
                        			hideRMenu();
                        			//信息展示页面隐藏
                                	$("#list_div").hide();
                                    //新增
                                    $("#m_add").on("click",function(){
                                        addTreeNode();
                                    });
                                    //添加保存
                                    $("#menu_save").on("click",function(){
                                    	saveMenuNode();
                                    });
                                    //重命名
                                    $("#m_rename").on("click",function(){
                                        updated();
                                    });
                                  //修改保存
                                    $("#updateSave").on("click",function(){
                                    	updatedSave_();
                                    });
                                    //删除
                                    $("#m_del").on("click",function(){
                                        removeTreeNode();
                                    });
                        		});
                                //=================ztree修改开始================================
                                function updated() {
                                	//右键菜单隐藏
                                	hideRMenu();
                                    //展示修改保存按钮
                                    $("#updateSave").show();
                                    //添加节点提交按钮隐藏
                                    $("#menu_save").hide();
                                    //判断是否为根节点
                                    if (ztreeNode.pId == 0) {
                                        //如果为根节点隐藏父节点名称展示行
                                        $("#pidNametr").hide();
                                    } else {
                                        //获取其父节点
                                        var pnode = ztreeNode.getParentNode();
                                        //展示其父节名称框
                                        $("#pidNametr").show();
                                        //给父节点名称文本框赋值并设置为只读模式
                                        $("#parentName").val(pnode.name);
                                        $("#parentName").attr("readonly","readonly");
                                    }
                                    //给父节点id长石矿赋值并设置为只读模式
                                    $("#pid").val(ztreeNode.pId);
                                    $("#pid").attr("readonly","readonly");
                                    //为节点名称框赋值
                                    $("#menuName").val(ztreeNode.name);
                                    $.ajax({url:"/api/findNodeOneByChidAndChParentId?chId="+ztreeNode.id+"&chParent="+ztreeNode.pId,
                         				async:false,
                         				type:'get',
                         				dataType: 'json',
                         				success:function(data){
                         					// console.log(data);
                                             //为节点url框赋值
                                             $("#url").val(data.chUrl);
                                             //设置隐藏域节点id
                                             $("#menuId").val(ztreeNode.id);
                                             $("#focId").val(data.id);
                                             $("#chCascadeName").val(data.chCascadeName);
                                             $("#chCascadeName").attr("readonly","readonly");
                                             
                         				}
                         				});
                                    //展示修改的Div
                                    $("#managerMenu").show();
                                }
                                //=================ztree修改结束================================
                                //=================ztree修改保存开始=============================
                                function updatedSave_() {
                                	alert(1);
                                    //修改后保存按钮不可用,防止重复提交
                                    $("#updateSave").attr("disabled",true);
                                    //获取pid值
                                    var pid = $("#pid").val();
                                    //获取节点名称
                                    var name = $("#menuName").val();
                                    //获取隐藏域中的节点id
                                    var id = $("#menuId").val();
                                    //获取节点的url
                                    var url = $("#url").val();
                                    //获取节点的频道层次展示
                                    var chCascadeName = $("#chCascadeName").val();
                                    chCascadeName=chCascadeName.substring(0, chCascadeName.lastIndexOf(' '));
                                    chCascadeName=chCascadeName+" "+name;
                                    //获取表的id
                                    var focId = $("#focId").val();
                                    //通过ajax修改节点数据
                                    $.ajax({
                                        type : 'post',
                                        url : '/api/updateSiteChannelSync',
                                        data : {
                                            "chSiteId":siteId,
                                            "chParentId":pid,
                                            "chName":name,
                                            "chId":id,
                                            "chUrl":url,
                                            "chCascadeName":chCascadeName,
                                            "focId":focId},
                                        success : function(data) {
                                            //var data = eval(data);
                                            //获取当前节点对象
                                            var currentSelectedNode = zTree.getNodeByParam("id", id, null);
                                            //给当前节点重新赋值名称
                                            currentSelectedNode.name =name;
                                            //给当前节点重新赋值url
                                            currentSelectedNode.url = url;
                                            currentSelectedNode.chCascadeName = chCascadeName;
                                            //修改页面的当前节点
                                            zTree.updateNode(currentSelectedNode);
                                            //弹框显示修改成功
                                            alert("修改成功");
                                            //展示修改的Div设置为隐藏
                                            $("#managerMenu").hide();
                                            //修改保存按钮可用
                                            $("#updateSave").attr("disabled",false);
                                        },
                                    });
                                }
                                //=================ztree修改保存结束=============================
                                //=================ztree添加开始================================
                                function addTreeNode() {
                                	//右键菜单隐藏
                                    hideRMenu();
                                    //页面显示
                                    $("#managerMenu").show();
                                    //隐藏修改后保存标志
                                    $("#updateSave").hide();
                                    //将当前结点id作为新增节点pid赋值到pid展示框并设置其为只读模式
                                    $("#pid").val(ztreeNode.id);
                                    $("#pid").attr("readonly","readonly");
                                    //将当前结点名称作为新增节点父节点名称赋值到父节点名称展示框并设置其为只读模式
                                    $("#parentName").val(ztreeNode.name);
                                    $("#parentName").attr("readonly","readonly");
                                    //将节点名称内容重置为空
                                    $("#menuName").val("");
                                    //将url框重置为空
                                    $("#url").val("");
                                    $.ajax({url:"/api/findNodeOneByChidAndChParentId?chId="+ztreeNode.id+"&chParent="+ztreeNode.pId,
                         				async:false,
                         				type:'get',
                         				dataType: 'json',
                         				success:function(data){
                         					 //console.log(data);
                         					//将频道层次展示赋值
                                             $("#chCascadeName").val(data.chCascadeName);
                                             $("#chCascadeName").attr("readonly","readonly");
                         				}
                         				});
                                    //展示新建节点保存按钮
                                    $("#menu_save").show();
                                    //隐藏修改保存按钮
                                    $("#updateSave").hide();
                                    //展示节点操作Div
                                    $("#managerMenu").show();
                                }; 
                                //=================ztree添加结束=============================
                                //=================ztree添加保存开始==========================
                                function saveMenuNode() {
                                    //获取节点pid
                                    var pid = $("#pid").val();
                                    //获取节点名称
                                    var name = $("#menuName").val();
                                    //表单验证,如果为空的话,不发送请求
                                    if(name == '') {
                                        $('#errorName').hasClass('hidden') && $('#errorName').removeClass('hidden');
                                        $("#errorName").css("color","red");
                                        $("#errorName").html("必选字段");
                                        return;
                                    }
                                    //提示字体隐藏
                                    $("#errorName").html("");
                                    //获取节点url
                                    var url = $("#url").val();
                                    if(url == '') {
                                        $('#errorUrl').hasClass('hidden') && $('#errorUrl').removeClass('hidden');
                                        $("#errorUrl").css("color","red");
                                        $("#errorUrl").html("必选字段");
                                        return;
                                    }
                                    //提示字体隐藏
                                    $("#errorUrl").html("");
                                    //获取频道层级展示
                                    var chCascadeName = $("#chCascadeName").val()+"-"+name;
                                    //通过ajax添加节点
                                    $.post("/api/addSiteChannelSync",{
                                        "chSiteId":siteId,
                                        "chParentId":pid,
                                        "chName":name,
                                        "chUrl":url,
                                        "chCascadeName":chCascadeName,
                                    },function(data){
                                        var data = eval("("+data+")");
                                        //console.log(data);
                                        //添加成功后获取节点id
                                        var id = data.id;
                                        //将节点数据拼接为一个json对象
                                        var newNode = {id:id,name:name,pId:pid,url:url};
                                        //getNodeByParam(key,value,parentNode)key:需要精确匹配的属性名称;value:需要精确匹配的属性值;
                                        //parentNode:可以指定在某个父节点下的子节点中搜索,null代表在所有的节点
                                        var currentSelectedNode = zTree.getNodeByParam("id", pid, null);
                                        if (currentSelectedNode.open || !currentSelectedNode.isParent ) {
                                            zTree.addNodes(currentSelectedNode, newNode,true);
                                        }
                                        //刷新节点
                                        zTree.updateNode(currentSelectedNode);
                                        //将添加节点名称置空
                                        $("#menuName").val("");
                                        //将添加节点url置空
                                        $("#url").val("");
                                        //提示用户添加成功
                                        alert("添加成功");
                                      //展示添加的Div设置为隐藏
                                        $("#managerMenu").hide();
                                        //添加保存按钮可用
                                        $("#menu_save").attr("disabled",false); 
                                    });
                                }
                                //=================ztree添加保存结束==========================
                                //=================ztree删除开始=============================
                                function removeTreeNode() {
                                	//右键菜单隐藏
                                	hideRMenu();
                                    //判断是否为根节点,根节点不可删
                                    if(ztreeNode.pId==0){
                                        alert("根节点不能删除");
                                        //判断是否为父节点
                                    } else if(ztreeNode.isParent){
                                        if(confirm("确认要连子节点一起删除吗?")){
                                            //获取当前节点的子节点
                                            var nodes = ztreeNode.children;
                                            //定义一个变量将当前节点的id及其子节点的id拼接为一个字符串
                                            var ids = ztreeNode.id;
                                            for (var i = 0; i < nodes.length; i++) {
                                                ids += "," + nodes[i].id;
                                            }
                                            //ajax 删除节点数据
                                            $.post(
                                                "/api/deleteBatchSiteChannelSync",
                                                        {
                                                            "chIds" : ids
                                                        }, function(data) {
                                                            //在删除成功的回调方法中调用ztree的removeNode方法:页面移除节点
                                                            zTree.removeNode(ztreeNode);
                                                                $("#managerMenu").hide();
                                                        })
                                        }
                                    }else {
                                        //既不是根节点也不是父节点
                                        if(confirm("确认要删除吗?")){
                                            var chId=ztreeNode.id;
                                            $.post(
                                                "/api/deleteSiteChannels",
                                                        {
                                                            "chId" : chId
                                                        }, function(data) {
                                                            //调用ztree的removeNode方法
                                                            zTree.removeNode(ztreeNode);
                                                                $("#managerMenu").hide();
                                                        })
                                            }
                                        }
                                }
                              //=================ztree删除结束========================== 
                              //=================ztree拖拽开始========================== 
                                function onDrop(event, treeId, treeNodes, targetNode, moveType){
                                    var id = treeNodes[0].id;//获得被拖拽的节点id
                                    var pid = targetNode.id;//获得目标id,集即将拖拽地的id,即对应的pid
                                    var name = treeNodes[0].name;
                                    var name2=targetNode.name;
                                    var focId;var url;var chCascadeName;
                                    $.ajax({url:"/api/findNodeOneByChidId?chId="+id+"&chParent="+pid,
                         				async:false,
                         				type:'get',
                         				dataType: 'json',
                         				success:function(data){
                         					 console.log(data);
                         					//获取所需要的数据
                         					 focId=data.id;
                                             url=data.chUrl;
                                             chCascadeName=data.chCascadeName+"-"+name;
                         				}
                         				});
//                                    alert("======pid====="+pid+"==name=="+name+"===name2=="+name2+"  ===chCascadeName2=="+chCascadeName+"==url=="+url+"  ==focId=="+focId);
                                    //通过ajax修改节点数据
                                    $.ajax({
                                        type : 'post',
                                        url : '/api/updateSiteChannelSync',
                                        data : {
                                            "chSiteId":siteId,
                                            "chParentId":pid,
                                            "chName":name,
                                            "chId":id,
                                            "chUrl":url,
                                            "chCascadeName":chCascadeName,
                                            "focId":focId},
                                        success : function(data) {
                                            //var data = eval(data);
                                            //获取当前节点对象
                                            var currentSelectedNode = zTree.getNodeByParam("id", id, null);
                                            //给当前节点重新赋值名称
                                            currentSelectedNode.name =name;
                                            //给当前节点重新赋值url
                                            currentSelectedNode.url = url;
                                            currentSelectedNode.chCascadeName = chCascadeName;
                                            //修改页面的当前节点
                                            zTree.updateNode(currentSelectedNode);
                                            //弹框显示修改成功
                                            alert("拖拽移动成功");
                                        },
                                    });
                                  }
                              //=================ztree删除拖拽结束========================== 
                        }
                    });
                    var window = $("#window").data("kendoWindow");
                    window.open();
                }
            },{
            	text: "导出",
            	click: function(e) {
            		var tr = $(e.target).closest("tr");
                    var siteId = this.dataItem(tr).id;
                    var siteName = this.dataItem(tr).name;
                    window.location.href="/api/uploadExcelByPoi?chSiteId="+siteId;
                    
            	}
            }],
            title: "操作",
            width: "100px"
        },{
            field: "name",
            title: "网站名称",
            width: "120px",
            filterable: false
        }, {
            field: "url",
            title: "网址",
            width: "300px",
            filterable: false
        }]
        //sortable: true
    };
    GridOption_this.dataSource = new kendo.data.DataSource(DataSourceOption_this);
    GridOption_this.dataSource.bind("error", function(e) {
        if(e.errors) {
            this.read();
        }
    });
    GridOption_this.dataSource.bind("change", function(e) {
        if(e.action == 'sync') {
            this.read();
        }
    });
    $("#div_foc_channels").kendoGrid(GridOption_this);
};


实体层展示:

<span style="font-size:18px;">package com.founder.manage.entity;

import java.io.Serializable;
import java.util.Date;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Transient;

@Table(name="foc_channels")
@Entity
public class FocChannel implements Serializable{

	private static final long serialVersionUID = -6897851155725127824L;

	@Id
    @GeneratedValue(strategy=GenerationType.AUTO)
    private Long id;
	
	private String chName;
	
	private String chUrl;
    
	private Long chId;
    
	private Integer chSiteId;
    
   	private String chCascadeName;
       
   	private Date createTime;
    
   	private Date lastUpdateTime;
    
	private Long dcId;
    
	private Integer level;
	
	private Boolean reFlag;
	
	private Long chParentId;
	
    @Transient
    private String pUrl;
    @Transient
    private Boolean open;
    @Transient
    private Boolean isParent;
    
	public String getpUrl() {
		return pUrl;
	}
	public void setpUrl(String pUrl) {
		this.pUrl = pUrl;
	}
	public Long getChParentId() {
		return chParentId;
	}
	public void setChParentId(Long chParentId) {
		this.chParentId = chParentId;
	}
	public Long getId() {
		return id;
	}
	public void setId(Long id) {
		this.id = id;
	}
	public String getChName() {
		return chName;
	}
	public void setChName(String chName) {
		this.chName = chName;
	}
	public String getChUrl() {
		return chUrl;
	}
	public void setChUrl(String chUrl) {
		this.chUrl = chUrl;
	}
	public Long getChId() {
		return chId;
	}
	public void setChId(Long chId) {
		this.chId = chId;
	}
	public Integer getChSiteId() {
		return chSiteId;
	}
	public void setChSiteId(Integer chSiteId) {
		this.chSiteId = chSiteId;
	}
	public String getChCascadeName() {
		return chCascadeName;
	}
	public void setChCascadeName(String chCascadeName) {
		this.chCascadeName = chCascadeName;
	}
	public Date getCreateTime() {
		return createTime;
	}
	public void setCreateTime(Date createTime) {
		this.createTime = createTime;
	}
	public Date getLastUpdateTime() {
		return lastUpdateTime;
	}
	public void setLastUpdateTime(Date lastUpdateTime) {
		this.lastUpdateTime = lastUpdateTime;
	}
	public Long getDcId() {
		return dcId;
	}
	public void setDcId(Long dcId) {
		this.dcId = dcId;
	}
	public Integer getLevel() {
		return level;
	}
	public void setLevel(Integer level) {
		this.level = level;
	}
	public Boolean getReFlag() {
		return reFlag;
	}
	public void setReFlag(Boolean reFlag) {
		this.reFlag = reFlag;
	}
	public Boolean getOpen() {
		return open;
	}
	public void setOpen(Boolean open) {
		this.open = open;
	}
	public Boolean getIsParent() {
		return isParent;
	}
	public void setIsParent(Boolean isParent) {
		this.isParent = isParent;
	}
    
}
</span>

vo类:

<span style="font-size:18px;">package com.founder.manage.vo;

public class Znode {
	private Long id;
	
	private Long pId;
	
	private String name;
	
	private Boolean open;

	private Boolean isParent;
	
	public Long getId() {
		return id;
	}

	public Long getpId() {
		return pId;
	}

	public String getName() {
		return name;
	}

	public Boolean getOpen() {
		return open;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public void setpId(Long pId) {
		this.pId = pId;
	}

	public void setName(String name) {
		this.name = name;
	}

	public void setOpen(Boolean open) {
		this.open = open;
	}

	public Znode withId(Long id) {
		this.id = id;
		return this;
	}

	public Znode withpId(Long pId) {
		this.pId = pId;
		return this;
	}

	public Znode withName(String name) {
		this.name = name;
		return this;
	}

	public Znode withOpen(Boolean open) {
		this.open = open;
		return this;
	}

	public Znode withIsParent(Boolean isParent) {
		this.isParent = isParent;
		return this;
	}
	
	public Boolean getIsParent() {
		return isParent;
	}

	public void setIsParent(Boolean isParent) {
		this.isParent = isParent;
	}
	
}
</span>



<span style="font-size:18px;">package com.founder.manage.vo;

public class TreeInfo {

	private String siteName;
	
	private Long chId;

	private Long id;
	
	private Long pId;
	
	private String name;
	
	private Boolean open;

	private Boolean isParent;
	
	public Long getId() {
		return id;
	}

	public Long getpId() {
		return pId;
	}

	public String getName() {
		return name;
	}

	public Boolean getOpen() {
		return open;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public void setpId(Long pId) {
		this.pId = pId;
	}

	public void setName(String name) {
		this.name = name;
	}

	public void setOpen(Boolean open) {
		this.open = open;
	}

	public TreeInfo withId(Long id) {
		this.id = id;
		return this;
	}

	public TreeInfo withpId(Long pId) {
		this.pId = pId;
		return this;
	}

	public TreeInfo withName(String name) {
		this.name = name;
		return this;
	}

	public TreeInfo withOpen(Boolean open) {
		this.open = open;
		return this;
	}

	public TreeInfo withIsParent(Boolean isParent) {
		this.isParent = isParent;
		return this;
	}
	
	public Boolean getIsParent() {
		return isParent;
	}

	public void setIsParent(Boolean isParent) {
		this.isParent = isParent;
	}
	public String getSiteName() {
		return siteName;
	}

	public Long getChId() {
		return chId;
	}

	public void setSiteName(String siteName) {
		this.siteName = siteName;
	}

	public void setChId(Long chId) {
		this.chId = chId;
	}
	
	public TreeInfo withSiteName(String siteName) {
		this.siteName = siteName;
		return this;
	}

	public TreeInfo withChId(Long chId) {
		this.chId = chId;
		return this;
	}
}
</span>


控制层展示:

<span style="font-size:18px;">package com.founder.manage.controller;

import java.util.Date;
import java.util.List;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.EmptyResultDataAccessException;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.founder.manage.entity.FocChannel;
import com.founder.manage.entity.FocWebSites;
import com.founder.manage.service.FocChannelService;
import com.founder.manage.service.FocWebSiteService;
import com.founder.manage.util.FounderSiteChannelKeyUtil;
import com.founder.manage.util.JSONUtil;
import com.founder.manage.vo.TreeInfo;
import com.founder.manage.vo.Znode;

@RestController
public class FocChannelController {

	@Autowired
	FocChannelService focChannelsService;
	@Autowired
	FocWebSiteService focWebSiteService;
	
	private final static Logger log = LoggerFactory.getLogger(FocChannelController.class);
    
	@RequestMapping("/focChannels/findB")
    public JSONObject findBFocChannels(@RequestParam(defaultValue="0") Integer page,
			@RequestParam(defaultValue="10") Integer pagesize) {
    	log.info("-----------------查询网站findAll       开始---------------");
    	JSONObject res = new JSONObject();
    	try {
    		if(page > 0) page--;
    		Pageable pageable = new PageRequest(page, pagesize);
    		Page<FocWebSites> focList = focWebSiteService.findAll(pageable);
    		JSONArray dataArr = new JSONArray();
    		for (FocWebSites foc : focList) {
    			JSONObject json = (JSONObject) JSONObject.toJSON(foc);
    			json = JSONUtil.convertNull2String(json);
    			dataArr.add(json);
			}
			res.put("data",dataArr);
			res.put("total", focList.getTotalElements());
			res.put("code", "1000");
			res.put("msg", "执行成功");
		} catch (Exception e) {
			res.put("code", "1111");
			res.put("msg", "系统内异常");
			log.error("系统内异常",e);
		}
    	log.info("-----------------查询网站findAll       结束---------------");
    	return res;
    }
    
	
	@RequestMapping(value="/api/findNodeOneByChidId",method=RequestMethod.GET)
    public FocChannel findNodeOneByChidId(@RequestParam(value="chId", required=true) Long chId,@RequestParam(value="chParent", required=true) Long chParent){
    	FocChannel foc = focChannelsService.findNodeOneByChidId(chId,chParent);
    	return foc;
    }
	
	/**
	 * 根据ztree的id及parentId来获取它的详情信息
	 * @param chId
	 * @param chParent
	 * @return
	 */
	@RequestMapping(value="/api/findNodeOneByChidAndChParentId",method=RequestMethod.GET)
    public FocChannel findNodeOneByChidAndChParentId(@RequestParam(value="chId", required=true) Long chId,@RequestParam(value="chParent", required=true) Long chParent){
    	FocChannel foc = focChannelsService.findNodeOneByChidAndChParentId(chId, chParent);
    	return foc;
    }
			
	/**
	 * 通过chSiteId与name获取对应的顶级信息
	 * @param chSiteId
	 * @param siteName
	 * @return
	 */
    @RequestMapping(value="/api/findrootid",method=RequestMethod.GET)
    public TreeInfo findRootId(@RequestParam(value="chSiteId", required=true) Integer chSiteId,@RequestParam(value="name", required=true) String siteName){
    	FocChannel foc = focChannelsService.findRootId(chSiteId, 0L);
    	TreeInfo info = new TreeInfo();
    	if(null != foc){
    		info.withSiteName(siteName).withId(foc.getChId());
    	}
    	
    	return info;
    }
    
    /**
     * 获取ztree的子集信息数据
     * @param chSiteId
     * @return
     */
    @RequestMapping(value="/api/findSiteChannelSync",method=RequestMethod.GET)
    public List<Znode> findSiteChannelSync(@RequestParam(value="chSiteId", required=true) Integer chSiteId,
    		@RequestParam(value="chParentId", required=true) Long chParentId) {
    	log.info("-----------------获取站点频道       开始---------------");
    	
    	List<Znode> findChildren = focChannelsService.findChildren(chSiteId,chParentId);
    	System.out.println(findChildren);
		return findChildren;
    }
    
    /**
     * ztree修改保存
     * @param chSiteId
     * @param chId
     * @param chParentId
     * @param chName
     * @param focId
     * @param chCascadeName
     * @param chUrl
     * @return
     */
    @RequestMapping(value="/api/updateSiteChannelSync")
    @ResponseBody
    public String updateSiteChannelSync(@RequestParam(value="chSiteId", required=true) Integer chSiteId,
    		@RequestParam(value="chId", required=true) Long chId,
    		@RequestParam(value="chParentId", required=true) Long chParentId,
    		@RequestParam(value="chName", required=true) String chName,
    		@RequestParam(value="focId", required=true) Long focId,
    		@RequestParam(value="chCascadeName", required=true) String chCascadeName,
    		@RequestParam(value="chUrl", required=true) String chUrl) {
    	FocChannel focChannels=focChannelsService.findByFocChannels_Id(focId);
    	focChannels.setChId(chId);
    	focChannels.setChSiteId(chSiteId);
    	focChannels.setChParentId(chParentId);
    	focChannels.setChName(chName);
    	focChannels.setId(focId);
    	focChannels.setChCascadeName(chCascadeName);
    	focChannels.setChUrl(chUrl);
    	focChannels.setLastUpdateTime(new Date());
    	focChannels=focChannelsService.save(focChannels);
    	JSONObject json = (JSONObject) JSONObject.toJSON(focChannels);
    	json = JSONUtil.convertNull2String(json);
    	log.info("-----------------获取站点频道       开始---------------");
    	return json.toString();
    }
    
    /**
     * ztree添加保存
     * @param chSiteId
     * @param chParentId
     * @param chName
     * @param chCascadeName
     * @param chUrl
     * @return
     */
    @RequestMapping(value="/api/addSiteChannelSync")
    @ResponseBody
    public String addSiteChannelSync(@RequestParam(value="chSiteId", required=true) Integer chSiteId,
    		@RequestParam(value="chParentId", required=true) Long chParentId,
    		@RequestParam(value="chName", required=true) String chName,
    		@RequestParam(value="chCascadeName", required=true) String chCascadeName,
    		@RequestParam(value="chUrl", required=true) String chUrl) {
    	FocChannel focChannels=new FocChannel();
    	focChannels.setChSiteId(chSiteId);
    	focChannels.setChParentId(chParentId);
    	focChannels.setChName(chName);
    	focChannels.setChCascadeName(chCascadeName);
    	focChannels.setChUrl(chUrl);
    	focChannels.setCreateTime(new Date());
    	focChannels.setLastUpdateTime(new Date());
    	int websiteName2Hash = FounderSiteChannelKeyUtil.websiteName2Hash(chUrl);
    	Integer web=websiteName2Hash;
		focChannels.setChId(Long.parseLong(web.toString()));
    	focChannels=focChannelsService.save(focChannels);
    	JSONObject json = (JSONObject) JSONObject.toJSON(focChannels);
    	json = JSONUtil.convertNull2String(json);
    	log.info("-----------------获取站点频道       开始---------------");
    	return json.toString();
    }
    
    @RequestMapping(value="/api/deleteBatchSiteChannelSync")
    @ResponseBody
    public JSONObject deleteBatchSiteChannelSync(@RequestParam(value="chIds", required=true) String chIds) {
    	log.info("-----------------批量删除ztree      开始---------------");
    	JSONObject res = new JSONObject();
    	try {
    		focChannelsService.deleteBatchSiteChannelSync(chIds);
			res.put("code", "1000");
			res.put("msg", "执行成功");
		} catch(EmptyResultDataAccessException e){
			res.put("code", "1001");
			res.put("msg", "网站不存在");
		} catch (Exception e) {
			res.put("code", "1111");
			res.put("msg", "系统内异常");
			log.error("系统内异常",e);
		}
    	log.info("-----------------批量删除ztree        结束---------------");
    	return res;
    }
    
    @RequestMapping(value="/api/deleteSiteChannels")
    @ResponseBody
    public JSONObject deleteSiteChannels(@RequestParam(value="chId", required=true) Long chId) {
    	log.info("-----------------删除ztree子节点       开始---------------");
    	JSONObject res = new JSONObject();
    	try {
    		focChannelsService.deleteSiteChannels(chId);
			res.put("code", "1000");
			res.put("msg", "执行成功");
		} catch(EmptyResultDataAccessException e){
			res.put("code", "1001");
			res.put("msg", "网站不存在");
		} catch (Exception e) {
			res.put("code", "1111");
			res.put("msg", "系统内异常");
			log.error("系统内异常",e);
		}
    	log.info("-----------------删除ztree子节点        结束---------------");
    	return res;
    }
}
</span>

service层展示:

<span style="font-size:18px;">package com.founder.manage.service;

import java.math.BigInteger;
import java.util.ArrayList;
import java.util.List;

import javax.transaction.Transactional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.founder.manage.dao.FocChannelDao;
import com.founder.manage.entity.FocChannel;
import com.founder.manage.vo.Znode;

@Transactional
@Service
public class FocChannelService extends BaseService<FocChannel>{

	@Autowired
	public void setRepository(FocChannelDao repository) {
		this.repository = repository;
	}
	@Autowired
	FocChannelDao focChannelsDao;

	public String findSiteChannelByPid(Integer chSiteId, String chName) {
		List<FocChannel> list = focChannelsDao.findSiteChannelByChSiteId(chSiteId);
		
			//new StringBuffer用来拼接字符串
			StringBuffer ztree = new StringBuffer();
			String data="";
			if(list.size()>0) {
				ztree.append("[");
				 for(Object obj : list){
					 FocChannel foc = (FocChannel) obj;
					  ztree.append("{id:" + foc.getChId()+ ",") ;
				      ztree.append("pId:" + foc.getChParentId() + ",") ;
				      FocChannel focCh=new FocChannel();
				     if(null != foc.getChParentId() && foc.getChParentId() != 0) 
				    	  focCh=focChannelsDao.findParentUrl(foc.getChParentId());
					 if(foc.getChName().equals("")){
						 ztree.append("name:\"" + chName + "\",") ;
					 }else{
						 ztree.append("name:\"" + foc.getChName() + "\",") ;
					 }
				      ztree.append("url:\""+foc.getChUrl()+"\",");
				      ztree.append("chCascadeName:\""+foc.getChCascadeName()+"\",");
				      ztree.append("pUrl:\""+focCh.getChUrl()+"\",");
				      ztree.append("focId:"+foc.getId()+",");
				      ztree.append("level:"+foc.getLevel()+",");
				      ztree.append("reFlag:"+foc.getReFlag()+",");
				      data = ztree.substring(0,ztree.lastIndexOf(",")) + "}," ;
				      ztree = new StringBuffer(data) ;
				    }
				    data = ztree.substring(0,ztree.length()-1) + "]" ;
				    System.out.println(data);
			}
				return data;
	}

	public FocChannel findByFocChannels_Id(Long focId) {
		return focChannelsDao.findByFocChannels_Id(focId);
	}

	public void deleteBatchSiteChannelSync(String chIds) {
//		String strIds = chIds.substring(1);
		String[] uids = chIds.split(",");
		List<Integer> numList=new ArrayList<Integer>();
		for (String id : uids) {
			numList.add(Integer.parseInt(id));
		}
		focChannelsDao.deleteBatchSiteChannels(numList);
	}

	public void deleteSiteChannels(Long chId) {
		focChannelsDao.deleteFocChannelsByChId(chId);
	}

	public List<Znode> findChildren(Integer chSiteId, Long chParentId) {
		List<Object[]> list = focChannelsDao.findChildren(chSiteId, chParentId);

		List<Znode> result = new ArrayList<>(list.size());
		if (null != list && list.size() > 0) {
			Znode dto = null;
			for (Object[] obj : list) {
				if (obj.length == 3) {
					dto = new Znode().withId(((BigInteger) obj[0]).longValue())
							.withName((String) obj[1]).withpId(chParentId)
							.withIsParent(null != obj[2]);
					result.add(dto);
				}
			}
		}
		return result;
	}

	public FocChannel findRootId(Integer chSiteId, Long chParentId) {
		List<FocChannel> list = focChannelsDao.findByChSiteIdAndChParentId(chSiteId, chParentId);
		if (null != list && list.size() > 0) {
			return list.get(0);
		}
		
		return null;
	}

	public FocChannel findNodeOneByChidAndChParentId(Long chId, Long chParent) {
		FocChannel foc = focChannelsDao.findNodeOneByChidAndChParentId(chId,chParent);
		FocChannel findParentUrl = focChannelsDao.findParentUrl(chParent);
		foc.setpUrl(findParentUrl.getChUrl());
		return foc;
	}

	public FocChannel findNodeOneByChidId(Long chId, Long chParent) {
		FocChannel foc=focChannelsDao.findNodeOneByChidId(chId);
		FocChannel focF=focChannelsDao.findNodeOneByChidId(chParent);
		foc.setChCascadeName(focF.getChCascadeName());
		return foc;
	}

}
</span>

dao层展示:

<span style="font-size:18px;">package com.founder.manage.dao;

import java.util.List;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.CrudRepository;
import org.springframework.data.repository.query.Param;

import com.founder.manage.entity.FocChannel;
import com.founder.manage.entity.FocWebSites;

public interface FocChannelDao extends CrudRepository<FocChannel, Integer>{

//	@Query("from FocChannels where chParentId=:chId")
//	List<FocChannels> findSiteChannelByChSiteId(@Param("chId") Integer chId);
//	
	@Query("from FocChannel where chSiteId=:chSiteId order by id")
	List<FocChannel> findSiteChannelByChSiteId(@Param("chSiteId") Integer chSiteId);

	@Query("from FocChannel where id=:id")
	FocChannel findByFocChannels_Id(@Param("id") Long focId);

	@Modifying
	@Query("delete  from FocChannel where chId in (?1)")
	void deleteBatchSiteChannels(List<Integer>  numList);

	@Modifying
	@Query(value = "delete from foc_channels where ch_id = ?1 ",nativeQuery = true)
	void deleteFocChannelsByChId(Long chId);

	Page<FocWebSites> findAll(Pageable pageable);

	@Query("from FocChannel where chId=:chId")
	FocChannel findParentUrl(@Param("chId")Long chId);

	
	@Query(value = "SELECT p.ch_id,p.ch_name,c.ch_id  ch " +
			"FROM " +
			"foc_channels p " +
			"LEFT JOIN foc_channels c ON c.ch_parent_id = p.ch_id " +
			"WHERE p.ch_site_id =:chSiteId AND p.ch_parent_id = :chParentId "+
			"GROUP BY p.ch_id",
			nativeQuery=true)
	List<Object[]> findChildren(@Param("chSiteId") Integer  chSiteId, @Param("chParentId") Long chParentId);


	List<FocChannel> findByChSiteIdAndChParentId(Integer chSiteId, Long chParentId);

	@Query(value="SELECT * from foc_channels f where f.ch_id=:chId and f.ch_parent_id=:chParent",nativeQuery=true)
	FocChannel findNodeOneByChidAndChParentId(@Param("chId")Long chId, @Param("chParent")Long chParent);

	@Query(value="SELECT * from foc_channels f where f.ch_id=:chId",nativeQuery=true)
	FocChannel findNodeOneByChidId(@Param("chId")Long chId);

}
</span>

2016-10-19修改

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 = [];
        // }
    	//console.log(response);
        var array = response.data || [];
        response.data = array;
        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;
                    var siteName = this.dataItem(tr).name;
                    $("#window").kendoWindow({
                        resizable: false,
                        draggable: false,
                        modal: true,
                        width: "750px",
                        position: {
                            top: "15%",
                            left: "25%"
                        },
                        title: siteName,
                        content: "js/pindao2.html",
                        close: function(e) {
                            $("#window").off("click", "**");
                            $("#window").parent().remove();
                            $("#main").append('<div id="window" style="display: none;"></div>');
                        },
                        animation: {
                            open: {
                                duration: 100
                            }
                        },
                        activate: function() {
                          //ztree
                            //全局参数
                            var zTree;var ztreeNode;
                            var rMenu = $("#rMenu");
                            
                        	var setting = {
                        			async: {
                        				enable: true,
                        				type: "get",
                        				url: getUrl
                        			},
//                        			check: {//复选框样式
//                        				enable: true
//                        			},
                        			data: {
                        				keep: {
                                            leaf: true,//属性配置  leaf: true, 表示叶子节点不能变成根节点。parent: true 表示 根节点不能变成叶子节点
                                            parent: true
                                            },
                        				simpleData: {
                        					enable: true
                        				}
                        			},
                        			edit: {
                                        drag:{
                                            isCopy: false,
                                            isMove: true
                                            },
                                        enable: true,//设置是否处于编辑状态
                                        showRemoveBtn: false,
                                        showRenameBtn: false
                                    },
                        			view: {
                                        dblClickExpand: false,
                                        showLine: false,
                                        expandSpeed: ""
                                    },
                        			callback: {
                        				beforeExpand: beforeExpand,
                        				onAsyncSuccess: onAsyncSuccess,
                        				onAsyncError: onAsyncError,
                                         onClick : zTreeOnClick,
                                         onDrop: onDrop,
                                         onRightClick: function(event, treeId, treeNode){
                                             //判断是否为点击事件;如果是节点点击事件,给全局变量ztreeNode赋值
                                            if (treeNode) {
                                                ztreeNode = treeNode;
                                            }
                                            if(ztreeNode.pId==0){
                                                alert("根节点不能右键操作!");
                                                //判断是否为父节点
                                            }else {
                                            	if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                                                    zTree.cancelSelectedNode();
                                                    showRMenu("root", event.clientX, event.clientY);
                                                } else if (treeNode && !treeNode.noR) {
                                                    //zTree.selectNode(treeNode);
                                                    //console.log(event);
                                                    var X=event.pageX-340;
                                                    var Y=event.pageY-130;
                                                   // console.log("x=="+X+"    y=="+ Y);
                                                    showRMenu("node", X, Y);
                                                }
                                            }
                                        },
                                    }
                        		};

                        	//加载跟目标
                        		var zNodes;
                        		$.ajax({url:"/api/findrootid?chSiteId="+siteId+"&name="+siteName,
                        				async:false,
                        				type:'get',
                        				dataType: 'json',
                        				success:function(data){
                        					var arr=[];
                        					for(var i=0;i<data.length;i++) {
                        						//data[i].isParent=true;
                        						arr.push(data[i]);
                        					}
//                        					data.pId=0;
//                        					data.openFlag=true;
//                        					data.isParent=true;
//                        					data.open=true;
//                        					data.name=data.siteName;
//                        					arr.push(data);
                        					zNodes = arr;
                        				}
                        				});
                        		
                        		

                        		var log, className = "dark",
                        		startTime = 0, endTime = 0, perCount = 100, perTime = 100;
                        		//获取异步加载子节点的路径
                        		function getUrl(treeId, treeNode) {
                        			//console.log(treeNode);
                        			var url="/api/findSiteChannelSync?chSiteId="+siteId+"&chParentId="+treeNode.id;
                        			return url;
                        		}
                        		
                        		//新建方法beforeExpand,为什么是beforeExpand而不是onExpand呢,是因为在这个树中,预加载比加载完成后显示效果好。
                        		function beforeExpand(treeId, treeNode) {
                        			if (!treeNode.isAjaxing) {
                        				startTime = new Date();
                        				treeNode.times = 1;
                        				ajaxGetNodes(treeNode, "refresh");
                        				return true;
                        			} else {
                        				alert("zTree 正在下载数据中,请稍后展开节点。。。");
                        				return false;
                        			}
                        		}
                        		//成功回调函数
                        		function onAsyncSuccess(event, treeId, treeNode, msg) {
                        			if (!msg || msg.length == 0) {
                        				return;
                        			}
                        			var zTree = $.fn.zTree.getZTreeObj("zTreeChannels"),
                        			totalCount = treeNode.count;
                        			if (treeNode.children.length < totalCount) {
                        				setTimeout(function() {ajaxGetNodes(treeNode);}, perTime);
                        			} else {
                        				treeNode.icon = "";
                        				zTree.updateNode(treeNode);
                        				zTree.selectNode(treeNode.children[0]);
                        				endTime = new Date();
                        				var usedTime = (endTime.getTime() - startTime.getTime())/1000;
                        				className = (className === "dark" ? "":"dark");
                        				showLog("[ "+getTime()+" ]  treeNode:" + treeNode.name );
                        				showLog("加载完毕,共进行 "+ (treeNode.times-1) +" 次异步加载, 耗时:"+ usedTime + " 秒");
                        			}
                        		}
                        		//失败回调函数
                        		function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                        			zTree = $.fn.zTree.getZTreeObj("zTreeChannels");
                        			alert("异步获取数据出现异常。");
                        			treeNode.icon = "";
                        			zTree.updateNode(treeNode);
                        		}
                        		//加载图片
                        		function ajaxGetNodes(treeNode, reloadType) {
                        			 zTree = $.fn.zTree.getZTreeObj("zTreeChannels");
                        			if (reloadType == "refresh") {
                        				treeNode.icon = "js/ztree/css/zTreeStyle/img/loading.gif";
                        				zTree.updateNode(treeNode);
                        			}
                        			zTree.reAsyncChildNodes(treeNode, reloadType, true);
                        		}
                        		function showLog(str) {
                        			if (!log) log = $("#log");
                        			log.append("<li class='"+className+"'>"+str+"</li>");
                        			if(log.children("li").length > 4) {
                        				log.get(0).removeChild(log.children("li")[0]);
                        			}
                        		}
                        		function getTime() {
                        			var now= new Date(),
                        			h=now.getHours(),
                        			m=now.getMinutes(),
                        			s=now.getSeconds(),
                        			ms=now.getMilliseconds();
                        			return (h+":"+m+":"+s+ " " +ms);
                        		}
                        		
                                //=================ztree点击事件开始=========================================
                                     function zTreeOnClick(event, treeId, treeNode) {
                                     	if (treeNode) {
                                             ztreeNode = treeNode;
                                         }
                                      // console.log(ztreeNode.id + ", " + ztreeNode.pId);
                                         $.ajax({url:"/api/findNodeOneByChidAndChParentId?chId="+ztreeNode.id+"&chParent="+ztreeNode.pId,
                             				async:false,
                             				type:'get',
                             				dataType: 'json',
                             				success:function(data){
                             					// console.log(data);
                             					 $("#managerMenu").hide();
                                                 $("#list_div").show();
                                                 $("#td_name").val(ztreeNode.name);
                                                 var chUrl=data.chUrl;
                                                 if(chUrl.length>40) {
                                                	 chUrl=chUrl.substr(0,40); 
                                                 }
                                                 var pUrl=data.pUrl;
                                                 if(pUrl.length>40) {
                                                	 pUrl=pUrl.substr(0,40); 
                                                 }
                                                 $("#td_url").html(chUrl);
                                                 $("#td_chName").val(data.chCascadeName);
                                                 $('#aUrl').attr('href',data.chUrl);
                                                 $("#td_FUrl").html(pUrl);
                                                 $('#aFUrl').attr('href',data.pUrl);
                             				}
                             				});
                                     };
                                     //=================ztree点击事件结束=========================================
                                     //=================ztree右键菜单开始=========================================
                                     function showRMenu(type, x, y) {
                                         $("#rMenu ul").show();
                                         if (type=="root") {
                                               $("#m_add").hide();
                                               $("#m_rename").hide();
                                               $("#m_del").hide();
                                           } else {
                                               $("#m_add").show();
                                               $("#m_rename").show();
                                               $("#m_del").show();
                                       }
                                         rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
                                         $("body").bind("mousedown", onBodyMouseDown);
                                     }
                                     function hideRMenu() {
                                         if (rMenu) rMenu.css({"visibility": "hidden"});
                                         $("body").unbind("mousedown", onBodyMouseDown);
                                     }
                                     function onBodyMouseDown(event){
                                         if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
                                             rMenu.css({"visibility" : "hidden"});
                                         }
                                     }
                                 //=================ztree右键菜单结束=========================================
                                //=================ztree页面加载开始及各个点击事件================================
                        		$(document).ready(function(){
                        			//初始化ztree树
                        			$.fn.zTree.init($("#zTreeChannels"), setting, zNodes);
                        			zTree = $.fn.zTree.getZTreeObj("zTreeChannels");
                        			//鼠标点击事件不在节点上时隐藏右键菜单  
                        			hideRMenu();
                        			//信息展示页面隐藏
                                	$("#list_div").hide();
                                    //新增
                                    $("#m_add").on("click",function(){
                                        addTreeNode();
                                    });
                                    //添加保存
                                    $("#menu_save").on("click",function(){
                                    	saveMenuNode();
                                    });
                                    //重命名
                                    $("#m_rename").on("click",function(){
                                        updated();
                                    });
                                  //修改保存
                                    $("#updateSave").on("click",function(){
                                    	updatedSave_();
                                    });
                                    //删除
                                    $("#m_del").on("click",function(){
                                        removeTreeNode();
                                    });
                        		});
                                //=================ztree修改开始================================
                                function updated() {
                                	//右键菜单隐藏
                                	hideRMenu();
                                    //展示修改保存按钮
                                    $("#updateSave").show();
                                    //添加节点提交按钮隐藏
                                    $("#menu_save").hide();
                                    //判断是否为根节点
                                    if (ztreeNode.pId == 0) {
                                        //如果为根节点隐藏父节点名称展示行
                                        $("#pidNametr").hide();
                                    } else {
                                        //获取其父节点
                                        var pnode = ztreeNode.getParentNode();
                                        //展示其父节名称框
                                        $("#pidNametr").show();
                                        //给父节点名称文本框赋值并设置为只读模式
                                        $("#parentName").val(pnode.name);
                                        $("#parentName").attr("readonly","readonly");
                                    }
                                    //给父节点id长石矿赋值并设置为只读模式
                                    $("#pid").val(ztreeNode.pId);
                                    $("#pid").attr("readonly","readonly");
                                    //为节点名称框赋值
                                    $("#menuName").val(ztreeNode.name);
                                    $.ajax({url:"/api/findNodeOneByChidAndChParentId?chId="+ztreeNode.id+"&chParent="+ztreeNode.pId,
                         				async:false,
                         				type:'get',
                         				dataType: 'json',
                         				success:function(data){
                         					// console.log(data);
                                             //为节点url框赋值
                                             $("#url").val(data.chUrl);
                                             //设置隐藏域节点id
                                             $("#menuId").val(ztreeNode.id);
                                             $("#focId").val(data.id);
                                             $("#chCascadeName").val(data.chCascadeName);
                                             $("#chCascadeName").attr("readonly","readonly");
                                             
                         				}
                         				});
                                    //展示修改的Div
                                    $("#managerMenu").show();
                                }
                                //=================ztree修改结束================================
                                //=================ztree修改保存开始=============================
                                function updatedSave_() {
                                	alert(1);
                                    //修改后保存按钮不可用,防止重复提交
                                    $("#updateSave").attr("disabled",true);
                                    //获取pid值
                                    var pid = $("#pid").val();
                                    //获取节点名称
                                    var name = $("#menuName").val();
                                    //获取隐藏域中的节点id
                                    var id = $("#menuId").val();
                                    //获取节点的url
                                    var url = $("#url").val();
                                    //获取节点的频道层次展示
                                    var chCascadeName = $("#chCascadeName").val();
                                    chCascadeName=chCascadeName.substring(0, chCascadeName.lastIndexOf(' '));
                                    chCascadeName=chCascadeName+" "+name;
                                    //获取表的id
                                    var focId = $("#focId").val();
                                    //通过ajax修改节点数据
                                    $.ajax({
                                        type : 'post',
                                        url : '/api/updateSiteChannelSync',
                                        data : {
                                            "chSiteId":siteId,
                                            "chParentId":pid,
                                            "chName":name,
                                            "chId":id,
                                            "chUrl":url,
                                            "chCascadeName":chCascadeName,
                                            "focId":focId},
                                        success : function(data) {
                                            //var data = eval(data);
                                            //获取当前节点对象
                                            var currentSelectedNode = zTree.getNodeByParam("id", id, null);
                                            //给当前节点重新赋值名称
                                            currentSelectedNode.name =name;
                                            //给当前节点重新赋值url
                                            currentSelectedNode.url = url;
                                            currentSelectedNode.chCascadeName = chCascadeName;
                                            //修改页面的当前节点
                                            zTree.updateNode(currentSelectedNode);
                                            //弹框显示修改成功
                                            alert("修改成功");
                                            //展示修改的Div设置为隐藏
                                            $("#managerMenu").hide();
                                            //修改保存按钮可用
                                            $("#updateSave").attr("disabled",false);
                                        },
                                    });
                                }
                                //=================ztree修改保存结束=============================
                                //=================ztree添加开始================================
                                function addTreeNode() {
                                	//右键菜单隐藏
                                    hideRMenu();
                                    //页面显示
                                    $("#managerMenu").show();
                                    //隐藏修改后保存标志
                                    $("#updateSave").hide();
                                    //将当前结点id作为新增节点pid赋值到pid展示框并设置其为只读模式
                                    $("#pid").val(ztreeNode.id);
                                    $("#pid").attr("readonly","readonly");
                                    //将当前结点名称作为新增节点父节点名称赋值到父节点名称展示框并设置其为只读模式
                                    $("#parentName").val(ztreeNode.name);
                                    $("#parentName").attr("readonly","readonly");
                                    //将节点名称内容重置为空
                                    $("#menuName").val("");
                                    //将url框重置为空
                                    $("#url").val("");
                                    $.ajax({url:"/api/findNodeOneByChidAndChParentId?chId="+ztreeNode.id+"&chParent="+ztreeNode.pId,
                         				async:false,
                         				type:'get',
                         				dataType: 'json',
                         				success:function(data){
                         					 //console.log(data);
                         					//将频道层次展示赋值
                                             $("#chCascadeName").val(data.chCascadeName);
                                             $("#chCascadeName").attr("readonly","readonly");
                         				}
                         				});
                                    //展示新建节点保存按钮
                                    $("#menu_save").show();
                                    //隐藏修改保存按钮
                                    $("#updateSave").hide();
                                    //展示节点操作Div
                                    $("#managerMenu").show();
                                }; 
                                //=================ztree添加结束=============================
                                //=================ztree添加保存开始==========================
                                function saveMenuNode() {
                                    //获取节点pid
                                    var pid = $("#pid").val();
                                    //获取节点名称
                                    var name = $("#menuName").val();
                                    //表单验证,如果为空的话,不发送请求
                                    if(name == '') {
                                        $('#errorName').hasClass('hidden') && $('#errorName').removeClass('hidden');
                                        $("#errorName").css("color","red");
                                        $("#errorName").html("必选字段");
                                        return;
                                    }
                                    //提示字体隐藏
                                    $("#errorName").html("");
                                    //获取节点url
                                    var url = $("#url").val();
                                    if(url == '') {
                                        $('#errorUrl').hasClass('hidden') && $('#errorUrl').removeClass('hidden');
                                        $("#errorUrl").css("color","red");
                                        $("#errorUrl").html("必选字段");
                                        return;
                                    }
                                    //提示字体隐藏
                                    $("#errorUrl").html("");
                                    //获取频道层级展示
                                    var chCascadeName = $("#chCascadeName").val()+"-"+name;
                                    //通过ajax添加节点
                                    $.post("/api/addSiteChannelSync",{
                                        "chSiteId":siteId,
                                        "chParentId":pid,
                                        "chName":name,
                                        "chUrl":url,
                                        "chCascadeName":chCascadeName,
                                    },function(data){
                                        var data = eval("("+data+")");
                                        //console.log(data);
                                        //添加成功后获取节点id
                                        var id = data.id;
                                        //将节点数据拼接为一个json对象
                                        var newNode = {id:id,name:name,pId:pid,url:url};
                                        //getNodeByParam(key,value,parentNode)key:需要精确匹配的属性名称;value:需要精确匹配的属性值;
                                        //parentNode:可以指定在某个父节点下的子节点中搜索,null代表在所有的节点
                                        var currentSelectedNode = zTree.getNodeByParam("id", pid, null);
                                        if (currentSelectedNode.open || !currentSelectedNode.isParent ) {
                                            zTree.addNodes(currentSelectedNode, newNode,true);
                                        }
                                        //刷新节点
                                        zTree.updateNode(currentSelectedNode);
                                        //将添加节点名称置空
                                        $("#menuName").val("");
                                        //将添加节点url置空
                                        $("#url").val("");
                                        //提示用户添加成功
                                        alert("添加成功");
                                      //展示添加的Div设置为隐藏
                                        $("#managerMenu").hide();
                                        //添加保存按钮可用
                                        $("#menu_save").attr("disabled",false); 
                                    });
                                }
                                //=================ztree添加保存结束==========================
                                //=================ztree删除开始=============================
                                function removeTreeNode() {
                                	//右键菜单隐藏
                                	hideRMenu();
                                    //判断是否为根节点,根节点不可删
                                    if(ztreeNode.pId==0){
                                        alert("根节点不能删除");
                                        //判断是否为父节点
                                    } else if(ztreeNode.isParent){
                                        if(confirm("确认要连子节点一起删除吗?")){
                                            //获取当前节点的子节点
                                            var nodes = ztreeNode.children;
                                            //定义一个变量将当前节点的id及其子节点的id拼接为一个字符串
                                            var ids = ztreeNode.id;
                                            for (var i = 0; i < nodes.length; i++) {
                                                ids += "," + nodes[i].id;
                                            }
                                            //ajax 删除节点数据
                                            $.post(
                                                "/api/deleteBatchSiteChannelSync",
                                                        {
                                                            "chIds" : ids
                                                        }, function(data) {
                                                            //在删除成功的回调方法中调用ztree的removeNode方法:页面移除节点
                                                            zTree.removeNode(ztreeNode);
                                                                $("#managerMenu").hide();
                                                        })
                                        }
                                    }else {
                                        //既不是根节点也不是父节点
                                        if(confirm("确认要删除吗?")){
                                            var chId=ztreeNode.id;
                                            $.post(
                                                "/api/deleteSiteChannels",
                                                        {
                                                            "chId" : chId
                                                        }, function(data) {
                                                            //调用ztree的removeNode方法
                                                            zTree.removeNode(ztreeNode);
                                                                $("#managerMenu").hide();
                                                        })
                                            }
                                        }
                                }
                              //=================ztree删除结束========================== 
                              //=================ztree拖拽开始========================== 
                                function onDrop(event, treeId, treeNodes, targetNode, moveType){
                                    var id = treeNodes[0].id;//获得被拖拽的节点id
                                    var pid = targetNode.id;//获得目标id,集即将拖拽地的id,即对应的pid
                                    var name = treeNodes[0].name;
                                    var name2=targetNode.name;
                                    var focId;var url;var chCascadeName;
                                    $.ajax({url:"/api/findNodeOneByChidId?chId="+id+"&chParent="+pid,
                         				async:false,
                         				type:'get',
                         				dataType: 'json',
                         				success:function(data){
                         					 console.log(data);
                         					//获取所需要的数据
                         					 focId=data.id;
                                             url=data.chUrl;
                                             chCascadeName=data.chCascadeName+"-"+name;
                         				}
                         				});
//                                    alert("======pid====="+pid+"==name=="+name+"===name2=="+name2+"  ===chCascadeName2=="+chCascadeName+"==url=="+url+"  ==focId=="+focId);
                                    //通过ajax修改节点数据
                                    $.ajax({
                                        type : 'post',
                                        url : '/api/updateSiteChannelSync',
                                        data : {
                                            "chSiteId":siteId,
                                            "chParentId":pid,
                                            "chName":name,
                                            "chId":id,
                                            "chUrl":url,
                                            "chCascadeName":chCascadeName,
                                            "focId":focId},
                                        success : function(data) {
                                            //var data = eval(data);
                                            //获取当前节点对象
                                            var currentSelectedNode = zTree.getNodeByParam("id", id, null);
                                            //给当前节点重新赋值名称
                                            currentSelectedNode.name =name;
                                            //给当前节点重新赋值url
                                            currentSelectedNode.url = url;
                                            currentSelectedNode.chCascadeName = chCascadeName;
                                            //修改页面的当前节点
                                            zTree.updateNode(currentSelectedNode);
                                            //弹框显示修改成功
                                            alert("拖拽移动成功");
                                        },
                                    });
                                  }
                              //=================ztree删除拖拽结束========================== 
                        }
                    });
                   // $("#window").kendoWindow2({})
                    var window = $("#window").data("kendoWindow");
                    window.open();
//                    var window2 = $("#window").data("kendoWindow2");
//                    window2.open();
                }
            },{
            	text: "导出",
            	click: function(e) {
            		var tr = $(e.target).closest("tr");
                    var siteId = this.dataItem(tr).id;
                    var siteName = this.dataItem(tr).name;
                    window.location.href="/api/uploadExcelByPoi?chSiteId="+siteId;
                    
            	}
            }],
            title: "操作",
            width: "100px"
        },{
            field: "name",
            title: "网站名称",
            width: "120px",
            filterable: false
        }, {
            field: "url",
            title: "网址",
            width: "300px",
            filterable: false
        }]
        //sortable: true
    };
    GridOption_this.dataSource = new kendo.data.DataSource(DataSourceOption_this);
    GridOption_this.dataSource.bind("error", function(e) {
        if(e.errors) {
            this.read();
        }
    });
    GridOption_this.dataSource.bind("change", function(e) {
        if(e.action == 'sync') {
            this.read();
        }
    });
    $("#div_foc_channels").kendoGrid(GridOption_this);
};
controller:

package com.founder.manage.controller;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang.RandomStringUtils;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFPalette;
import org.apache.poi.hssf.util.HSSFColor;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.CellStyle;
import org.apache.poi.ss.usermodel.CreationHelper;
import org.apache.poi.ss.usermodel.Font;
import org.apache.poi.ss.usermodel.IndexedColors;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.xssf.streaming.SXSSFWorkbook;
import org.apache.poi.xssf.usermodel.XSSFColor;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.EmptyResultDataAccessException;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.founder.manage.entity.FocChannel;
import com.founder.manage.entity.FocWebSites;
import com.founder.manage.service.FocChannelService;
import com.founder.manage.service.FocWebSiteService;
import com.founder.manage.util.FileUtil;
import com.founder.manage.util.FounderSiteChannelKeyUtil;
import com.founder.manage.util.JSONUtil;
import com.founder.manage.vo.TreeInfo;
import com.founder.manage.vo.Znode;

@RestController
public class FocChannelController {

	@Autowired
	FocChannelService focChannelsService;
	@Autowired
	FocWebSiteService focWebSiteService;
	
	private final static Logger log = LoggerFactory.getLogger(FocChannelController.class);
    
	@RequestMapping("/focChannels/findB")
    public JSONObject findBFocChannels(@RequestParam(defaultValue="0") Integer page,
			@RequestParam(defaultValue="10") Integer pagesize) {
    	log.info("-----------------查询网站findAll       开始---------------");
    	JSONObject res = new JSONObject();
    	try {
    		if(page > 0) page--;
    		Pageable pageable = new PageRequest(page, pagesize);
    		Page<FocWebSites> focList = focWebSiteService.findAll(pageable);
    		JSONArray dataArr = new JSONArray();
    		for (FocWebSites foc : focList) {
    			JSONObject json = (JSONObject) JSONObject.toJSON(foc);
    			json = JSONUtil.convertNull2String(json);
    			dataArr.add(json);
			}
			res.put("data",dataArr);
			res.put("total", focList.getTotalElements());
			res.put("code", "1000");
			res.put("msg", "执行成功");
		} catch (Exception e) {
			res.put("code", "1111");
			res.put("msg", "系统内异常");
			log.error("系统内异常",e);
		}
    	log.info("-----------------查询网站findAll       结束---------------");
    	return res;
    }
    
	@RequestMapping(value="/api/uploadExcelByPoi",method=RequestMethod.GET)
    public void uploadExcelByPoi(@RequestParam(value="chSiteId", required=true) Integer chSiteId,HttpServletRequest request,HttpServletResponse response){
		//查询需要的集合
    	List<FocChannel> list = focChannelsService.uploadExcelByPoi(chSiteId);
    	 //3.创建workbook  
    	SXSSFWorkbook workBook =new SXSSFWorkbook();
        //根据workBook创建sheet  
        Sheet sheet = workBook.createSheet("站点频道展示");
        //根据sheet创建行  
        Row rowHead = sheet.createRow(0);  
        //创建excel的头部标题行,及标题行的样式的设置
        createTitleCell(workBook,rowHead,sheet); 
        //创建主题内容
       buildMainbody(list, workBook, sheet);
       //导出Excel
     	downLoadExcel(request, response, workBook);
       
    }

	private void downLoadExcel(HttpServletRequest request,
			HttpServletResponse response, SXSSFWorkbook workBook) {
		SimpleDateFormat sim=new SimpleDateFormat("yyyyMMddhhmmss");
     	String strDate = sim.format(new Date());
     	//随机数
     	RandomStringUtils randomStringUtils=new RandomStringUtils();
     	//生成指定长度的字母和数字的随机组合字符串
     	String randomStr = randomStringUtils.randomAlphanumeric(5);
   		String xlsName=	strDate+randomStr+"站点频道信息表.xls";
   		FileUtil.downloadXLSFile(request, response, workBook, xlsName);
	}
	
	private void buildMainbody(List<FocChannel> list, SXSSFWorkbook workBook,
			Sheet sheet) {
		for (int i = 0; i < list.size(); i++) {
				buildMainBodyAandMainBodyStyle(list, workBook, sheet, i);
		   }
				
	}

	private void buildMainBodyAandMainBodyStyle(List<FocChannel> list,
			SXSSFWorkbook workBook, Sheet sheet, int i) {
		 CreationHelper createHelper = workBook.getCreationHelper();  
	     CellStyle cellStyle = workBook.createCellStyle();  
	     cellStyle.setDataFormat(createHelper.createDataFormat().getFormat("yyyy-MM-dd"));  
		
		Row rowBody = sheet.createRow(i+1);
		//创建列
		FocChannel foc = list.get(i);
		Cell idCell= rowBody.createCell(0);
		idCell.setCellValue(i+1);
		Cell timeCell = rowBody.createCell(1);
		SimpleDateFormat sim=new SimpleDateFormat("yyyy-MM-dd");
		timeCell.setCellValue(sim.format(new Date()));
		Cell inspectCell = rowBody.createCell(2);
		inspectCell.setCellValue("新增");
		Cell websiteCell= rowBody.createCell(3);
		websiteCell.setCellValue("网站");
		Cell webSiteNameCell= rowBody.createCell(4);
		webSiteNameCell.setCellValue(foc.getChCascadeName());
		Cell accountCell = rowBody.createCell(5);
		accountCell.setCellValue("频道");
		Cell urlCell= rowBody.createCell(6);
		urlCell.setCellValue(foc.getChUrl());
		Cell newUrlCell=rowBody.createCell(7);
        newUrlCell.setCellValue("");
        Cell causeCell=rowBody.createCell(8);
        causeCell.setCellValue("");
		CellStyle fontStyle = bulidMainFontStyleHead(workBook);
		idCell.setCellStyle(fontStyle);
		//timeCell.setCellStyle(cellStyle);
		timeCell.setCellStyle(fontStyle);
		inspectCell.setCellStyle(fontStyle);
		websiteCell.setCellStyle(fontStyle);
		webSiteNameCell.setCellStyle(fontStyle);
		accountCell.setCellStyle(fontStyle);
		urlCell.setCellStyle(fontStyle);
		newUrlCell.setCellStyle(fontStyle);
		causeCell.setCellStyle(fontStyle);
	}

	/**
	 * 创建excel的头部标题行
	 * @param rowHead
	 * @param sheet 
	 */
	private void createTitleCell(SXSSFWorkbook workBook,Row rowHead, Sheet sheet) {
		//根据row创建cll  
        Cell idCell = rowHead.createCell(0);  
        idCell.setCellValue("序号");  
        Cell timeCell = rowHead.createCell(1);  
        timeCell.setCellValue("反馈时间");  
        Cell inspectCell = rowHead.createCell(2);  
        inspectCell.setCellValue("新增/核查");  
        Cell websiteCell = rowHead.createCell(3);  
        websiteCell.setCellValue("网站/论坛");  
        Cell webSiteNameCell = rowHead.createCell(4);  
        webSiteNameCell.setCellValue("名称");  
        Cell accountCell = rowHead.createCell(5);  
        accountCell.setCellValue("频道/账号"); 
        Cell urlCell = rowHead.createCell(6);  
        urlCell.setCellValue("频道链接");
        Cell newUrlCell=rowHead.createCell(7);
        newUrlCell.setCellValue("涉及新闻链接");
        Cell causeCell=rowHead.createCell(8);
        causeCell.setCellValue("核查原因");
        CellStyle buildStyleTitle = bulidFontStyleHead(workBook);
        buildStyleTitle.setWrapText(true);//设置自动换行
        idCell.setCellStyle(buildStyleTitle);
        timeCell.setCellStyle(buildStyleTitle);
        inspectCell.setCellStyle(buildStyleTitle);
        websiteCell.setCellStyle(buildStyleTitle);
        accountCell.setCellStyle(buildStyleTitle);
        urlCell.setCellStyle(buildStyleTitle);
        webSiteNameCell.setCellStyle(buildStyleTitle);
        causeCell.setCellStyle(buildStyleTitle);
        newUrlCell.setCellStyle(buildStyleTitle);
      //设置列宽(给时间的单元格的宽度给大点,防止时间显示格式错误!)  
        sheet.setColumnWidth(0, 20*256);  
        sheet.setColumnWidth(1, 20*300);  
        sheet.setColumnWidth(2, 20*256);  
        sheet.setColumnWidth(3, 20*256);  
        sheet.setColumnWidth(4, 20*256);  
        sheet.setColumnWidth(5, 20*256);  
        sheet.setColumnWidth(6, 20*500);
        sheet.setColumnWidth(7, 20*400); 
        sheet.setColumnWidth(8, 20*400); 
        
	}
	
	private CellStyle bulidMainFontStyleHead(SXSSFWorkbook workBook) {
		//设置样式
		CellStyle style = workBook.createCellStyle();
		Font font  = workBook.createFont(); 
		font.setFontHeightInPoints((short) 11);//字号       
		//font.setBoldweight(HSSFFont.BOLDWEIGHT_BOLD);//加粗   
		//font.setColor(HSSFColor.RED.index);//设置字体颜色
		font.setFontName("微软雅黑"); // 将“黑体”字体应用到当前单元格上
		style.setFont(font);      
		style.setAlignment(HSSFCellStyle.ALIGN_CENTER);//内容左右居中    	
		style.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);//内容上下居中
		return style;
	}
	
	private CellStyle bulidFontStyleHead(SXSSFWorkbook workBook) {
		//设置样式
		Font font  = workBook.createFont(); 
		font.setFontHeightInPoints((short) 11);//字号       
		font.setBoldweight(Font.BOLDWEIGHT_BOLD);//加粗   
		//font.setColor(HSSFColor.RED.index);//设置字体颜色
		font.setFontName("黑体"); // 将“黑体”字体应用到当前单元格上
		CellStyle style = workBook.createCellStyle();
		style.setFillForegroundColor(IndexedColors.GREY_40_PERCENT.getIndex());//北京颜色
		style.setFillPattern(CellStyle.SOLID_FOREGROUND);
//		style.setFillBackgroundColor(HSSFColor.GREY_40_PERCENT.index);
		style.setFont(font);      
		style.setAlignment(HSSFCellStyle.ALIGN_CENTER);//内容左右居中    	
		style.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);//内容上下居中
		return style;
	}
	
	@RequestMapping(value="/api/findNodeOneByChidId",method=RequestMethod.GET)
    public FocChannel findNodeOneByChidId(@RequestParam(value="chId", required=true) Long chId,@RequestParam(value="chParent", required=true) Long chParent){
    	FocChannel foc = focChannelsService.findNodeOneByChidId(chId,chParent);
    	return foc;
    }
	
	/**
	 * 根据ztree的id及parentId来获取它的详情信息
	 * @param chId
	 * @param chParent
	 * @return
	 */
	@RequestMapping(value="/api/findNodeOneByChidAndChParentId",method=RequestMethod.GET)
    public FocChannel findNodeOneByChidAndChParentId(@RequestParam(value="chId", required=true) Long chId,@RequestParam(value="chParent", required=true) Long chParent){
    	FocChannel foc = focChannelsService.findNodeOneByChidAndChParentId(chId, chParent);
    	return foc;
    }
			
	/**
	 * 通过chSiteId与name获取对应的顶级信息
	 * @param chSiteId
	 * @param siteName
	 * @return
	 */
    @RequestMapping(value="/api/findrootid",method=RequestMethod.GET)
    public List<TreeInfo> findRootId(@RequestParam(value="chSiteId", required=true) Integer chSiteId,@RequestParam(value="name", required=true) String siteName){
    	FocChannel foc = focChannelsService.findRootId(chSiteId, 0L);
    	List<Znode> findChildren  =focChannelsService.findChildren(chSiteId,foc.getChId());
    	List<TreeInfo> infoList=new ArrayList<TreeInfo>();
    	for (Znode znode : findChildren) {
    		TreeInfo info = new TreeInfo();
        		info.withName(znode.getName()).withId(znode.getId()).withpId(znode.getpId()).withIsParent(znode.getIsParent());
        		infoList.add(info);
		}
    	return infoList;
    }
//	@RequestMapping(value="/api/findrootid",method=RequestMethod.GET)
//    public TreeInfo findRootId(@RequestParam(value="chSiteId", required=true) Integer chSiteId,@RequestParam(value="name", required=true) String siteName){
//    	FocChannel foc = focChannelsService.findRootId(chSiteId, 0L);
//    	TreeInfo info = new TreeInfo();
//    	if(null != foc){
//    		info.withSiteName(siteName).withId(foc.getChId());
//    	}
//    	
//    	return info;
//    }
    /**
     * 获取ztree的子集信息数据
     * @param chSiteId
     * @return
     */
    @RequestMapping(value="/api/findSiteChannelSync",method=RequestMethod.GET)
    public List<Znode> findSiteChannelSync(@RequestParam(value="chSiteId", required=true) Integer chSiteId,
    		@RequestParam(value="chParentId", required=true) Long chParentId) {
    	log.info("-----------------获取站点频道       开始---------------");
    	
    	List<Znode> findChildren = focChannelsService.findChildren(chSiteId,chParentId);
    	System.out.println(findChildren);
		return findChildren;
    }
    
    /**
     * ztree修改保存
     * @param chSiteId
     * @param chId
     * @param chParentId
     * @param chName
     * @param focId
     * @param chCascadeName
     * @param chUrl
     * @return
     */
    @RequestMapping(value="/api/updateSiteChannelSync")
    @ResponseBody
    public String updateSiteChannelSync(@RequestParam(value="chSiteId", required=true) Integer chSiteId,
    		@RequestParam(value="chId", required=true) Long chId,
    		@RequestParam(value="chParentId", required=true) Long chParentId,
    		@RequestParam(value="chName", required=true) String chName,
    		@RequestParam(value="focId", required=true) Long focId,
    		@RequestParam(value="chCascadeName", required=true) String chCascadeName,
    		@RequestParam(value="chUrl", required=true) String chUrl) {
    	FocChannel focChannels=focChannelsService.findByFocChannels_Id(focId);
    	focChannels.setChId(chId);
    	focChannels.setChSiteId(chSiteId);
    	focChannels.setChParentId(chParentId);
    	focChannels.setChName(chName);
    	focChannels.setId(focId);
    	focChannels.setChCascadeName(chCascadeName);
    	focChannels.setChUrl(chUrl);
    	focChannels.setLastUpdateTime(new Date());
    	focChannels=focChannelsService.save(focChannels);
    	JSONObject json = (JSONObject) JSONObject.toJSON(focChannels);
    	json = JSONUtil.convertNull2String(json);
    	log.info("-----------------获取站点频道       开始---------------");
    	return json.toString();
    }
    
    /**
     * ztree添加保存
     * @param chSiteId
     * @param chParentId
     * @param chName
     * @param chCascadeName
     * @param chUrl
     * @return
     */
    @RequestMapping(value="/api/addSiteChannelSync")
    @ResponseBody
    public String addSiteChannelSync(@RequestParam(value="chSiteId", required=true) Integer chSiteId,
    		@RequestParam(value="chParentId", required=true) Long chParentId,
    		@RequestParam(value="chName", required=true) String chName,
    		@RequestParam(value="chCascadeName", required=true) String chCascadeName,
    		@RequestParam(value="chUrl", required=true) String chUrl) {
    	FocChannel focChannels=new FocChannel();
    	focChannels.setChSiteId(chSiteId);
    	focChannels.setChParentId(chParentId);
    	focChannels.setChName(chName);
    	focChannels.setChCascadeName(chCascadeName);
    	focChannels.setChUrl(chUrl);
    	focChannels.setCreateTime(new Date());
    	focChannels.setLastUpdateTime(new Date());
    	int websiteName2Hash = FounderSiteChannelKeyUtil.websiteName2Hash(chUrl);
    	Integer web=websiteName2Hash;
		focChannels.setChId(Long.parseLong(web.toString()));
    	focChannels=focChannelsService.save(focChannels);
    	JSONObject json = (JSONObject) JSONObject.toJSON(focChannels);
    	json = JSONUtil.convertNull2String(json);
    	log.info("-----------------获取站点频道       开始---------------");
    	return json.toString();
    }
    
    @RequestMapping(value="/api/deleteBatchSiteChannelSync")
    @ResponseBody
    public JSONObject deleteBatchSiteChannelSync(@RequestParam(value="chIds", required=true) String chIds) {
    	log.info("-----------------批量删除ztree      开始---------------");
    	JSONObject res = new JSONObject();
    	try {
    		focChannelsService.deleteBatchSiteChannelSync(chIds);
			res.put("code", "1000");
			res.put("msg", "执行成功");
		} catch(EmptyResultDataAccessException e){
			res.put("code", "1001");
			res.put("msg", "网站不存在");
		} catch (Exception e) {
			res.put("code", "1111");
			res.put("msg", "系统内异常");
			log.error("系统内异常",e);
		}
    	log.info("-----------------批量删除ztree        结束---------------");
    	return res;
    }
    
    @RequestMapping(value="/api/deleteSiteChannels")
    @ResponseBody
    public JSONObject deleteSiteChannels(@RequestParam(value="chId", required=true) Long chId) {
    	log.info("-----------------删除ztree子节点       开始---------------");
    	JSONObject res = new JSONObject();
    	try {
    		focChannelsService.deleteSiteChannels(chId);
			res.put("code", "1000");
			res.put("msg", "执行成功");
		} catch(EmptyResultDataAccessException e){
			res.put("code", "1001");
			res.put("msg", "网站不存在");
		} catch (Exception e) {
			res.put("code", "1111");
			res.put("msg", "系统内异常");
			log.error("系统内异常",e);
		}
    	log.info("-----------------删除ztree子节点        结束---------------");
    	return res;
    }
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值