`
流浪鱼
  • 浏览: 1682147 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

datagrid扩展editor

js 
阅读更多

easyui1.2.4支持了数据编辑功能,但提供的东西有限,所以需要自己进行扩展。下面是扩展一个datetimebox的编辑器。

$.extend($.fn.datagrid.defaults.editors, {
     datetimebox: {//datetimebox就是你要自定义editor的名称
         init: function(container, options){
             var input = $('<input class="easyuidatetimebox">').appendTo(container);
             return input.datetimebox({
                 formatter:function(date){
                     return new Date(date).format("yyyy-MM-dd hh:mm:ss");
                 }
             });
         },
         getValue: function(target){
             return $(target).parent().find('input.combo-value').val();
         },
         setValue: function(target, value){
             $(target).datetimebox("setValue",value);
         },
        resize: function(target, width){
             var input = $(target);
             if ($.boxModel == true){
                 input.width(width - (input.outerWidth() - input.width()));
             } else {
                 input.width(width);
             }
         }
     }

 });

 自己测试过的代码

$.extend($.fn.datagrid.defaults.editors, {   
			datetimebox :{   
				init: function(container, options){   
					var input = $('<input class="easyuidatetimebox">').appendTo(container);
					 return input.datetimebox();  
				},   
				getValue: function(target){   
					return $(target).datetimebox("getValue");   
				},   
				setValue: function(target, value){   
					$(target).datetimebox("setValue",value);
				},   
				resize: function(target, width){   
					var input = $(target);   
					if ($.boxModel == true){   
						input.width(width - (input.outerWidth() - input.width()));   
					} else {   
						input.width(width);   
					}   
				}   
			}   
		}); 

 

分享到:
评论
1 楼 jetaime 2012-08-14  
您好:

    能给我一个扩展editor的完整的例子不? 我引用扩展的editor没有效果

相关推荐

    easyui的datagrid中editor和combobox的级联

    ### easyui的datagrid中editor和combobox的级联 在前端开发中,easyui是一个非常实用的库,它提供了一套完整的用户界面组件,能够帮助开发者快速构建出功能丰富的Web应用。其中,`datagrid`是easyui提供的一个重要...

    easyui的datagrid中editor和combogrid的结合使用

    - 使用`$.extend`方法扩展datagrid默认的editors,将`combogrid`添加到其中。 ```javascript $.extend($.fn.datagrid.defaults.editors, { combogrid: { init: function(container, options) { var input = $...

    easyui 可编辑datagrid完整例子,支持filebox

    总的来说,这个例子展示了如何利用 EasyUI 的 datagrid 和 filebox 扩展来创建一个具有文件上传功能的可编辑数据表,并通过 Java 后端与 MySQL 数据库协同工作。开发人员可以从这个例子中学到如何集成这些组件,实现...

    easyui datagrid 自定义编辑器 colorpickerEditor

    在DataGrid的列定义中,我们通过`editor`属性指定使用`colorpickerEditor`。假设我们有一列名为`color`的数据字段,可以这样设置: ```javascript columns: [{ field: 'color', title: '颜色', editor: { type:...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    datagrid中编辑状态(editor)下一列嵌入多个控件

    本文将详细介绍如何在easyUI的`datagrid`控件中通过自定义编辑器(editor)实现在一个单元格中放置多个输入控件。 #### 二、实现原理 在easyUI框架中,`datagrid`提供了编辑器功能来对表格中的单元格进行编辑操作...

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    标题 "EasyUI可扩展Editable DataGrid(可编辑数据表格)" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了一系列预定义的CSS样式和...

    简介EasyUI datagrid editor combogrid搜索框的实现

    首先,为了使DataGrid的编辑器支持Combogrid,我们需要扩展DataGrid的默认编辑器。扩展代码如下: ```javascript $.extend($.fn.datagrid.defaults.editors, { combogrid: { init: function (container, options)...

    Easyui-datagrid编辑模式详解

    在 EasyUI 中,可以通过扩展 $.fn.datagrid.defaults.editors 对象来自定义编辑器。例如,创建一个 checkbox 类型的编辑器: ```javascript $.extend($.fn.datagrid.defaults.editors, { checkbox: { // 自定义...

    jQuery Easyui学习之datagrid 动态添加、移除editor

    使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者...//扩展datagrid:动态添加删除editor $.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param

    easyui datagrid实现实现上下左右和回车切换单元格

    根据提供的文件信息,本文将详细解释如何...通过扩展 DataGrid 的方法,我们可以方便地为 DataGrid 添加更丰富的交互功能,从而提升用户体验。在实际开发过程中,可以根据具体需求调整代码逻辑,以适应不同的应用场景。

    easyui datagrid 行编辑中combogrid和combobox显示问题

    修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...

    JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

    ### 扩展editor的方法 在JQuery EasyUI datagrid中,可以对编辑器进行扩展,以实现更多自定义的编辑功能。例如,可以自定义日期时间编辑器(`datetimebox`),或者对文本编辑器添加验证规则。在扩展时,可通过`...

    easyui-datagrid12-demo.zip

    在描述中提到的 "easyui-datagrid" 和 "edtabledatagrid",它们可能是两个不同的实现方式或者扩展版本。EasyUI 的 DataGrid 默认提供了一些基本操作,而 "edtabledatagrid" 可能是指一个定制或增强的版本,专门用于...

    easyuiDataGrid绑定

    8. **扩展功能**:DataGrid还可以结合EasyUI的其他组件,如Toolbar,提供添加、删除、搜索等功能按钮,通过`toolbar`属性配置。 总的来说,EasyUI的DataGrid是构建数据驱动的Web应用的强大工具,它的灵活性和易用性...

    第32章 DataGrid(数据表格)组件[5]1

    通过扩展`$.fn.datagrid.defaults.editors`,我们可以自定义编辑器,如上述代码中扩展了'datetimebox'编辑器,包括初始化、获取值、设置值、调整大小和销毁等方法。 7. **实例化和配置** 示例代码展示了如何配置...

    EasyUI入门教程--第01课_EasyUI简介.avi

    第09课(讲解datagrid的行编辑模式,增加、删除、修改,扩展editor的类型,扩展datagrid,增加动态改变editor属性,简单介绍了form的load,简单介绍了弹窗编辑模式,讲解了双击行开启编辑模式,选择行开启编辑模式,...

    easy ui datagrid 从编辑框中获取值的方法

    在Web开发中,Easy UI Datagrid是一个非常实用的组件,它提供了一种高效的方式来展示和管理大量的表格数据。在实际应用中,我们...在实际项目中,根据具体需求进行适当的调整和扩展,可以使数据管理更加便捷和高效。

Global site tag (gtag.js) - Google Analytics