点击GridView中TextBox弹出输入对话层,输入内容反传回先前点击的TextBox中(Jquery获取GridView中TextBox的ID)

项目中,由于用户反映说:GridView表中的输入框太小,不方便输入,特别是在输入内容多的时候。问能不能点击GridView中输入框的时候能弹出一个大的内容输入对话框。

介于用户的要求,我就开始修改。

先想到的就是我用Jquery在GridView中TextBox上添加一个focus焦点捕捉事件,当点击时触犯弹出内容输入框。

然后就是当输入完毕的操作了,我又使用内容输入框(其实也是一个TextBox)的焦点失去事件(blur),在该事件中先把值反馈回先前点击的GridView中的那个TextBox,然后隐藏内容输入框。


上面大部门地方都没有遇到问题,但是到把内容输入框中的值反传给GridView点击的那个TextBox时出现问题了,弄了好久不能实现,后面去网上求助,经过好心人的指导,慢慢有所感悟。经过多次修改,测试,终于成功了。

也许对很多人来说,这个问题很简单,但对我这种菜鸟来说,从中学到了很多东西。

<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript">
        var cc;
        $(function ()
        {
            $("#TextBox2").blur(function ()
            {
                var alltext = $("#TextBox2").val();
                $("#"+cc).val(alltext);
                //alert(alltext);
                $("#div2").hide();
            })
        })
        function Test(obj)
        {
            var rr = $(obj).attr("id");
            $("#TextBox2").val("");
            var top = ($(window).height() - $("#div2").height()) / 2;
            var left = ($(window).width() - $("#div2").width()) / 2;
            var scrollTop = $(document).scrollTop();
            var scrollLeft = $(document).scrollLeft();
            $("#div2").css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
            cc = rr;
        }
  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 1200px; height: 800px;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField HeaderText="编号" DataField="LoginID" />
                <asp:BoundField HeaderText="姓名" DataField="UserName" />
                <asp:BoundField HeaderText="性别" DataField="Sex" />
                <asp:TemplateField HeaderText="评价">
                    <ItemTemplate>
                        <input id="TextBox1" type="text" runat="server" onclick="Test(this);" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    </div>
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <div id="div2" style="display: none; width: 400px; height: 200px; z-index: 10000;"
        align="center">
        <textarea type="text" id="TextBox2" runat="server" style="width: 400px; height: 200px;
            background-color: Gray" />
    </div>
    </form>
</body>
</html>


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。