一段实现datagrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新 选择自 brownyu 的 blog
关键字 一段实现datagrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新
出处
一段实现datagrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新
<script language="javascript">
var selectrow="";
var selectobject;
function editcell(thisobject,type)
{
var id = thisobject.id;
var buttonid="button"+type;
var row=id.replace(buttonid,"");
if(type==1&&selectrow.length>0&&selectobject!=null)
{
editrow(selectrow,2,selectobject);
selectrow="";
}
if(type==1){selectrow=row;selectobject=thisobject;}else{selectrow="";selectobject=null;}
editrow(row,type,thisobject);
}
function editrow(row,type,thisobject)
{
var visible1="none";
var visible2="inline";
if(type!=1)
{
visible1="inline";
visible2="none";
}
var buttonid="button"+type;
var style;
var i;
for(i=1;i<8;i++)
{
var name1=row+"img"+i;
document.all[name1].getattribute("style").display=visible1;
name1=row+"text"+i;
var name2=row+"checkbox"+i;
document.all[name2].getattribute("style").display=visible2;
if(type!=1)
{
if(document.all[name1].value==1)
document.all[name2].checked=true;
else
document.all[name2].checked=false;
}
}
var tdindex = thisobject.parentelement.cellindex;
if(type>1) tdindex = tdindex -1;
thisobject.parentelement.parentelement.cells[tdindex].getattribute("style").display=visible2;
thisobject.parentelement.colspan=type;
var name;
name=row+buttonid;
document.all[name].getattribute("style").display="none";
if(type==1)
{
document.all[name].parentelement.parentelement.getattribute("style").backgroundcolor="lightyellow";
name=row+"button2";
document.all[name].getattribute("style").display="inline";
}
else
{
document.all[name].parentelement.parentelement.getattribute("style").backgroundcolor="";
name=row+"button1";
document.all[name].getattribute("style").display="inline";
}
}
</script>
<asp:datagrid id="griditem" runat="server" cellpadding="0" borderstyle="solid" autogeneratecolumns="false"
width="100%" allowpaging="true">
<selecteditemstyle backcolor="lightyellow"></selecteditemstyle>
<edititemstyle cssclass="tdbg-dark" backcolor="ivory"></edititemstyle>
<itemstyle horizontalalign="center" height="23px" cssclass="tdbg"></itemstyle>
<headerstyle horizontalalign="center" height="25px" cssclass="summary-title"></headerstyle>
<columns>
<asp:boundcolumn datafield="id" readonly="true" headertext="人员编号">
<headerstyle width="120px"></headerstyle>
</asp:boundcolumn>
<asp:boundcolumn readonly="true" headertext="姓名">
<headerstyle width="120px"></headerstyle>
</asp:boundcolumn>
<asp:templatecolumn headertext="管理权">
<headerstyle width="60px"></headerstyle>
<itemtemplate>
<img id="img1" style="display: inline" alt="" src="images/checkboxunselect.gif" runat="server"><input id="checkbox1" style="display: none" type="checkbox" runat="server">
<input id="text1" type="text" runat="server" style="display: none">
</itemtemplate>
</asp:templatecolumn>
<asp:templatecolumn headertext="查询权">
<headerstyle width="60px"></headerstyle>
<itemtemplate>
<img id="img2" style="display: inline" alt="" src="images/checkboxunselect.gif" runat="server"><input id="checkbox2" style="display: none" type="checkbox" runat="server" name="checkbox2">
<input id="text2" type="text" runat="server" style="display: none" name="text2">
</itemtemplate>
</asp:templatecolumn>
<asp:templatecolumn headertext="录入权">
<headerstyle width="60px"></headerstyle>
<itemtemplate>
<img id="img3" style="display: inline" alt="" src="images/checkboxunselect.gif" runat="server"><input id="checkbox3" style="display: none" type="checkbox" runat="server" name="checkbox3">
<input id="text3" type="text" runat="server" style="display: none" name="text3">
</itemtemplate>
</asp:templatecolumn>
<asp:templatecolumn headertext="修改权">
<headerstyle width="60px"></headerstyle>
<itemtemplate>
<img id="img4" style="display: inline" alt="" src="images/checkboxunselect.gif" runat="server"><input id="checkbox4" style="display: none" type="checkbox" runat="server" name="checkbox4">
<input id="text4" type="text" runat="server" style="display: none" name="text4">
</itemtemplate>
</asp:templatecolumn>
<asp:templatecolumn headertext="删除权">
<headerstyle width="60px"></headerstyle>
<itemtemplate>
<img id="img5" style="display: inline" alt="" src="images/checkboxunselect.gif" runat="server"><input id="checkbox5" style="display: none" type="checkbox" runat="server" name="checkbox5">
<input id="text5" type="text" runat="server" style="display: none" name="text5">
</itemtemplate>
</asp:templatecolumn>
<asp:templatecolumn headertext="导出权">
<headerstyle width="60px"></headerstyle>
<itemtemplate>
<img id="img6" style="display: inline" alt="" src="images/checkboxunselect.gif" runat="server"><input id="checkbox6" style="display: none" type="checkbox" runat="server" name="checkbox6">
<input id="text6" type="text" runat="server" style="display: none" name="text6">
</itemtemplate>
</asp:templatecolumn>
<asp:templatecolumn headertext="导入权">
<headerstyle width="60px"></headerstyle>
<itemtemplate>
<img id="img7" style="display: inline" alt="" src="images/checkboxunselect.gif" runat="server"><input id="checkbox7" style="display: none" type="checkbox" runat="server" name="checkbox7">
<input id="text7" type="text" runat="server" style="display: none" name="text7">
</itemtemplate>
</asp:templatecolumn>
<asp:buttoncolumn text="保存" headertext="操作" commandname="cmdsave">
<itemstyle font-size="10pt"></itemstyle>
</asp:buttoncolumn>
<asp:templatecolumn>
<itemtemplate>
<input id="button1" style="cursor: hand; width: 35px; color: blue; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; text-decoration: underline; border-bottom-style: none"
onclick="editcell(this,1);" type="button" value="编辑" runat="server"><input id="button2" style="cursor: hand; display: none; color: blue; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; text-decoration: underline; border-bottom-style: none"
onclick="editcell(this,2);" type="button" value="取消" runat="server">
</itemtemplate>
</asp:templatecolumn>
</columns>
<pagerstyle nextpagetext="下一页" prevpagetext="上一页"></pagerstyle>
</asp:datagrid>