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

来源：互联网发布：linux grep命令返回值编辑：程序博客网时间：2024/06/04 18:58
//自定义按钮的显示和功能绑定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' onfocus='this.blur();'></span>";    var deleteStr = "<span class='fa  fa-trash-o' id='deleteBtn_" +                    treeNode.tId +                    "' title='delete node' onfocus='this.blur();'></span>";    var activateStr;    //根据节点数据的启用状态添加状态图标    if (treeNode.IsUsed) {        activateStr = "<span class='fa fa-toggle-on' id='activateStrBtn_" +            treeNode.tId +            "' title='activateStr node' onfocus='this.blur();'></span>";    } else {        activateStr = "<span class='fa fa-toggle-off' id='activateStrBtn_" +                   treeNode.tId +                   "' title='activateStr node' onfocus='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实现节点数据更新
阅读全文
1 0