zoukankan      html  css  js  c++  java
  • 对 Dflying Chen 提到的Edit GridView Using CheckBoxes 进行一个小改造

    看过之后,总感觉在实际应用的时候,有些不妥之处,所以对代码进行了一点小改动,见下面的中文注释
    修改之后,如果CheckBox=false,那么Textbox的值会恢复到原来保存过的值。觉得这样比较符合实际中的应用,呵呵

    如下(修改之后的):

    <asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false">
    <Columns>
    <asp:TemplateField>
    <ItemTemplate>
    <asp:CheckBox ID="chkSelect" runat="server" onclick="editMode(this)" />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Category Name">
    <ItemTemplate>

    // originalText属性 将最原始的值保存下来,当checkBox Checked=false的时候,将该值恢复到原来的值
    <asp:TextBox ID="txtCategoryName" BorderWidth="0px" CssClass="textbox" runat="server"  originalText='<%# Eval("CategoryName") %>' Text='<%# Eval("CategoryName") %>' />

    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView> 

    <script language="javascript" type="text/javascript">

    disableGridViewTextBoxes();

    // make all the input elements hidden

    function disableGridViewTextBoxes()

    {

    var gvControl = document.getElementById("gvCategories");

    var inputElements = gvControl.getElementsByTagName("INPUT");

    for(i=0;i<inputElements.length;i++)

    {

    if(isTextBox(inputElements[i]))

    {

    inputElements[i].disabled = true;

    }

    }

    }

    function isTextBox(obj)

    {

    return obj.type == 'text';

    }

    function editMode(obj)

    {

    var rowObject = obj.parentElement.parentElement;

    var inputElements = getElementsByTagName(rowObject,"INPUT");

    if(obj.checked)

    {

    showElements(inputElements,"INPUT","text");

    }

    else

    {

    hideElements(inputElements,"text");

    }

    }

    function showElements(list, tagName,type)

    {

    for(i=0;i<list.length;i++)

    {

    if(isTypeOf(list[i],"text"))

    {

    list[i].disabled = false;

    list[i].focus();

    list[i].select();

    }

    }

    }

    function isTypeOf(obj,type)

    {

    return obj.type == type;

    }

    function hideElements(list, type)

    {

    for(i=0; i<list.length;i++)

    {

    if(isTypeOf(list[i],type))

    {

    ////恢复原来的值
    list[i].value=list[i].oralText;
    list[i].disabled = true;

    }

    }

    }

    function getElementsByTagName(obj,tagName)

    {

    return obj.getElementsByTagName(tagName);

    }

    Take a look at the effect in the following animation.


    这个技巧确实不错,感谢Dflying Chen

  • 相关阅读:
    关于ORALE将多行数据合并成为一行 报错未找到where关键字
    Input限制输入数字
    Dev Gridcontrol每行添加序号或者文本。
    Android studio SDK配置
    介数中心性快速计算
    Buuoj 被嗅探的流量
    Docker安装(win10)
    filter CTF
    MySQLdb._exceptions.OperationalError: (2026, 'SSL connection error: unknown error number')
    DNS解析原理(www.baidu.com)
  • 原文地址:https://www.cnblogs.com/hiying/p/810355.html
Copyright © 2011-2022 走看看