web treeview点击修改，添加，删除（仿windows重命名）

效果嘛，就是这样，比较粗糙。。。

首先在需要绑定的树节点上添加一个span，用来标记要重命名的节点，然后剩下的工作留到前台完成：

ViewState["expland"]记录的是当前选中的节点value，留作下次展开节点时使用

 

   public void ExplandTree()
    {
        foreach (TreeNode tn in this.TreeView_WithRight.Nodes)
        {
            string sd = Convert.ToString(ViewState["expland"]);
            if (expColl(tn, Convert.ToString(ViewState["expland"])))
            {
                tn.Expanded = true;
                //tn.Selected = true;
                break;
            }
            tn.Expanded = false;
        }
    }
    /// <summary>
    /// 展开树节点
    /// </summary>
    /// <param name="tnode">节点Value</param>
    /// <param name="uid">参数</param>
    /// <returns></returns>
    /// 
    string action = string.Empty;
    private bool expColl(TreeNode tnode, string uid)
    {
        bool canExp = false;
        if (tnode.ChildNodes.Count == 0)
            return false;
        tnode.Expand();
        foreach (TreeNode cnode in tnode.ChildNodes)
        {
            if (cnode.Value.Trim().ToLower() == uid.Trim().ToLower())
            {
                if (cnode.ChildNodes.Count == 0)
                {
                    ClientScript.RegisterStartupScript(Page.GetType(), "ServiceManHistoryButtonClickC", "<script>var righti = window.parent.document.getElementById('left');righti.src='right_2.aspx?FOLDERID=" + cnode.Value + "'</script>");
                }
                else
                {
                    ClientScript.RegisterStartupScript(Page.GetType(), "ServiceManHistoryButtonClickC", "<script>var righti = window.parent.document.getElementById('left');righti.src='right_2.aspx?FOLDERID='</script>");
                }

                switch (action)
                {
                    case "add":
                        cnode.Text = "<span id='EditName'>" + cnode.Text + "</span>";
                        break;
                    case "update":
                        cnode.Text = "<span id='EditName'>" + cnode.Text + "</span>";
                        break;
                    case "updateNameSave":
                        break;
                    case "del":
                        break;
                    default:
                        break;
                }
                cnode.Expanded = true;
                cnode.Selected = true;
                canExp = true;
                break;
            }
            if (expColl(cnode, uid))
            {
                canExp = true;
                break;
            }
        }
        if (!canExp)
        {
            tnode.Collapse();
        }
        return canExp;
    }

 

前台部分主要思路就是找到后台标记的节点，然后用input替换，当失去焦点的时候提交整个页面，当然后台得记录每一次展开的节点id，下一次可以展开到这一次召开的节点，有个注意的地方，当页面有多个表单元素时，回车提交问题，这个百度一下偶详细介绍。

      <script type="text/javascript" defer="defer">
    
        $(function() {
            $('#EditName').html('<input type="text" id="EditNameInput" onkeydown="keyDown();" onfocus="this.select()" value="' + $('#EditName').text() + '"/>');
            $("#EditNameInput").focus(); //设置焦点状态
            ELeBlur(); //失去交点触发事件
        });
        function keyDown() {
            var e = event.srcElement;
            if (event.keyCode == 13) {
                $('#EditName').focus();
            }
        }
        function keyDownForm() {
            var keycode = event.keyCode;
            var keyChar = String.fromCharCode(keycode);
            if (event.keyCode == 13 && event.srcElement.type != 'button' && event.srcElement.type != 'submit' && event.srcElement.type != 'reset' && event.srcElement.type != '' && event.srcElement.type != 'textarea') {
                event.keyCode = 9;
            }
        }
        function ELeBlur() {
            $("#EditNameInput").blur(function() {
                var _folderId = $('#EditName').parent().attr("title");
                var _folderName = $("#EditNameInput").val();
                var _action = "updateNameSave";
                $("#actiontype").val(_action);
                $("#folderid").val(_folderId);
                $("#foldername").val(_folderName);
                document.forms[0].submit();
            });
        }
        document.onkeydown = keyDownForm;
    </script>

    <style type="text/css">
        #EditNameInput
        {
            width: 50px;
        }
    </style>