一段实现DataGrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新

原创 2004年10月28日 09:31:00
<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>

一段实现DataGrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新

 一段实现DataGrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新var selectRow="";var selectObject;function EditCell(thisObject...
  • luoboqingcai
  • luoboqingcai
  • 2004年11月25日 07:39
  • 883

datagrid编辑,取消,删除,修改

  protected void DataGrid1_EditCommand(object source, DataGridCommandEventArgs e)    {        DataGr...
  • zhijie_hao
  • zhijie_hao
  • 2007年03月20日 11:28
  • 637

easyui datagrid 行编辑功能(行内编辑、删除、保存、取消)

function initTT() { $("#tt").datagrid({ title: '批次', url: '', method: 'ge...
  • xuezt
  • xuezt
  • 2015年05月14日 22:48
  • 9342

easyui data-grid 实现行内编辑 多选操作 功能

1、datagrid配合单元格编辑的部分 配置datagrid属性: onDblClickCell:onDblClickCell, onEndEdit:onEndEdit var dg...
  • duchang110
  • duchang110
  • 2017年10月16日 13:49
  • 196

dataGrid 编辑 更新 删除 取消

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We...
  • zh134838
  • zh134838
  • 2015年06月08日 21:01
  • 298

编辑DataGrid控件(一)

在DataGrid中任何位置添加就可以进行就地编辑,其中可以在EditCommandColumn中设置EditText,CancelText和UpdateText等属性,就可以对DataGird进行就...
  • So_CooL
  • So_CooL
  • 2006年05月20日 14:07
  • 1067

easyui实现datagrid行内编辑

easyui的datagrid行内编辑对于修改信息而言比较方便直观,下面举例说明:  需求说明:  在行内编辑员工状态    一、编辑jsp  Html代码   ...         ...
  • dotedy
  • dotedy
  • 2015年10月16日 01:07
  • 2893

flex中dataGrid的编辑功能

在flex的dataGrid中,很多情况下列是需要嵌入其他的控制的,比如:checkbox,combox等,此时需要利用dataGrid的如下功能:1.datagrid编辑功能简介    当我们点击d...
  • wuyan520
  • wuyan520
  • 2010年04月10日 10:51
  • 12706

easyui datagrid 设置可编辑行

var Address = [{ "value": "1", "text": "CHINA" }, { "value": "2", "text": "USA" }, { "value": "3"...
  • gengyazhou123
  • gengyazhou123
  • 2016年07月12日 22:56
  • 4328

Easyui - datagrid 列编辑

转载链接:http://www.cnblogs.com/kexb/p/3685913.html 做个记录,方便以后使用,直接copy代码的前提是你要有对应的数据哦 要注意的几个数据:表的i...
  • yangligao_
  • yangligao_
  • 2015年08月12日 17:37
  • 1775
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一段实现DataGrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新
举报原因:
原因补充:

(最多只允许输入30个字)