一段实现DataGrid的“编辑”、“取消”功能脚本[无刷新]

datagrid|脚本|刷新|无刷新

一段实现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=http://www.163design.net/n/a/"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=http://www.163design.net/n/a/"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=http://www.163design.net/n/a/"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=http://www.163design.net/n/a/"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=http://www.163design.net/n/a/"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=http://www.163design.net/n/a/"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=http://www.163design.net/n/a/"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>

时间： 2024-10-23 02:21:49

一段实现DataGrid的“编辑”、“取消”功能脚本[无刷新]的相关文章

ASP.NET中利用DataGrid的自定义分页功能

asp.net|datagrid|分页 ASP.NET中利用DataGrid的自定义分页功能和存储过程结合实现高效分页 ASP.Net中的DataGrid有内置分页功能, 但是它的默认的分页方式效率是很低的,特别是在数据量很大的时候,用它内置的分页功能几乎是不可能的事,因为它会把所有的数据从数据库读出来再进行分页, 这种只选取了一小部分而丢掉大部分的方法是不可去取的. 在最进的一个项目中因为一个管理页面要管理的数据量非常大,所以必须分页显示,并且不能用DataGrid的内置分页功能,于是自己实现

Android 编辑头像功能简单实现实例（图片选取，裁剪）

本文介绍了Android 编辑头像功能的简单实例,可以实现拍照,图片选取,裁剪. 拍照 public static void startCamera(Fragment fragment){ File file=new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM)+ File.separator+"user_icon.jpg"); Intent intent=new Inten

Word 2010的放弃编辑数据功能

在Word 2010文档中,用户可以启用"放弃编辑数据"功能,从而删除用于将已编辑的图片还原到其原始状态的数据,以减小包含图片的Word文件的大小,具体操作步骤如下所述: 第1步,打开Word 2010文档窗口,依次单击"文件"→"选项"按钮,如图2012010803所示. 图2012010803 单击"选项"按钮 第2步,打开"Word选项"对话框,切换到"高级"选项卡.在"

datagrid不可编辑行有关问题的控制方法

 datagrid不可编辑行一个更简单的办法,editable="true",然后直接把itemEditBegin给停掉阻止createItemEditor的调用 ------解决方案--------------------  写renderer呗,renderer里可以拿到你点的这个cell是第几行和第几列,根据行列改变DataGrid的editable属性,给你一个思路:  1.renderer里监听点击事件:  2.事件处理函数中从listDatadata取出行列index,进行

AngularJS表单编辑提交功能实例

 这篇文章主要介绍了AngularJS表单编辑提交功能实例,本文讲解如何修改表单的默认值,需要的朋友可以参考下     研究了下高大上的AngularJS决定试试它的表单编辑提交功能,据说比JQuery强的不是一星半点. 好奇呀,试试吧.....搞了好久,尼玛...靠..靠..靠..尼玛 ..靠..靠....好吧,谁让我手欠呢. 模仿着我要搞了个AngularJS Form,但是问题来了.... 发现初始化时候ng-model 跟 input 标签里的 value 不默契,冲突.. 后来想再An

wpf datagrid进入编辑模式

问题描述 wpf datagrid进入编辑模式 请教,wpf的datagrid怎么禁止双击某自定义列进入(退出)编辑模式,而是点击列中的button进入编辑模式, 解决方案 默认将每列设置成只读的 当点击button,再将此行设置成可编辑即可 解决方案二: 设置成可编辑后,在单元格的空白处点击会退出编辑模式的.单元格里有三个button

wpf datagrid 进入编辑模式的方式

问题描述 wpf datagrid 进入编辑模式的方式 请教,wpf的datagrid怎么禁止双击某自定义列进入(退出)编辑模式,而是点击列中的button进入编辑模式 解决方案 在doubleclick中禁用下

请问在winform中,如何点击datagrid进行编辑,并在编辑的文本框下方出现datagrid 或者日期选择控件?我现在用的是vs.net2003

问题描述 请问在winform中,如何点击datagrid进行编辑,并在编辑的文本框下方出现datagrid或者日期选择控件?我现在用的是vs.net2003 解决方案 解决方案二:参考这个解决方案三:友情up解决方案四:大家帮帮忙啊!解决就结分解决方案五:可用Devexpress控件包的CXGrid控件轻松搞定.解决方案六:不要用.net1.1来做winform,根本就不合适.解决方案七:添加模板列就可以了

用一段js程序来实现动画功能_javascript技巧

自从ie对flash的显示方式进行改变后,flash这个东西一下子变成了一个鸡肋. 许许多多的网站都撤掉了以前的flash动画,改用一段js程序来实现动画功能. csdn首页也是如此..我无聊,自己写了一个,特点如下: 1.对搜索引擎友好 2.对美工友好,因为数据和代码是分开的,完全不懂js的都可以用fontpage修改动画内容 可以把js代码保存为一个文件 然后<script src="1.js"></script>,然后无须修改代码一个字母 就可以在多个页面