PHP ztree에서 추가, 삭제 및 수정을 구현하는 방법
- 藏色散人원래의
- 2020-09-12 09:43:142294검색
php ztree 추가, 삭제 및 수정 방법: 1. "addHoverDom" 및 기타 방법을 통해 ztree 노드를 추가합니다. 2. "onRemove" 콜백 기능을 통해 노드를 삭제합니다. 3. "onRename" 방법을 사용하여 노드를 수정합니다. H 추천: "pPhp 비디오 튜토리얼
"
프로젝트에 사용된 트리 구조는 항상 제어 페이지의 디스플레이 데이터나 기타 콘텐츠를 읽는 데 사용되었습니다. 트리 데이터 소스의 수정은 일반적으로 다른 모듈에 의해 완료됩니다. 이렇게 하면 기능을 단순화하고 트리에 너무 많은 책임을 부여하는 것을 피할 수 있지만 한 단계를 더 추가해야 합니다. 사용자에게 최고의 편의성을 제공하고 이 단계의 수고를 덜기 위해 아이콘 추가, 삭제 및 수정 기능을 사용할 수 있으며, 이는 사용자에게 최고의 선택권을 제공하고 시스템을 더욱 유연하게 만듭니다.
하기 전에 우리가 이루고 싶은 기능을 간략하게 소개하겠습니다. 우선, 추가, 삭제, 수정, 쿼리는 데이터 소스에 대한 4가지 주요 작업입니다. 이것이 우리가 트리에 추가하려는 작업입니다. "쿼리"는 트리를 로드할 때 구현되었습니다. 나머지는 추가, 삭제 및 수정입니다. 1. 트리 로드 후 마우스가 트리 노드로 이동하면 자동으로 추가 로드됩니다. , 삭제, 수정 버튼
2. 이 세 개의 버튼은 각각 트리 노드의 추가, 삭제, 수정 기능을 제어합니다.
3. 마우스가 트리 노드 밖으로 나가고 해당 노드가 선택되지 않은 경우 버튼 사라집니다.
2. ztree 노드 추가
//树属性的定义
var setting = {
//页面上的显示效果
view: {
addHoverDom: addHoverDom, //当鼠标移动到节点上时，显示用户自定义控件
removeHoverDom: removeHoverDom, //离开节点时的操作
fontCss: getFontCss //个性化样式
},
edit: {
enable: true, //单独设置为true时，可加载修改、删除图标
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
system:"system",
rootPId: ""
}
},
callback: {
onClick: zTreeOnClick, //单击事件
onRemove: onRemove, //移除事件
onRename: onRename //修改事件
}
}; removeHoverDom은 마우스가 노드로 이동할 때 사용자 정의 컨트롤을 표시합니다. 노드 추가 아이디어는 다음과 같습니다. 1. 노드 생성
노드 이름은 임시로 "NewNode"로 지정할 수 있습니다. 노드의 pId는 마우스가 위치한 노드의 ID입니다. . 다른 정보가 있는 경우 여기에서 정의하거나 다른 제한 사항을 적용할 수 있습니다.
2. 데이터베이스에 노드 정보를 추가하고 새로 추가된 데이터의 ID를 반환합니다.
(반환되는 ID는 주로 데이터베이스 테이블의 기본 키에 대한 것입니다. 이는 자동 증가 유형입니다. 기본 키가 guid이거나 명명 규칙이 있으면 반환 데이터를 가져올 필요가 없습니다.)
3. 추가 효과는 트리에 추가하는 것입니다.
4페이지 참조 by AddhoverDom이 우리 기능을 구현했지만 AddhoverDom에서 생성된 결과를 복구하기 위해 그것 없이 로드됩니다. 페이지가 로드됩니다. 잘못된 버튼이 많기 때문에 덧셈과 뺄셈의 균형은 여전히 매우 중요합니다
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span"); //获取节点信息
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' οnfοcus='this.blur();'></span>"; //定义添加按钮
sObj.after(addStr); //加载添加按钮
var btn = $("#addBtn_"+treeNode.tId);
//绑定添加事件，并定义添加操作
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("tree");
//将新节点添加到数据库中
var name='NewNode';
$.post('./index.php?r=data/addtree&pid='+treeNode.id+'&name='+name,function (data) {
var newID = data; //获取新添加的节点Id
zTree.addNodes(treeNode, {id:newID, pId:treeNode.id, name:name}); //页面上添加节点
var node = zTree.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
zTree.selectNode(node); //让新添加的节点处于选中状态
});
});
};RemoveHoverDom 기능이 없는 효과는 다음과 같습니다. 다른 버튼도 addHoverDom으로 이동하여 정의하면 여기에 잘못된 버튼이 두 개 이상 추가됩니다...
3. 수정된 노드는 트리를 정의할 때 이미 바인딩되어 있습니다. 노드를 추가하는 것처럼 addHoverDom에 바인딩하려면 수정된 함수를 직접 작성할 수 있습니다(removeHoverDom destroy를 기억하세요). 노드를 수정하는 것은 상대적으로 쉽습니다. 트리에서 가장 직관적인 것은 nodeName이므로, 다른 데이터를 수정해야 하는 경우 팝업 상자를 사용하여 완료하면 되므로 여기서는 이름 수정에 대해서만 설명하겠습니다. 여기에서 자세히 알아보세요.
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};효과는 다음과 같습니다.
其实修改节点还有beforeRename的回调函数，常常把对修改数据的判定放在这里，如果定义了这个函数，则只有在返回true时，onRename事件回调函数才会被触发。
定义：
var setting = {
edit: {
enable: true
},
callback: {
beforeRename: eforeRename
}
};beforeRename函数：
function beforeRename(treeId, treeNode, newName, isCancel) {
if (newName.length == 0) {
alert("节点名称不能为空.");
return false;
}
return true;
}四、删除节点
删除节点由onRemove回调函数操作，具体的是否可删除、有无子节点以及将该节点删除后对子节点需进行什么操作，可在这里完成
function onRemove(e, treeId, treeNode) {
//需要对删除做判定或者其它操作，在这里写~~
$.post('./index.php?r=data/del&id='+treeNode.id);
} 与修改节点的beforRename相同，删除节点也有一个作用相同的函数，若定义了它，则只有在返回为true时，onRemove事件回调函数才会被触发。
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}小结：
ztree的增删改是树结构动态加载图标的一个例子，它更重要的是实现了一种“无处不按钮”的思路，在最大程度上想用户所想，为其提供足够的便利。如果我们想以这种方式实现其它功能，也不失为一种好的选择。
위 내용은 PHP ztree에서 추가, 삭제 및 수정을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!