如何让zTree3.0版本在编辑树节点的时候点击“ENTER”键提交数据

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

傲氣比天高
推荐于2016-09-17 · 知道合伙人体育行家

傲氣比天高
知道合伙人体育行家

采纳数：10383 获赞数：92626

我现在23岁，不是很老，但也不小了。05年刚从学校毕业。虽然我们学校并不是很好，但我对外贸非常感兴趣。

向TA提问私信TA

关注

展开全部

zTree插件的基本功能全部实现：
前段时间工作需要对zThree进行了研究：对照zTree的API进行使用
 动态链接数据库：实现增删改查，和单个多个节点拖拽功能，使用Ajax和数据库动态更新。
首次加载
   $.fn.zTree.init($("#treeDemo2"), setting2, zNodes2);
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 如果是现实多颗树需要多个setting和zNodes使用
addDiyDom  用于在节点上固定显示用户自定义控件
addHoverDom用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
 removeHoverDom用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="com.operate.common.exception.OMSException"%>
<%@ page import="com.operate.common.util.LogUtil"%>
<%@ page import="java.util.*"%>
<%@ include file="/common/taglibs.jsp"%>
<HTML>
<HEAD>
 <link rel="stylesheet" href="${ctx}/js/ztree/css/demo.css" type="text/css"></link>
    <link rel="stylesheet" href="${ctx}/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
<script type="text/javascript" src="${ctx}/js/ztree/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.core-3.3.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.excheck-3.3.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.exedit-3.3.min.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.exedit-3.3.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.exedit-3.3.min.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = 
{
view: {
dblClickExpand: false,//需要设置是否双击切换展开状态的节点 JSON 数据对象
},
edit: {
enable: true,
showRemoveBtn: false,//需要设置是否显示删除按钮的节点 JSON 数据对象
showRenameBtn:false //需要设置是否显示编辑名称按钮的节点 JSON 数据对象
},
check: {
enable: false,//设置 zTree 是否开启异步加载模式
nocheckInherit: false,//true 表示 新加入子节点时，自动继承父节点 nocheck = true 的属性。
chkboxType: { "Y": "s", "N": "s" }
},
callback: {
   onClick: onclick,//用于捕获节点被点击的事件回调函数
onRightClick: OnRightClick,//鼠标右键点击时所在节点的 JSON 数据对象
onRename: zTreeOnRename,//用于捕获节点编辑名称结束之后的事件回调函数。
beforeRename:zTreeBeforeRename,//用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
//拖拽
beforeDrag: beforeDrag,//用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
beforeDrop: beforeDrop,//用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
onDrag: zTreeOnDrag,//用于捕获节点被拖拽的事件回调函数
onDrop: zTreeOnDrop//用于捕获节点拖拽操作结束的事件回调函数
},
data: {
simpleData: {
enable: true,//设置 zTree 是否开启异步加载模式
idKey: "id",//节点数据中保存唯一标识的属性名称
pIdKey: "pId"//节点数据中保存其父节点唯一标识的属性名称。
   }
        },
        key: {
url: "url"//特殊用途：当后台数据只能生成 url 属性，又不想实现点击节点跳转的功能时，可以直接修改此属性为其他不存在的属性名称
  }
};

        //右键是否显示删除，更改，添加按钮
        //自定义栏目初始化是否可以拖拽，是否可以，编辑
var zNodes =eval_r(${json});
function OnRightClick(event, treeId, treeNode) {
var nodesss = zTree.getSelectedNodes();
//alert(treeNode.name);
//alert(nodesss.name);
//确定当前选中的节点
   for(var i=0;i<nodesss.length;i++)
   {
  if(nodesss[i].id==treeNode.id)
  {
  $("#update_edit").show();
if(treeNode.name!="封面"&&treeNode.name!="媒体简介")
{
// alert(treeNode.name);
//alert(treeNode.pId);
if(treeNode.pId!="0"&&treeNode.name!="....")
{
$("#m_add").remove();
if($("#m_del").html()==null)
{
$("#m_del_span").append("<li id='m_del' onclick='removeTreeNode();'>删除</li>");
}
showRMenu("hideAll", event.clientX, event.clientY);
}
   else 
if(treeNode.pId=="0")
{
if($("#m_add").html()==null){
$("#m_add_span").append("<li id='m_add' onclick='addTreeNode();'>增加</li>");
}
if($("#m_del").html()==null)
{
$("#m_del_span").append("<li id='m_del' onclick='removeTreeNode();'>删除</li>");
}
showRMenu("updatejie", event.clientX, event.clientY);
}
   else if(treeNode.name=="...."){
          $("#update_edit").hide();
if($("#m_add").html()==null){
$("#m_add_span").append("<li id='m_add' onclick='addTreeNode();'>增加</li>");
}
   if($("#m_del").html()==null){
$("#m_del_span").append("<li id='m_del' onclick='removeTreeNode();'>删除</li>");
}
showRMenu("hide", event.clientX, event.clientY);
}
  }
  }
  }
}
//更具等到不同的参数显示不同
function showRMenu(type, x, y) {
var deletHide=0;
$("#rMenu ul").show();
   $("#update_edit_span").show();
var nodesss = zTree.getSelectedNodes();
if(nodesss.length>1){
 $("#m_add").remove();
 $("#update_edit_span").hide();
}
for(var i=0;i<nodesss.length;i++) {
if(nodesss[i].name=="封面"||nodesss[i].name=="媒体简介"||nodesss[i].name=="...."){
$("#m_del").remove();
}
}
if(type=="hideAll"){
$("#m_del").show();
}else if(type=="updatejie"){
$("#m_del").show();
}else if(type=="hide"){
$("#m_del").hide();
}
rMenu = $("#rMenu");
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){
rMenu = $("#rMenu");
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
var addCount = 1;
function addTreeNode() {
hideRMenu();
var newNode = "";
if (zTree.getSelectedNodes()[0]) {
   var nodes = zTree.getSelectedNodes()[0];//当前选中节点对象
   var pid=nodes.id; 
   var dimensionid=nodes.dimensionID;   
    newNode.checked = zTree.getSelectedNodes()[0].checked;
    $.ajax({
  type: "POST",   
  url: "projectBriefAction!leftSavr",
  data: {"name":newNode,"pId":nodes.id,"dimensionID":dimensionid},
  success: function(str){
  var strs= new Array(); //定义一数组
                   strs=str.split(","); //字符分割      
  var msg=strs[0];
  var sequenceNumber=strs[1];
  var url=strs[2];
 // alert(msg);  
  //alert(sequenceNumber); 
 // alert(url); 
   if(pid==9999999){
zTree.addNodes(zTree.getSelectedNodes()[0], [{"id":msg,"pId":pid,"name":newNode,"open":true,"dimensionID":dimensionid,"sequenceNumber":sequenceNumber,"url":url}]);
}else
{
zTree.addNodes(zTree.getSelectedNodes()[0], [{"id":msg,"pId":pid,"name":newNode,"dimensionID":dimensionid,"sequenceNumber":sequenceNumber,"url":url}]);
}
//zTree.editName(zTree.getSelectedNodes()[0]);
var childNodes = zTree.transformToArray(nodes); 
        var nodes1 = new Array(); 
        for(i = 0; i < childNodes.length; i++) { 
                   nodes1[i] = childNodes[i].id; 
                   if(nodes1[i]==msg)
                   {
                  zTree.editName(childNodes[i]);
                   }
                  }
  }
 });
} else {
zTree.addNodes(null, newNode);
}
}
//删除节点
function removeTreeNode() {
hideRMenu();
v = "";
var nodes = zTree.getSelectedNodes();//获取 多选ctrl +的集合
       // nodesall = zTree.getCheckedNodes(true);
       nodesall = zTree.getSelectedNodes();
       var msg = "确定要删除选中的节点？，如果删除将连同子节点一起删掉。\n\n请确认！";
         if(nodesall.length>1){
  if (confirm(msg)==true){
  for (var i=0, l=nodesall.length; i<l; i++) {
   v += nodesall[i].name + ",";
     //获取选中节点的id值
   zTree.removeNode(nodesall[i]);
   delectall(nodesall[i]);
   }
      }
      }else if (nodes && nodes.length>0) {
if (nodes[0].children && nodes[0].children.length > 0) {
var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
if (confirm(msg)==true){
   delectall(nodes[0]);
zTree.removeNode(nodes[0]);
}
} else {
$.ajax({
  type: "POST",   
  url: "projectBriefAction!deletes",
  data: {"Id":nodes[0].id},
  success: function(msg){  
  }
});
zTree.removeNode(nodes[0]);
}
}
}

var zTree, rMenu;
//首次加载
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
$("#treeDemo_3_check").remove();
$("#treeDemo_2_check").remove();
$("#treeDemo_1_check").remove();
//rMenu = $("#rMenu");
});
//-->
//更改
      function zTreeOnRename(event, treeId, treeNode) {
//alert(treeNode.id);
update(treeNode.id,treeNode.name,treeNode.pId,"")

}


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何让zTree3.0版本在编辑树节点的时候点击“ENTER”键提交数据

其他类似问题

为你推荐：