`
Supanccy2013
  • 浏览: 223409 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jgrid cellEdit 单元格编辑模式

阅读更多
cellEdit: 
 单元格编辑支持键盘操作,当选中某一单元格时,可以按上下、左右来切换选中 
 如果单元格可编辑,当我们按下Enter键或鼠标点击其他键时cell编辑后将被保存,除非我们按下Esc键 
 当cell被编辑过后,cell编程’dirty’数据,这时候在左上角会显示出一个红色标记 
 当我们点击可编辑的cell时,我们可以直接进入编辑状态 properties: 
1、有三个属性来设置cellEdit: 
cellEdit:当为true时,cell才可编辑,此时Multiselect(设置选择多行)则不可用,onSelectRow函数不可用 
cellsubmit:定义cell容器在那里被保存,’remote’或’clientArray’。如果是’remote’则数据会立刻通过cellUrl用Ajax方式传递到后台去处理,传递格式为:{id:rowed,mycell:cellvalue} 
cellurl: 设置cell编辑的url 
注意:在collmodel里对列属性进行定义的editrules{}里,所有的设置对cellEdit、inline、rowEdit均适用。 2、cellEdit编辑的几种事件 
   afterEditCell(rowed,cellname,value,iRow,iCol)    afterSaveCell(rowed,cellname,value,iRow,iCol) 
   afterSubmitCell(serverresponse,rowed,cellname,value,iRow,iCol)    beforeEidtCell(rowed,cellname,value,iRow,iCol)    beforeSaveCell(rowed,cellname,value,iRow,iCol)    beforeSubmitCell(rowed,cellname,value,iRow,iCol)    errorCell(serverresponse,statur) 
   onSelectCell(rowed,celname,value,iRow,iCol) 
这些事件在实际应用中拿出部分进行组合应用即可,其中onSelectCell只能应用于不可编辑的单元格 3、举例说明 
cellurl: pathname+'/xmlSaleTableEdit?openagent&oper=edit', //定义编辑cellEdit rul和editUrl不同,需要单独设置 
cellEdit: true,    //cell编辑时,此属性必须为true 
afterEditCell: function(rowid,cellname,value,iRow,iCol){   
var zk= jQuery("#list").getCell(rowid,"N_JinEr");//获取某一单元格的值    jQuery("#list").setCell(rowid,"N_JinEr",9000,{color:'red','text-align':'center'}); 
    }, 
afterSubmitCell:function(serverrepsponse,rowid,cellname,value,iRow,iCol){       var text=serverrepsponse.responseText;       var arr = text.split(";"); 



 


 

      if(arr[0].indexOf("true")!=-1){ 
      var num = parseFloat(arr[1]);                       
jQuery("#list").setCell(rowid,"N_JinEr",num ,{color:'red','text-align':'center'}); 
                } }, 
以上代码展示了cellEdit设置需要的代码。cellEdit功能的实现只需要设置cellEdit为true,并设置cellurl在后台写处理数据的程序即可。而要满足功能上的需要,还需要添加afterEditCell等事件。 
afterSubmitCell:提交完成后事件,serverrepsponse从后台返回数据,rowid选中行id, cellname 单元格name属性在colModel里设置,value cell的值,iRow index of the row,iCol the index of the column 
jQuery("#list").setCell(rowid,"N_JinEr",num ,{color:'red','text-align':'center'}//设行id为rowid,列名为’N_JinEr’的单元格值为num,样式设置为{color:'red','text-align':'center'}。 
afterSubmitCell处理了cellEdit编辑后,从后台取回数据并处理单元格值的过程,在实际情况下根据需要添加不同事件即可。
分享到:
评论

相关推荐

    解决layui-table单元格编辑只能text问题

    layui-table通过JavaScript事件监听来实现单元格的编辑,通常包括点击单元格触发编辑模式、获取和提交编辑后的数据等步骤。要添加新的编辑类型,我们需要对这些事件进行扩展,实现自定义的编辑控件。 1. **自定义...

    wpf DataGrid 实现单击单元格进入编辑状态

    默认情况下,DataGrid在用户双击单元格时进入编辑模式,但有时我们希望用户只需单击就能开始编辑,这能提高用户体验。 **二、单击编辑的实现** 要使DataGrid在单击单元格时进入编辑状态,我们需要覆盖其默认行为。...

    SWT Table单元格编辑功能

    ### SWT Table单元格编辑功能详解 在Java图形用户界面(GUI)开发中,SWT(Standard Widget Toolkit)是一个广泛使用的工具包,它提供了丰富的控件集合,用于构建高性能的桌面应用程序。其中,`Table`控件是SWT中最...

    Jquery datagrid实现单元格编辑

    为了使单元格编辑更加友好,我们可以设置一些额外的参数,如编辑模式、确认对话框等: ```javascript $("#myGrid").jqGrid('navGrid', '#pager', { // 添加导航栏 edit: true, // 启用编辑按钮 add: false, // ...

    DevExpress设置单元格不可编辑,选单元格则选中一行

    DevExpress设置单元格不可编辑,选单元格则选中一行,目的是只展示数据,不提供修改功能: DevexpressGridControl禁止点击单元格修改 设置GridView.OptionsBehavior的Editable选项设为False。在这种情况下,整个Grid...

    OWCSpreadsheet单元格编辑方式的改进

    在进行详细知识点说明之前,需要明确标题“OWCSpreadsheet单元格编辑方式的改进”与描述中提及的“VSTO开发中关于OWC组件使用Spreadsheet编程的技巧”实际上指的是在使用Office Web Components (OWC) 中的...

    bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

    Bootstrap Table实现X-Editable的行单元格编辑及解决数据Empty和支持多样式问题 本文着重解决X-Editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化。 一、...

    嵌套中的gridview单元格编辑

    6. **回显更改**:最后,你需要重新绑定子GridView以显示更新后的数据,并确保编辑模式已关闭,可以通过调用GridView的CancelEdit方法实现。 在实现这一功能的过程中,可能会遇到一些常见问题,比如如何正确获取和...

    GridView编辑单元格

    编辑GridView单元格 说明:单元格获取焦点,则单元格处于编辑状态,单元格失去焦点,则立即更新数据库。采用非Ajax技术。 1、访问Session中的数据 这个例子是用户使用Session中数据。鼠标点击编辑GridView单元格。...

    listview控件可编辑单元格

    在这个特定的项目中,“listview控件可编辑单元格”意味着我们有一个定制化的ListView,用户可以直接在ListView的列(或称为“项”)中编辑数据,而不仅仅是查看。这在数据录入或管理应用中非常实用,因为它提供了...

    jqgrid celledit

    在jqGrid 4.0版本中,单元格编辑模式(celledit)提供了一种交互式的用户界面,用户可以直接点击单元格进行编辑,而无需打开一个新的表单或弹出窗口。以下是关于jqGrid celledit模式的一些关键知识点: 1. **启用...

    Layui数据表格之单元格编辑方式

    本文主要介绍Layui数据表格中单元格的编辑功能,这对于提升用户交互体验和数据处理能力至关重要。 在使用Layui数据表格单元格编辑功能之前,首先需要确保已经在项目中引入了Layui的CSS和JavaScript脚本文件。这是...

    bootstrap table的x-editable实现单元格编辑及解决数据为Empty和支持多样式

    X-Editable 是一个与Bootstrap Table集成的插件,用于实现表格内单元格的编辑功能。在本文中,我们将深入探讨如何使用Bootstrap Table的X-Editable特性来实现单元格的编辑,以及如何处理数据为空和自定义样式的场景...

    QTableWidget编辑单元格内容,按下回车键使焦点转到下一个单元格

    在处理用户输入时,有时我们需要实现特定的行为,比如当用户在编辑单元格内容后按下回车键,焦点自动移动到下一个单元格。在标题和描述中提到的场景,就是这样一个功能的实现。 `QTableWidget` 默认情况下,按下...

    Easyui DataGrid单元格编辑_扩展代码

    详细代码展现了如何在Easyui中使用DataGrid的单元格的编辑功能并扩展

    富文本编辑器以及表格操作,可拉伸单元格宽度、增加行、增加列、合并单元格

    2. **拉伸单元格宽度**:在编辑器中,用户可以拖动表格的边框来调整单元格的宽度,以适应不同的显示需求。这种灵活性有助于确保内容的可读性和美观性。 3. **增加行和列**:当用户需要在现有表格中添加更多数据时,...

    list Control实现单元格编辑与插入Combo Box

    这篇Blog的工程补充。 http://blog.csdn.net/bizhu12/article/details/6570209# 主要有一点细节作者没有提到: ListCtrl控件的属性里,View要改成Report。

    可编辑单元格的CListCtrl控件

    接着,我们获取单元格的矩形位置,获取当前单元格的文本内容,将编辑框移动到单元格位置上,设置编辑框的文本内容,并显示编辑框,最后设置光标选中所有文本,以便用户可以立即开始编辑。 在编辑完成后,我们需要...

Global site tag (gtag.js) - Google Analytics