可编辑的树

即时编辑

tree-20

实现代码如下 详细参见http://www.360ui.net:

var setting1 = {

    view: {

        addHoverDom: addHoverDom,

        removeHoverDom: removeHoverDom,

        selectedMulti: false

    },

    edit: {

        enable: true,

        renameTitle:"修改",

        removeTitle:"删除"

    },

    callback: {

        //不允许拖拽

        beforeDrag: beforeDrag1,

        //修改前确认

        beforeEditName: beforeEditName1,

        //修改完时的处理

        beforeRename: beforeRename1,

        //修改成功后处理

        onRename: onRename1,

        //删除前确认

        beforeRemove: beforeRemove1

    }

};

var zNodes1 =[

    { id:1, parentId:0, name:"父节点 1", open:true},

    { id:11, parentId:1, name:"叶子节点 1-1"},

    { id:12, parentId:1, name:"叶子节点 1-2"},

    { id:13, parentId:1, name:"叶子节点 1-3"},

    { id:2, parentId:0, name:"父节点 2", open:true},

    { id:21, parentId:2, name:"叶子节点 2-1"},

    { id:22, parentId:2, name:"叶子节点 2-2"},

    { id:23, parentId:2, name:"叶子节点 2-3"},

    { id:3, parentId:0, name:"父节点 3", open:true},

    { id:31, parentId:3, name:"叶子节点 3-1"},

    { id:32, parentId:3, name:"叶子节点 3-2"},

    { id:33, parentId:3, name:"叶子节点 3-3"}

];

 

function initComplete(){

    $.fn.zTree.init($("#tree-1"), setting1, zNodes1);

}

 

function beforeDrag1(treeId, treeNodes) {

    return false;

}

 

//确认是否进入编辑状态

function beforeEditName1(treeId, treeNode) {

    var zTree = $.fn.zTree.getZTreeObj("tree-1");

    //选中该节点

    zTree.selectNode(treeNode);

    zTree.editName(treeNode);

    return true;

}

 

//修改完时处理不进行后台数据处理

function beforeRename1(treeId, treeNode, newName) {

    if (newName.length == 0) {

        top.Dialog.alert("节点名称不能为空.");

        var zTree = $.fn.zTree.getZTreeObj("tree-1");

        setTimeout(function(){zTree.editName(treeNode)}, 10);

        return false;

    }

    return true;

}

//修改成功后处理

function onRename1(event, treeId, treeNode) {

    //此处进行ajax后台数据处理

}

 

//确认是否删除+删除处理

function beforeRemove1(treeId, treeNode) {

    var zTree = $.fn.zTree.getZTreeObj("tree-1");

    //选中该节点

    zTree.selectNode(treeNode);

    top.Dialog.confirm("确认删除节点 -- " + treeNode.name + " 吗?",function(){

        zTree.removeNode(treeNode);

        //此处进行ajax后台数据处理

    });

    return false;

}

 

//添加新增按钮

var newCount = 1;

function addHoverDom(treeId, treeNode) {

    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.id).length > 0) return;

   

    var sObj = $("#" + treeNode.tId + "_span");

    var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id + "' title='添加' οnfοcus='this.blur();'></button>";

    sObj.append(addStr);

   

    var btn = $("#addBtn_" + treeNode.id);

    if (btn){

        btn.bind("click", function(){

            var zTree = $.fn.zTree.getZTreeObj("tree-1");

            var newNode;

            newNode = zTree.addNodes(treeNode, {id:(100 + newCount), parentId:treeNode.id, name:"新增" + (newCount++)});

            if (newNode) {

                zTree.editName(newNode[0]);

            }

            return false;

       });

    }

};

function removeHoverDom(treeId, treeNode) {

    $("#addBtn_" + treeNode.id).unbind().remove();

};

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值