ASP.NET简化编辑界面解决思路及实现代码(2)
程序员文章站
2024-03-05 14:52:32
程序是需要不断改进,上午做了,下午再去看时,会觉它不够完美。 比如这个:现在insus.net把它改为下面这个样子: 这篇与前一篇改进部分,也许大家会留意到动画...
程序是需要不断改进,上午做了,下午再去看时,会觉它不够完美。
比如这个:现在insus.net把它改为下面这个样子:
这篇与前一篇改进部分,也许大家会留意到动画演示,主要是gridveiw的更新与删除会在每row都有。因此insus.net把它抽取出来,放在gridview外。致于一次性更新多笔记录,insus.net在很早之前已经录制过视频下载地址。还有一个就是删除,在每row第一列放了一个checkbox,让用户可以选择记录进行删除。
<asp:templatefield>
<itemstyle borderwidth="1" bordercolor="#c0c0c0" width="1%" />
<itemtemplate>
<asp:checkbox id="checkbox1" runat="server" onclick="javascript:changerowbgcolor(this)" />
</itemtemplate>
</asp:templatefield>
删除前提示用户确认之后,再删除,但是在这里遇上一个问题,就是首先判断是否有选择记录,再confirm用户确认删除
还有一点要注意的地方,就是选择checkbox之后,行可以highlight,实现方可以参考:
以下较完整代码,仅供参考:
<asp:table id="table1" runat="server" cssclass="table" cellpadding="2" cellspacing="0">
<asp:tableheaderrow height="20" backcolor="#efebde" borderwidth="1" bordercolor="#c0c0c0">
<asp:tableheadercell backcolor="#efebde" borderwidth="1" bordercolor="#c0c0c0">
chinese name
</asp:tableheadercell>
<asp:tableheadercell backcolor="#efebde" borderwidth="1" bordercolor="#c0c0c0" width="50%">
english name
</asp:tableheadercell>
</asp:tableheaderrow>
<asp:tablerow height="20">
<asp:tablecell borderwidth="1" bordercolor="#c0c0c0">
<asp:textbox id="txt_cname" runat="server" cssclass="textbox" />
</asp:tablecell>
<asp:tablecell borderwidth="1" bordercolor="#c0c0c0">
<asp:textbox id="txt_ename" runat="server" cssclass="textbox" />
</asp:tablecell>
</asp:tablerow>
</asp:table>
<div style="margin-top: 3px; margin-bottom: 3px; padding: 3px;">
<asp:button id="buttoninsert" text="insert" runat="server" onclick="buttoninsert_click" />
<asp:button id="buttonupdate" text="update" runat="server" onclick="buttonupdate_click" />
<asp:button id="buttondelete" text="delete" runat="server" onclick="buttondelete_click"
causesvalidation="false" />
</div>
<asp:gridview id="gvcuttertype" runat="server" datakeynames="cuttertypeid" autogeneratecolumns="false"
cellpadding="2" cellspacing="0" width="100%" borderwidth="0" bordercolor="#c0c0c0"
rowstyle-height="20" showheader="false">
<columns>
<asp:templatefield>
<itemstyle borderwidth="1" bordercolor="#c0c0c0" width="1%" />
<itemtemplate>
<asp:checkbox id="checkbox1" runat="server" onclick="javascript:changerowbgcolor(this)" />
</itemtemplate>
</asp:templatefield>
<asp:templatefield>
<itemstyle borderwidth="1" bordercolor="#c0c0c0" />
<itemtemplate>
<asp:textbox id="txtcname" runat="server" text='<%# eval("cname") %>'></asp:textbox>
</itemtemplate>
</asp:templatefield>
<asp:templatefield>
<itemstyle borderwidth="1" bordercolor="#c0c0c0" width="50%" />
<itemtemplate>
<asp:textbox id="txtename" runat="server" text='<%# eval("ename") %>'></asp:textbox>
</itemtemplate>
</asp:templatefield>
</columns>
</asp:gridview>
xxx.aspx.cs:
protected void buttoninsert_click(object sender, eventargs e)
{
//do insert something
//obj.insert(......);
}
protected void buttonupdate_click(object sender, eventargs e)
{
//reference this url: http://www.cnblogs.com/insus/articles/1400150.html
}
protected void buttondelete_click(object sender, eventargs e)
{
// string datakeynames = xxx;
// string[] arr = datakeynames.substring(1).split(',');
try
{
foreach (string s in arr)
{
//obj.delter(s);
}
}
catch (exception ex)
{
//alert exception message
}
}
比如这个:现在insus.net把它改为下面这个样子:
这篇与前一篇改进部分,也许大家会留意到动画演示,主要是gridveiw的更新与删除会在每row都有。因此insus.net把它抽取出来,放在gridview外。致于一次性更新多笔记录,insus.net在很早之前已经录制过视频下载地址。还有一个就是删除,在每row第一列放了一个checkbox,让用户可以选择记录进行删除。
复制代码 代码如下:
<asp:templatefield>
<itemstyle borderwidth="1" bordercolor="#c0c0c0" width="1%" />
<itemtemplate>
<asp:checkbox id="checkbox1" runat="server" onclick="javascript:changerowbgcolor(this)" />
</itemtemplate>
</asp:templatefield>
删除前提示用户确认之后,再删除,但是在这里遇上一个问题,就是首先判断是否有选择记录,再confirm用户确认删除
还有一点要注意的地方,就是选择checkbox之后,行可以highlight,实现方可以参考:
以下较完整代码,仅供参考:
复制代码 代码如下:
<asp:table id="table1" runat="server" cssclass="table" cellpadding="2" cellspacing="0">
<asp:tableheaderrow height="20" backcolor="#efebde" borderwidth="1" bordercolor="#c0c0c0">
<asp:tableheadercell backcolor="#efebde" borderwidth="1" bordercolor="#c0c0c0">
chinese name
</asp:tableheadercell>
<asp:tableheadercell backcolor="#efebde" borderwidth="1" bordercolor="#c0c0c0" width="50%">
english name
</asp:tableheadercell>
</asp:tableheaderrow>
<asp:tablerow height="20">
<asp:tablecell borderwidth="1" bordercolor="#c0c0c0">
<asp:textbox id="txt_cname" runat="server" cssclass="textbox" />
</asp:tablecell>
<asp:tablecell borderwidth="1" bordercolor="#c0c0c0">
<asp:textbox id="txt_ename" runat="server" cssclass="textbox" />
</asp:tablecell>
</asp:tablerow>
</asp:table>
<div style="margin-top: 3px; margin-bottom: 3px; padding: 3px;">
<asp:button id="buttoninsert" text="insert" runat="server" onclick="buttoninsert_click" />
<asp:button id="buttonupdate" text="update" runat="server" onclick="buttonupdate_click" />
<asp:button id="buttondelete" text="delete" runat="server" onclick="buttondelete_click"
causesvalidation="false" />
</div>
<asp:gridview id="gvcuttertype" runat="server" datakeynames="cuttertypeid" autogeneratecolumns="false"
cellpadding="2" cellspacing="0" width="100%" borderwidth="0" bordercolor="#c0c0c0"
rowstyle-height="20" showheader="false">
<columns>
<asp:templatefield>
<itemstyle borderwidth="1" bordercolor="#c0c0c0" width="1%" />
<itemtemplate>
<asp:checkbox id="checkbox1" runat="server" onclick="javascript:changerowbgcolor(this)" />
</itemtemplate>
</asp:templatefield>
<asp:templatefield>
<itemstyle borderwidth="1" bordercolor="#c0c0c0" />
<itemtemplate>
<asp:textbox id="txtcname" runat="server" text='<%# eval("cname") %>'></asp:textbox>
</itemtemplate>
</asp:templatefield>
<asp:templatefield>
<itemstyle borderwidth="1" bordercolor="#c0c0c0" width="50%" />
<itemtemplate>
<asp:textbox id="txtename" runat="server" text='<%# eval("ename") %>'></asp:textbox>
</itemtemplate>
</asp:templatefield>
</columns>
</asp:gridview>
xxx.aspx.cs:
复制代码 代码如下:
protected void buttoninsert_click(object sender, eventargs e)
{
//do insert something
//obj.insert(......);
}
protected void buttonupdate_click(object sender, eventargs e)
{
//reference this url: http://www.cnblogs.com/insus/articles/1400150.html
}
protected void buttondelete_click(object sender, eventargs e)
{
// string datakeynames = xxx;
// string[] arr = datakeynames.substring(1).split(',');
try
{
foreach (string s in arr)
{
//obj.delter(s);
}
}
catch (exception ex)
{
//alert exception message
}
}
上一篇: jQuery源码学习笔记(一)
下一篇: Jquery学习笔记一