ztree自定义按钮的显示和功能

//自定义按钮的显示和功能绑定
function addDiyDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
    var addStr = "<span class='fa fa-plus' id='addBtn_" +
        treeNode.tId +
        "' title='add node' οnfοcus='this.blur();'></span>";
    var deleteStr = "<span class='fa  fa-trash-o' id='deleteBtn_" +
                    treeNode.tId +
                    "' title='delete node' οnfοcus='this.blur();'></span>";
    var activateStr;
    //根据节点数据的启用状态添加状态图标
    if (treeNode.IsUsed) {
        activateStr = "<span class='fa fa-toggle-on' id='activateStrBtn_" +
            treeNode.tId +
            "' title='activateStr node' οnfοcus='this.blur();'></span>";
    } else {
        activateStr = "<span class='fa fa-toggle-off' id='activateStrBtn_" +
                   treeNode.tId +
                   "' title='activateStr node' οnfοcus='this.blur();'></span>";
    }

    sObj.after(addStr, deleteStr, activateStr);
    var btnAdd = $("#addBtn_" + treeNode.tId);
    if (btnAdd)
        btnAdd.bind("click",
            function () {
                //点击后出发新增事件
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                //新增节点
                var newNode = zTree.addNodes(treeNode,
                { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
                //新增节点真实id为空
                $("#ObjId").val("");
                objId = 0;
                //获取新增节点父节点真实Id并记录
                $("#ParentId").val(treeNode.TrueId);
                displayPId = treeNode.tId;
                displayId = newNode[0].tId;
                zTree.selectNode(newNode[0]);
                switch (treeNode.TrueType) {
                    case 1:
                        //行业下新增分类
                        $("#IndustryDiv").hide();
                        $("#CategoryDiv").show();
                        $("#CourseSubjectDiv").hide();
                        newNode.type = 2;
                        zTree.updateNode(newNode);
                        break;
                    case 2:
                        //分类下新增科目
                        $("#IndustryDiv").hide();
                        $("#CategoryDiv").hide();
                        $("#CourseSubjectDiv").show();
                        newNode.type = 3;
                        zTree.updateNode(newNode);
                        break;
                    default:
                        break;
                }
                return false;
            });

    var btnActivateStr = $("#activateStrBtn_" + treeNode.tId);
    if (btnActivateStr)
        btnActivateStr.on("click",
            function () {
                $.ajax({
                    type: "post",
                    dataType: "json",
                    data: {
                        'Type': treeNode.TrueType,
                        'ObjectId': treeNode.TrueId,
                        'IsUsed': treeNode.IsUsed
                    },
                    url: "/IndustryCategory/ActivateIndustryCategory",
                    success: function (data) {
                        //更新ztree节点的启用状态
                        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                        var node = treeObj.getNodeByTId(displayId);
                        node.IsUsed = !treeNode.IsUsed;
                        treeObj.updateNode(node);
                        //改变选中的节点的启用禁用图标 
                        var flag = btnActivateStr.hasClass("fa-toggle-on");
                        displayId = treeNode.tId;
                        if (flag) {
                            btnActivateStr.removeClass('fa-toggle-on').addClass('fa-toggle-off'); //删除旧class加入新class
                        } else {
                            btnActivateStr.removeClass('fa-toggle-off').addClass('fa-toggle-on'); //删除旧class加入新class
                        }
                    }
                });
            });

    var btnDelete = $("#deleteBtn_" + treeNode.tId);
    if (btnDelete)
        btnDelete.bind("click",
            function () {
                //删除选中的节点  
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.removeNode(treeNode);
                $.ajax({
                    type: "post",
                    dataType: "json",
                    data: {
                        'Type': treeNode.TrueType,
                        'ObjectId': treeNode.TrueId,
                    },
                    url: "/IndustryCategory/DeleteIndustryCategory",
                    success: function (data) {
                    }
                });
            });
};

通过js触发ajax更新后台数据库数据,然后根据ajax回调更新ztree节点数据

ps:ajax回调刷新ztree可以通过初始化的方式 但是跟目前需求有冲突 别的地方可以考虑初始化ztree实现节点数据更新

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值