DataGrid中添加DropDownList控件 添加焦点离开事件

 

　　有这么一个需求，在DataGrid表格中要可以编辑这几列，其中包括文本框和下拉框，然后在及时保存修改的这些列。页面需要呈现出：初始化时以表格方式显示,点击该列时，出现文本框或者下拉框，鼠标移走后或者点击其他区域时，隐藏该控件，以Table显示。

　　文本框倒是好做，TextBox有一个焦点事件，很容易做到这一点，但是DropDownList却没有这一事件，点击以后，不知道该用什么事件来使控件隐藏。

　　最后 想到了一个比较死板的方法。初始化的时候，显示一个Label标签，隐藏下拉框（这时已经绑定）给Div添加一个点击事件TdClick。当该下拉框有值或者是只有一条数据时，这时候是不需要下拉框的，反之，隐藏Label标签，显示dropdownlist控件。这时，给dropdownlist添加一个focus()事件就可以了，再给dropdownlist添加一个onBlur()事件来控制，鼠标失去焦点时，隐藏该控件。

　

function TdClick()

{

    var DropName = document.getElementById(‘drpTest’);

    var LblName = document.getElementById(‘LblTest’);

    if (DropName.length > 1)

    {

        DropName.style.display = '';

        DropName.style.backgroundColor = '#ffffff';

        LblName.style.display = 'none';

        DropName.focus();

    }

}

function TdBlur()

{

    var DropName = document.getElementById(‘drpTest’);

    var LblName = document.getElementById(‘LblTest’);

 

    DropName.style.display = 'none';

    LblName.style.display = '';

}

 

 <asp:TemplateColumn HeaderText="Test" ItemStyle-Width="160px">
<ItemTemplate>
<div id="DivTest" onclick="TdClick()" runat="server">
<asp:DropDownList ID="drpTest" runat="server" TabIndex="1" style="display:none" onBlur="TdBlur(this,'drpTest','LblTest')" Width="75px" Height="16px" >
</asp:DropDownList>
<asp:Label ID="LblTest" runat="server" Width="75px" Height="16px" ></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateColumn>