JQuery可拖动树形插件HTree

简介

HTree，是一款基于 jquery 实现的一个可拖动树形插件。

使用

1.  引入文件

<script src="~/Scripts/MyTree.js"></script>
<script src="~/Scripts/Request.js"></script>

2.  基本用法

<script type="text/javascript">

    var tree = {};
    $(function () {
        core.post("/Home/GetTreeData", {}, function (list) {
            tree = $("#container").HTree({
                Data: list.list,
                ToggleEnable: true,
                Multiple: false,
                AllowDrag: true,
                onDrag: DragHelper.drag,
                onDrop: DragHelper.drop,
                onEnter: DragHelper.enter,
                onLeave: DragHelper.leave
            });
        });
    });

    function editNode() {
        if (tree) {
            var selectedIds = tree.getSelected();
            if (selectedIds.length != 1) {
                alert("必须且只能选择一个节点");
                return false;
            }
            window.location.href = "/Home/Edit?id=" + selectedIds[0];

        }

    }
    function Close() {
        $("#n-name").val("");
        $("#n-order").val("");
        $("#addDiv").hide();
        $("#cover").hide();
    }

    function Save() {
        var name = $("#n-name").val();
        var order = $("#n-order").val();
        if (!name || !order) {
            alert("请输入名称和序号");
            return false;
        }
        var selectedIds = tree.getSelected();
        if (selectedIds.length > 1) {
            alert("最多只能选择一个节点");
            return false;
        }
        var selectedId = selectedIds.length > 0 ? selectedIds[0] : null;
        coreAjax("/Home/CreateNode", { name: name, parentId: selectedId, order: order });
    }
    function addNode() {
        if (tree) {
            $("#cover").show();
            $("#addDiv").show()

        }
    }
    function delNode() {
        if (tree) {
            var selectedIds = tree.getSelected();
            if (selectedIds.length != 1) {
                alert("必须且只能选择一个节点");
                return false;
            }
            var r = confirm("删除该节点会导致一并删除其所有子节点，确认要删除吗？");
            if (r) {
                coreAjax("/Home/DeleteNodes", { id: selectedIds[0] });
            }

        }
    }

    function coreAjax(url, data, cb) {
        core.post(url, data, function (result) {
            if (result.IsSuccess) {
                if (cb) {
                    cb(result.Data);
                }
                else {
                    window.location.reload();
                }
            }
            else {
                alert(result.Error);
            }
        });
    }

    function changeNodes() {
        if (tree) {
            var ids = tree.getSelected();
            if (ids.length != 2) {
                alert("必须且只能选择两个节点进行对调操作");
                return false;
            }
            var r = confirm("确认要进行对调操作吗？");
            if (r) {
                coreAjax("/Home/ChangePosition", { curId: ids[0], targetId: ids[1] });
            }
        }
    }

    function upMove() {
        if (tree) {
            var selectedIds = tree.getSelected();
            if (selectedIds.length != 1) {
                alert("必须且只能选择一个节点");
                return false;
            }
            coreAjax("/Home/UpMove", { id: selectedIds[0] }, function (result) {
                tree.reload(result);
                tree.selected(selectedIds[0]);
            });
        }
    }

    function downMove() {
        if (tree) {
            var selectedIds = tree.getSelected();
            if (selectedIds.length != 1) {
                alert("必须且只能选择一个节点");
                return false;
            }
            coreAjax("/Home/DownMove", { id: selectedIds[0] }, function (result) {
                tree.reload(result);
                tree.selected(selectedIds[0]);
            });
        }
    }
    var DragHelper = {
        drag: function (event) {
            var target = $(event.target);
            var id = target.attr("data-id");
            event.originalEvent.dataTransfer.setData("Text", id);
        },
        drop: function (event) {
            event.originalEvent.preventDefault();
            var containerDom = $(event.originalEvent.target);
            var targetId = containerDom.children(".text-span").attr("data-id");
            var sourceId = event.originalEvent.dataTransfer.getData("Text");
            if (targetId == sourceId) {
                alert("必须将节点拖动到不同的节点");
                return false;
            }
            coreAjax("/Home/ChangePosition", { sourceId: sourceId, targetId: targetId });
        },
        enter: function (event) {
            event.originalEvent.preventDefault();
            var target = $(event.originalEvent.target);
            target.addClass("enter");
        },
        leave: function (event) {
            event.originalEvent.preventDefault();
            var target = $(event.originalEvent.target);
            target.removeClass("enter");
        }
    };
</script>

相关链接

Gitee 地址 ：https://gitee.com/hu_bo_4002/HTree/tree/master