精华内容
下载资源
问答
  • EasyUI DataGrid 编辑单元格

    万次阅读 2016-03-13 21:36:24
    之前文章 EasyUI DataGrid可编辑单元格 实现可编辑单元格,如果有多列都需要可编辑 当点击一个单元格 则此整行都会进行编辑 如下图: 现改为单击某个单元格只对此单元格进行可编辑 标记添加 onClickCell ...

    之前文章 EasyUI DataGrid可编辑单元格 实现可编辑单元格,如果有多列都需要可编辑 当点击一个单元格 则此整行都会进行编辑

    如下图:

    这里写图片描述

    现改为单击某个单元格只对此单元格进行可编辑

    <TABLE>标记添加 onClickCell

    <table id="dg" class="easyui-datagrid" data-options="onClickCell: onClickCell">


    需要进行编辑的列上添加 editor

    <th data-options="field:'itemId',editor:'numberbox'"></th>

    也可以指定

    • 小数位数:editor:{type:’numberbox’,options:{precision:1}}

    • 文本类型:editor:’text’

    • checkbox:editor:{type:’checkbox’,options:{on:’启动’,off:’关闭’}}

    效果如下:

    这里写图片描述


    核心代码

    <script type="text/javascript">
    
    $.extend($.fn.datagrid.methods, {
        editCell : function(jq, param) {
            return jq.each(function() {
                var opts = $(this).datagrid('options');
                var fields = $(this).datagrid('getColumnFields', true).concat(
                        $(this).datagrid('getColumnFields'));
                for ( var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor1 = col.editor;
                    if (fields[i] != param.field) {
                        col.editor = null;
                    }
                }
                $(this).datagrid('beginEdit', param.index);
                for ( var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor = col.editor1;
                }
            });
        }
    });
    
    var editIndex = undefined;
    //结束编辑 
    function endEditing() {
        if (editIndex == undefined) {
            return true
        }
        if ($('#dg').datagrid('validateRow', editIndex)) {
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    //单击单元格 
    function onClickCell(index, field) {
        if (endEditing()) {
            $('#dg').datagrid('selectRow', index).datagrid('editCell', {
                index : index,
                field : field
            });
            editIndex = index;
        }
    }
    </script>

    在线演示

    作者:itmyhome

    展开全文
  • jqgrid 单元格编辑

    2019-09-12 07:22:20
    ` cellEdit: true, //启用单元格编辑功能, cellurl: _ctxPath + "/pfmcePlan/info/hrEffLeader/saveCell.do", loadComplete: function() { var table = th...

    ` cellEdit: true, //启用单元格编辑功能, cellurl: _ctxPath + "/pfmcePlan/info/hrEffLeader/saveCell.do",

        loadComplete: function() {
            var table = this;
            setTimeout(function() {
                updatePagerIcons(table);
                enableTooltips(table);
            }, 100);
        },
        afterSubmitCell: function() {
            console.log('>>>>test>222>>');
            return [true, "成功"]; // 必须返回 ture  or false,否则 下面的  afterSaveCell 方法执行不了的
        },
        afterSaveCell: function() {
            console.log('>>>>test>>333>');
    
    
        }`
    

    下面为cellSubmit设置为remote的循序

    formatCell (rowid, cellname, value, iRow, iCol) :切换到编辑模式前可以在这里修改单元格内容作为输入控件的值 beforeEditCell (rowid, cellname, value, iRow, iCol) :在单元格切换到编辑模式前触发事件 afterEditCell (rowid, cellname, value, iRow, iCol) :在单元格对应的输入控件加入DOM中触发事件 beforeSaveCell (rowid, cellname, value, iRow, iCol) :在单元格内容保存前触发,你可以在这个事件里面存储发往服务器的内容 beforeSubmitCell (rowid, cellname, value, iRow, iCol) :在数据发到服务器前触发,此方法可以返回json对象附加额外的数据 afterSubmitCell (serverresponse, rowid, cellname, value, iRow, iCol):保存单元格,服务器返回信息后触发,事件可以返回错误信息弹出显示错误的对话框 afterSaveCell (rowid, cellname, value, iRow, iCol) :单元格成功保存后触发 errorCell (serverresponse, status):当服务器返回非200状态出错时触发 (如403, 404, 500状态等) onSelectCell (rowid, celname, value, iRow, iCol) :在单元格切换为文本模式后触发

    这样 子就可以 直接在 单元格上面 修改编辑了。

    可是使用 表格 的单元格编辑的时候, 发现 有一个问题, 即点击 某个表格的某行的时候 并没有 高亮 或者 鲜明的 颜色 来标志, 目前 选择或者点击的是哪一行 即 SelectRow 方法就禁用了 。 这样用户体验不好。 要么 不用 jqgrid的 自动 的单元格方法, 自己 写自定义一个 单元格表的 。。 可是这样 就 比较麻烦了。 其实 可以 在 点击 该 行,未选中 这个方法之前, 将该 行的 背景颜色 变一下即可

    ...
     cellEdit: true, //启用单元格编辑功能,
            cellurl: _ctxPath + "/pfmcePlan/info/hrEffLeader/saveCell.do",
    
            loadComplete: function() {
                var table = this;
                setTimeout(function() {
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 100);
            },
            beforeSelectRow: function(rowid, e) {
                 // 将之前 选中的行的高亮 去掉   
                $("tr.ui-state-highlight").removeClass("ui-state-highlight");
                // 将当前点击的 行的 标注高 亮 
                $("tr#" + rowid).addClass("ui-state-highlight");
    
                return true;
    
            },
    

    转载于:https://my.oschina.net/ouminzy/blog/860758

    展开全文
  • 原文地址:http://www.codeproject.com/aspnet/EditGridviewCells.asp[原文源码下载][译者改后源码下载]介绍ASP.NET... 如果你EditItemTemplate的一些列使用了DropDownList控件,那么你也许不希望整个数据行都处于

    原文地址:http://www.codeproject.com/aspnet/EditGridviewCells.asp
    [原文源码下载]
    [译者改后源码下载]

    介绍
    ASP.NET的GridView控件允许你通过设置它的EditIndex属性来编辑数据行,此时整个数据行都处于编辑模式。 如果你在EditItemTemplate的一些列中使用了DropDownList控件,那么你也许不希望整个数据行都处于编辑模式。 因为,如果每一个DropDownList控件都有很多选项的话,那么一次加载所有DropDownList控件的所有选项就会导致页面执行缓慢。

    另外,如果你的数据行的编辑模式需要占用更多的空间的话,那么针对每一个独立的单元格进行编辑要优于针对整个数据行进行编辑。 这里,我将示范如何实现这样的功能,又如何去处理事件验证(event validation)。


    编辑某一个独立的GridView单元格。


    我所演示的这个GridView有一个不可见的asp:ButtonField控件,它处于GridView的第一列,名为“SingleClick”。 它用于给GridView的数据行增加单击事件。

    < Columns >                 
        
    < asp:ButtonField  Text ="SingleClick"  CommandName ="SingleClick"  Visible ="False"   />
    </ Columns >


    其它每一列的ItemTemplate中有一个可见的Label控件和一个不可见的TextBox或DropDownList控件。 为了方便,我们称Label为显示控件,TextBox或DropDownList为编辑控件。

         < asp:TemplateField  HeaderText ="Task" >
            
    < ItemTemplate >
                
    < asp:Label  ID ="DescriptionLabel"  runat ="server"  Text ='<%#  Eval("Description") % > '> </ asp:Label >
                
    < asp:TextBox  ID ="Description"  runat ="server"  Text ='<%#  Eval("Description") % > ' Width="175px" visible="false"> </ asp:TextBox >
            
    </ ItemTemplate >
        
    </ asp:TemplateField >


    这里的办法就是用显示控件来显示数据,当单元格所包含的显示控件被单击的时候,则把显示控件的Visible属性设置为false并且把编辑控件的Visible属性设置为true。 这里不用使用EditItemTemplat。

    在RowDataBound事件内循环为每一数据行的每一单元格增加单击事件。 使用单元格在数据行中的索引作为事件参数,这样在单元格触发了单击事件后我们就可以知道到底是哪个单元格被单击了。

         protected   void  GridView1_RowDataBound( object  sender, GridViewRowEventArgs e)
        
    {
            
    if (e.Row.RowType == DataControlRowType.DataRow)
            
    {
                
    // 从第一个单元格内获得LinkButton控件
                LinkButton _singleClickButton = (LinkButton)e.Row.Cells[0].Controls[0];
                
    // 返回一个字符串,表示对包含目标控件的 ID 和事件参数的回发函数的 JavaScript 调用
                string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");

                
    // 给每一个可编辑的单元格增加事件
                for (int columnIndex = _firstEditCellIndex; columnIndex < e.Row.Cells.Count; columnIndex++)
                
    {
                    
    // 增加列索引作为事件参数
                    string js = _jsSingle.Insert(_jsSingle.Length - 2, columnIndex.ToString());
                    
    // 给单元格增加onclick事件
                    e.Row.Cells[columnIndex].Attributes["onclick"= js;
                    
    // 给单元格增加鼠标经过时指针样式
                    e.Row.Cells[columnIndex].Attributes["style"+= "cursor:pointer;cursor:hand;"
                }
         
            }

        }


    在RowCommand事件内读出命令参数和事件参数。 这会告诉我们被选中的行和列的索引。

         int  _rowIndex  =   int .Parse(e.CommandArgument.ToString());      
        
    int  _columnIndex  =   int .Parse(Request.Form[ " __EVENTARGUMENT " ]);


    因为知道了被选中的行和列的索引,所以可以通过把显示控件的Visible设置为false,编辑控件的Visible设置为true来把某个独立的单元格设置为编辑模式。 然后通过清除单元格的属性来删除被选中单元格的单击事件。

         //  获得被选中单元格的显示控件并设置其不可见
        Control _displayControl  =  _gridView.Rows[_rowIndex].Cells[_columnIndex].Controls[ 1 ]; 
        _displayControl.Visible 
    =   false ;
        
    //  获得被选中单元格的编辑控件并设置其可见
        Control _editControl  =  _gridView.Rows[_rowIndex].Cells[_columnIndex].Controls[ 3 ];
        _editControl.Visible 
    =   true ;
        
    //  清除被选中单元格属性以删除click事件
        _gridView.Rows[_rowIndex].Cells[_columnIndex].Attributes.Clear();


    下面有一些代码用于回发服务器后设置焦点到编辑控件,如果编辑控件是DropDownList的话,那么它的SelectedValue要设置为显示控件的值,如果编辑控件是TextBox的话,那么为了做好编辑的准备就要使它的文本被选中。

         //  设置焦点到被选中的编辑控件
        ClientScript.RegisterStartupScript(GetType(),  " SetFocus "
            
    " <script>document.getElementById(' "   +  _editControl.ClientID  +   " ').focus();</script> " );
        
    //  如果编辑控件是DropDownList的话
        
    //  SelectedValue设置为显示控件的值
         if  (_editControl  is  DropDownList  &&  _displayControl  is  Label)
        
    {
            ((DropDownList)_editControl).SelectedValue 
    = ((Label)_displayControl).Text;
        }
                     
        
    //  如果编辑控件是TextBox的话则选中文本框内文本
         if  (_editControl  is  TextBox)
        
    {
           ((TextBox)_editControl).Attributes.Add(
    "onfocus""this.select()");
        }


    在这个Demo中,我把事件被触发的历史记录也写到了页里。

    如果GridView处于编辑模式的话,那么要在RowUpdating事件里去查找被选中行的每一个单元格。 如果发现单元格处于编辑模式的话,那么就调用“更新”代码。 在这个Demo中,数据保存在DataTable里,而这个DataTable则储存在session中。

         //  循环每一列以找到处于编辑模式下的单元格
         for  ( int  i  =   1 ; i  <  _gridView.Columns.Count; i ++ )
        
    {
            
    // 获得单元格的编辑控件
            Control _editControl = _gridView.Rows[e.RowIndex].Cells[i].Controls[3];
            
    if (_editControl.Visible)
            
    {
               . update the data
            }

        }


    为了确保RowUpdating事件在编辑单元格后被激发,要在Page_Load中来触发这个事件。 编辑了TextBox后,通过按回车键或者单击另一单元格来使页面做回发处理,下面的这段代码就是用于确保任何数据的改变都会被更新。

         if  ( this .GridView1.SelectedIndex  >   - 1 )
        
    {
            
    this.GridView1.UpdateRow(this.GridView1.SelectedIndex, false);
        }
       



    为了验证而注册回发和回调数据
    在RowDataBound中创建的自定义事件必须要在页中注册。 通过重写Render方法来调用ClientScriptManager.RegisterForEventValidation。 通过GridViewRow.UniqueID返回行的唯一ID,按纽的唯一ID通过在行的唯一ID后附加“$ct100”而生成。

         protected   override   void  Render(HtmlTextWriter writer)
        
    {
            
    foreach (GridViewRow r in GridView1.Rows)
            
    {
                
    if (r.RowType == DataControlRowType.DataRow)
                
    {
                    
    for (int columnIndex = _firstEditCellIndex; columnIndex < r.Cells.Count; columnIndex++)
                    
    {
                        Page.ClientScript.RegisterForEventValidation(r.UniqueID 
    + "$ctl00", columnIndex.ToString());
                    }

                }

            }

          
            
    base.Render(writer);
        }


    这将防止任何“回发或回调参数无效”的错误。


    这个Demo中的其它示例
    使用SQL数据源控件编辑某一独立的GridView单元格
    用SqlDataSouce控件实现这个技术需要对GridView的RowUpdating事件做一些修改。 当更新GridView的行的时候,SqlDataSource控件一般要把值(values)从EditItemTemplate转移到NewValues集合里。 因为我们没有使用EditItemTemplate,所以这种情况下值(values)不会自动地转移到NewValues集合里。

        e.NewValues.Add(key, value);


    我在App_Data文件夹下使用了一个简单的SQL Server Express数据库。 (要使用你自己的数据库的话,你可以修改web.config里的连接字符串)


    使用对象数据源控件编辑某一独立的GridView单元格
    本示例使用了App_Code文件夹内的两个类:
        ·Task.cs – 任务对象
        ·TaskDataAccess.cs – 管理任务对象

    Aspx页的后置代码与SQL Data Source示例是一样的。 ObjectDataSource通过TaskDataAccess.cs类里的GetTasks和UpdateTask方法来管理数据。


    有着电子数据表样式的GridView
    这里有一个与电子数据表的样式很像的GridView。 (虽然它看起来像一个电子数据表,但是并不是真的有像电子数据表一样的功能,它仍然是一个GridView。)

    这里虽然有一些单击后改变单元格样式的附加代码,但是主要的代码还是与上面所述是相同的。



    用SQL数据源控件实现有着电子数据表样式的GridView
    本示例与上面的基本相同,但是它修改了GridView的RowUpdating事件以使其允许用SqlDataSource控件来工作。 

    展开全文
  • GridView 单元格值

    2008-04-11 14:29:00
    一般要取得 GridView 单元格值,都是要指定该单元格所在的行列索引,根据单元格在浏览或编辑模式下,需要使用不同的方式来获取。例如有一个“地区”的 BoundField,它是 GridView 的第3列,浏览模式下取得...
    一般要取得 GridView 中的单元格值,都是要指定该单元格所在的行列索引,根据单元格在浏览或编辑模式下,需要使用不同的方式来获取。
    

    例如有一个“地区”的 BoundField,它是 GridView 中的第3列,在浏览模式下取得“地区”列的值,如下:

    GridViewRow.Cells(3).Text

    如果是在编辑模式时,因为该列值是在 Cell 中的 TextBox中,所以要使用下列方式来提取编辑时“地区”列的值,如下:

    CType(oRow.Cells(3).Controls(0), TextBox).Text

    以上获取 GridView 单元格值的没有良好的通用性,只要改变列顺序或变更列的类型(例如变成 TemplateField),这样程序很容易就发生错误,如果有变化则程序也需要随时修改。

    为了在实际应用中解决这个问题,经过几种方式的对比,感觉比较好的方式是以列名来提取值。DataControlField 有一个 ExtractValuesFromCell 方法,不论是浏览或编辑模式都可以简单的取出 Cell 的对应的列,也不用去管它使用那一种 DataControlField (BoundField 、 CheckBoxField 或 TemplateField ) 都可以正确的取得对应的单元格值。

    下面的程序示例就是通过 ExtractRowValues 函数获取出 GridView 指定单元格的值。
    C#.NET:
    程序代码 程序代码
    private orderedDictionary ExtractRowValues(DataControlFieldCollection Columns, GridViewRow Row)
        {
            orderedDictionary oFieldValues;
            orderedDictionary oDictionary;
            DataControlField oColumn;
            
            oFieldValues = new orderedDictionary(Columns.Count);
            oDictionary = new orderedDictionary();

            for (int i = 0; i < Columns.Count; i++)
            {
                oColumn = Columns[i];
                if (oColumn.Visible)
                {
                    oDictionary.Clear();
                    oColumn.ExtractValuesFromCell(oDictionary, (DataControlFieldCell)Row.Cells[i], Row.RowState, true);
                    foreach (DictionaryEntry oEntry in oDictionary)
                    {
                        oFieldValues.Add(oEntry.Key, oEntry.Value);
                    }
                }
            }

            return oFieldValues;
        }
        
        protected void Button1_Click(Object sender, EventArgs e)
        {
            GridViewRow orow;
            System.Collections.Specialized.OrderedDictionary oFieldValues;
            orow = (GridViewRow)GridView1.Rows[1];
            oFieldValues = ExtractRowValues(GridView1.Columns, orow);

            //输出 “地区”名
            this.Response.Write(oFieldValues["地区"].ToString());
        }
     
    展开全文
  • //table.render({})设置该列 { field: 'app_name', title: '名称', edit:true //此项使该列能够点击编辑 }, 监听(单元格编辑,且发生改变时触发) table.on('edit(test)', function(obj){ //注:edit...
  • Jface TableViewer控件实现的对标签文件的标签属性的修改功能。 用TextCellEditor和ComboBoxCellEditor给表格添加编辑功能。...如要应用到实际项目当中还需改变判断条件和TableViewer控件获得的
  • layui table组件edit编辑事件获取单元格改之前的 table.on('edit(demo)',function (obj) { // 获取单元格编辑之前td的选择器 var selector = obj.tr.selector+' td[data-field="'+... // 单元格编辑之前的 ...
  • Posted on 2007-04-22 20:45 webabcd 阅读(17302) 评论(119)编辑收藏原文地址:...GridView针对鼠标单击的某一独立单元格进行编辑 <br />原文发布日期:2007.04.07 作者:Declan Bright<br
  • gridview 单元格单击编辑

    千次阅读 2014-08-01 16:19:07
    // 如果单元格处于编辑模式的话,那么从编辑控件获取 if (_editControl.Visible) { if (_editControl is TextBox) { value = ((TextBox)_editControl).Text; } else if (_editControl is DropDownList) ...
  • 原文地址:http://www.codeproject.com/KB/webforms/EditGridviewCells.aspx[原文源码下载][译者改后源码下载][翻译]GridView针对鼠标单击的某一独立单元格进行编辑原文发布日期:2007.04.07作者:Declan Bright...
  • jqGrid单元格编辑配置,事件及方法

    万次阅读 2013-11-13 14:49:51
    单元格编辑提供给用户修改一行的单个单元格内容的功能,开发者可以通过ajax或者单元格编辑事件对修改的数据进行处理。 通过下面的行为,单元格编辑支持键盘导航和执行单元格编辑操作 点击一个不可编辑的...
  • 是否启用单元格编辑。设置为true,onSelectRow事件不能使用,鼠标悬停也会被禁用(鼠标悬停在行上) false cellsubmit string 配置单元格内容保存位置,可用'remote' 或者'clientArray' 1)设置为remote...
  • Nettable单元格编辑功能API

    千次阅读 2015-10-28 15:58:18
    Nettable单元格编辑功能API
  • 自定义单元格验证要求:验证错误后焦点不离开。实现:单元格的验证可以使用dgv_details_CellValidating事件。验证不通过时调用e.Cancel = true;终止事件链,单元格将保持编辑状态。调用dgv_details.CancelEdit();...
  • 获取修改前的 table.on('edit(demo)',function (obj) { // 获取单元格编辑之前td的选择器 var selector = obj.tr.selector+' td[data-field="'+obj.field+... // 单元格编辑之前的 var oldtext = $(selector...
  • '设置单元格中 GridView.SetRowCellValue(GridView.FocusedRowHandle, GridView.Columns("列名"),"要设置的") '得到单元格中 Me.GridView_Analysis.GetRowCellValue(GridView....
  • 错误值利用8.追踪公式利用9.追踪错误 Exceld的公式 1.概念 用数学符号表示各个量之间关系的式子。具有普遍性,适合于同类关系的所有问题。 2.作用 思考: (1)工作簿和工作簿之间有关系吗? (2)工作表和工作表...
  • Excel的单元格中产生随机数

    万次阅读 2013-11-10 23:05:42
    电子表格RAND()函数的取值范围是0到1,公式如下: =RAND()   如果取值范围是1到2,公式如下: =RAND()*(2-1)+1 ...生成一随机数,并且使之不随单元格计算而改变,可以在编辑输入“=RAND
  • 一“”设置单个单元格禁用或者可用: ...属性 说明 类型 默认值 getValueFromEvent 指定如何从事件获取,可以把 onChange 的参数(如 event)转化为控件的 function(…args) initialValue 子
  • 日常录入EXCEL表格的单元格里 ,我们输入一些一般性的日期内容,如:2017-10-17 或 2017/10/17时,EXCEL会自动识别为日期并按单元格设计格式显示,单元格中存储的也是日期格式的。 但我们进行不规范的日期...
  • 比如说,向定义为数字型列的单元格输入英文字母时,「DataGridView 的既定错误对话框」对话框就会表示出来,当例外发生时通知用户的一种方式。当用户没有输入正确的时就会有对话框显示,对于用户来说可能根本就不...
  • 当你编辑单元格的时候输入数据后直接回车会触发单元格编辑完成的事件,或者当你编辑完让此单元格失去焦点后触发,但这有个前提条件 就是单元格里输入有效才会触发。我做的是当单元格失去焦点后触发事件,然后对...
  • 比如说,向定义为数字型列的单元格输入英文字母时,「DataGridView 的既定错误对话框」对话框就会表示出来,当例外发生时通知用户的一种方式。当用户没有输入正确的时就会有对话框显示,对于用户来说可能根本就不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,792
精华内容 5,116
关键字:

值错误在单元格中编辑