php ztreeで追加・削除・変更を実装する方法-PHPの問題-php.cn

php ztreeで追加・削除・変更を実装する方法

藏色散人

リリース： 2023-03-05 21:06:02

オリジナル

2289 人が閲覧しました

php ztreeの追加・削除・変更の実装方法: 1. 「addHoverDom」などのメソッドでztreeノードを追加; 2. 「onRemove」コールバック関数でノードを削除; 3. 「onRename」メソッドを使用して変更ノード。

php ztreeで追加・削除・変更を実装する方法

推奨: 「PHP ビデオチュートリアル」

プロジェクトで使用されていますツリー構造は、表示データを読み取ったり、ページ上の他のコンテンツの表示を制御したりするために使用されます。ツリーデータソースの変更は通常、他のモジュールによって完了します。これにより機能が簡素化され、ツリーに過度の責任を与えることを避けることができますが、もう 1 つの手順を追加する必要があります。ユーザーに最大限の利便性を提供し、このステップの手間を省くために、アイコンの追加、削除、変更機能を使用できます。これにより、ユーザーに最大の選択肢が提供され、システムがより柔軟になります。

1. 簡単な説明

実行する前に、実現したい機能を簡単に紹介します。まず、データソースに対する 4 つの主要な操作である追加、削除、変更、クエリをツリーに追加します。ツリー読み込み時に「クエリ」が実装されています。残りは追加、削除、変更です。実装手順は次のとおりです。

1. ツリー読み込み後、マウスをツリーに移動したときノードがオンになると、追加、削除、および変更ボタンが自動的にロードされます。

2. これら 3 つのボタンは、それぞれツリーノードの追加、削除、および変更機能を制御します

# 3. マウスがツリーノードの外に移動し、ノードが選択されていない場合、ボタンは消えます。

2. ztree ノードの追加

ツリー上のマウスの移動イベントはそれぞれ、移動と移動を担当します。ツリーの移動属性。ツリー、つまりAddHoverdomとremoverHoverdomを定義するときにバインドできます。追加のイベントは、Addhoverdom

//树属性的定义
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 //修改事件
    }
};

ログイン後にコピー

Addhoverdomで書かれています。ユーザー定義のコントロール。setting.view.removeHoverDom と一緒に使用されます。ノードを追加する考え方は次のとおりです:

1. ノードを作成します

ノードの名前は一時的に「NewNode」と名付けることができます。ノードの pId は ID です。マウスが配置されているノードの他の情報もここで定義または制限できます

2. ノード情報をデータベースに追加し、新しく追加されたデータの ID を返します

(返されるIDは主にデータベーステーブルの主キーです。自己増加型です。主キーがguidの場合や命名規則がある場合は返されるデータを取得する必要はありません)

3 . 新しいノードをツリーに追加します。これがページに表示されます。効果

4. 新しいノードを選択状態にします。変更された状態に設定することもできます。具体的な状況は個々の状況によって異なります

function addHoverDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span"); //获取节点信息
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;

    var addStr = "<span class=&#39;button add&#39; id=&#39;addBtn_" + treeNode.tId + "&#39; title=&#39;add node&#39; οnfοcus=&#39;this.blur();&#39;></span>"; //定义添加按钮
    sObj.after(addStr); //加载添加按钮
    var btn = $("#addBtn_"+treeNode.tId);

    //绑定添加事件，并定义添加操作
    if (btn) btn.bind("click", function(){
        var zTree = $.fn.zTree.getZTreeObj("tree");
        //将新节点添加到数据库中
        var name=&#39;NewNode&#39;;
        $.post(&#39;./index.php?r=data/addtree&pid=&#39;+treeNode.id+&#39;&name=&#39;+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 によって引き起こされたダメージを排除します。私たちの操作では、addHoverDom は関数を実装していますが、addHoverDom によって作成された結果をリサイクルすることはありません。 , 私たちのページは無効なボタンを大量に読み込むため、加算と減算のバランスが依然として非常に重要です

function removeHoverDom(treeId, treeNode) {
    $("#addBtn_"+treeNode.tId).unbind().remove();
};

ログイン後にコピー

RemoveHoverDom 関数を使用しない場合の効果は次のとおりです。他のボタンも addHoverDom に移動して定義すると、複数の無効なボタンがここに追加されます...

3. ノードを変更します

変更されたノードツリーの定義時にすでにバインドされています。変更した関数を直接記述できます。ノードの追加と同様に addHoverDom でバインドすることもできます (removeHoverDom で破棄することを忘れないでください)。ノードの変更は比較的簡単です。ツリー上で最も直感的なのは、nodeName です。そのため、名前の変更についてのみ説明します。他のデータを変更する必要がある場合は、ポップアップボックスを使用して完了できるため、ここでは説明しません。ここで詳細を説明します。

function onRename(e, treeId, treeNode, isCancel) {
    //需要对名字做判定的，可以来这里写~~
    $.post(&#39;./index.php?r=data/modifyname&id=&#39;+treeNode.id+&#39;&name=&#39;+treeNode.name);
}

ログイン後にコピー

効果は次のとおりです:

其实修改节点还有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(&#39;./index.php?r=data/del&id=&#39;+treeNode.id);
}

ログイン後にコピー

与修改节点的beforRename相同，删除节点也有一个作用相同的函数，若定义了它，则只有在返回为true时，onRemove事件回调函数才会被触发。

function beforeRemove(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    zTree.selectNode(treeNode);
    return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}

ログイン後にコピー