(原创)EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件

有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件

// 绑定事件, index为当前编辑行

var editors = $(‘#staffLogDetailGrid‘).datagrid(‘getEditors‘, index);     //获得当前行的编辑对象

console.info(editors[5]);  //editor[5]表示第五列这个控件

var sfgzEditor = editors[5];

sfgzEditor.target.bind(‘change‘,function () {

console.info("111");

console.info(sfgzEditor.target.val()); //sfgzEditor.target就是操作第五列控件对象

});

以上的edit类型是: ‘validatebox‘,如下所示;

editor : {

type : ‘validatebox‘,

options : {

required : true

}

}

绑定的是change事件;即单元格的内容改变时(无须失去焦点,只要内容改变就行了);

当然也可以绑定其他时间: 比如”blur”: 失去焦点的时候,实际中也有这种需求的, 比如一个单元格编辑完成后, 同时其他某些单元格的内容也会随之变化;

Bind是绑定的意识,即绑定事件的功能;

Change, blur, bind这些方法都在edit(Object).target里面; console.info(editors[5]);就可以在网页测试工具中查看到;

里面还有很多事件可以用

Type为‘validatebox‘的本人已经亲测过,是可以的; 可是type为’combobox’好像change和blur事件都无法正常触发;可是我看到 console.info(editors[5]);

输出的target 属性值为:

 
Object[input.combobox-f]

这是一个combobox对象;可以直接对其赋事件的; 所以代码如下:

// 绑定事件

var editors = $(‘#staffLogDetailGrid‘).datagrid(‘getEditors‘, lastIndex);

console.info(editors[3]);

var sfgzEditor = editors[3];

var sfgzCobobox = sfgzEditor.target;

console.info(sfgzCobobox);

sfgzCobobox.combobox({

onChange : function(n,o){

console.info("111");

}

});

这样就可以给type为combobox的edit绑定事件了;

时间: 2024-10-25 19:01:25

(原创)EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件的相关文章

EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件

有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = $('#staffLogDetailGrid').datagrid('getEditors', index); console.info(editors[5]); var sfgzEditor = editors[5]; sfgzEditor.target.bind('change',functio

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

Jquery easyui开启行编辑模式增删改操作

来源:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js

[转]Jquery easyui开启行编辑模式增删改操作

本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </table> 引入JS文件和CSS样式 <script src="http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.

jquery-easyui 中表格的行编辑功能

具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', width:660, height:250, singleSelect:true, idField:'itemid', url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',wi

Bash命令行编辑模式

Linux下Bash命令行编辑的默认模式是交互式emacs模式.切换模式: set -o emacs #设置emacs模式 set -o vi #设置vi模式 Bash命令行编辑模式

jquery-easyui中表格的行编辑功能

http://stworthy.iteye.com/blog/689080 datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: Js代码   $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', width:660, height:250, singleSelect:true, idField:'

给Jquery easyui 的datagrid 每行增加操作链接

我们都知道Jquery的Easy-UI的datagrid可以添加并且自定义Toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作.但实际项目里我们可能需要在每行后面加一些操作链接,最常见的就是比如"修改"."删除"."查看"之类.如下图: 凡事都怕但是!Easy-UI的Datagrid没有直接添加link的属性.查看Easy-UI的帮助文档,看到一个formater:格式化函数,可以对某一行进行格式化,然后通过

解决Ubuntu中vi命令的编辑模式下不能正常使用键盘问题

在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,会输出ABCD,以及退格键也不能正常删除字符.这是由于Ubuntu预装的是vim-tiny,而我们需要使用vim-full,解决方法很简单,只需要以下两步: 步骤一,输入下述命令以卸载vim-tiny: sudo apt-get remove vim-common 1 1 步骤二,输入下述命令以安装vim-full: sudo apt-get install vim