`
旭少版
  • 浏览: 85382 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

jeecg随笔 -- datagrid扩展editor的思路

阅读更多
easy ui 里的 datagrid 要扩展 editor
实际上只需要在现有可用的
text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree
里 直接 参照

datetimebox : {
		init : function(container, options) {
			var editor = $('<input />').appendTo(container);
			editor.datetimebox(options);
			return editor;
		},
		destroy : function(target) {
			$(target).datetimebox('destroy');
		},
		getValue : function(target) {
			return $(target).datetimebox('getValue');
		},
		setValue : function(target, value) {
			$(target).datetimebox('setValue', value);
		},
		resize : function(target, width) {
			$(target).datetimebox('resize', width);
		}
	},
multiplecombobox : {
		init : function(container, options) {
			var editor = $('<input />').appendTo(container);
			options.multiple = true;
			editor.combobox(options);
			return editor;
		},
		destroy : function(target) {
			$(target).combobox('destroy');
		},
		getValue : function(target) {
			return $(target).combobox('getValues').join(',');
		},
		setValue : function(target, value) {
			$(target).combobox('setValues', sy.getList(value));
		},
		resize : function(target, width) {
			$(target).combobox('resize', width);
		}
	}

进行扩展即可

实际上就是:
在现有的编辑器里, 再加入一些自己需要的属性或者特性
然后 作为一个新的 编辑器 注册进去

以下是我注册的一个仿validatebox,但是增加了禁用编辑的编辑器
暂命名为 inputbox


inputbox : {/* 可以禁用的输入域(实际上是扩展了combobox的功能)*/
		init : function(container, options) {
			var editor = $('<input />').appendTo(container);
			options.hasDownArrow = false;
			options.panelHeight = -1;
			editor.combobox(options);
			return editor;
		},
		destroy : function(target) {
			$(target).combobox('destroy');
		},
		getValue : function(target) {
			return $(target).combobox('getValue');
		},
		setValue : function(target, value) {
			$(target).combobox('setValue', value);
		},
		resize : function(target, width) {
			$(target).combobox('resize', width);
		}
	}


分享到:
评论

相关推荐

    jeasyui-datagrid-datagrid2.zip

    jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip

    jeasyui-datagrid-datagrid

    《JeasyUI DataGrid深度解析与开发指南》 在Web应用开发中,数据展示和交互是核心部分之一,而DataGrid作为数据展示的利器,深受开发者喜爱。JeasyUI DataGrid是一款基于jQuery的轻量级组件,它为开发者提供了丰富...

    easyui--5.DataGrid

    easyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrid

    jquery-easyui-datagrid

    在提供的文件 `jeasyui-datagrid-datagrid12` 中,可能包含了一个名为 `datagrid12` 的示例,这可能是一个具体的 datagrid 实例,演示了如何配置和使用 datagrid。通常,这样的文件会包含 HTML、CSS 和 JavaScript ...

    EasyUI-CRUD-DataGrid

    DataGrid 是 EasyUI 中的一个核心组件,它是一个数据表格,可以展示大量结构化的数据,并支持多种操作,如排序、分页、筛选以及增删改查等。 在"EasyUI-CRUD-DataGrid"这个主题中,我们将深入探讨如何使用 EasyUI ...

    easyui的datagrid中editor和combobox的级联

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

    Laravel开发-laravel-datagrid-builder

    "Laravel开发-laravel-datagrid-builder"项目是为了解决这一问题,它结合了Laravel的强大后端能力和前端jQuery Bootgrid插件,创建了一个高效的交互式数据网格。 **Laravel框架**: Laravel是一款基于PHP的开源Web...

    商业编程-源码-DataGrid数据增删及分页演示.zip

    在IT行业中,DataGrid是一种常见的数据展示控件,尤其在商业应用编程中,它被广泛用于展示、操作和管理大量的结构化数据。本资源“商业编程-源码-DataGrid数据增删及分页演示.zip”提供了一个实例,旨在帮助开发者...

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

    var input = $('&lt;input type="text" class="datagrid-editable-input"&gt;').appendTo(container); input.combogrid(options); return input; }, destroy: function(target) { $(target).combogrid('destroy'); ...

    datagrid-dnd(可以拖放的datagrid)

    "datagrid-dnd"是EasyUI datagrid的一个扩展,它添加了拖放功能。在标准的datagrid中,数据通常是静态显示的,用户无法直接改变行的顺序。然而,通过启用drag and drop(拖放)功能,用户可以方便地将某一行数据拖动...

    Jquery-easyui的datagrid中文文档

    如果设为`true`,DataGrid将自动扩展或收缩以填满其父容器的空间,适用于响应式设计。 - **pageNumber**和**pageSize**:当`pagination`属性启用时,用于初始化页码和页面大小。默认分别为`1`和`10`。这些值可以...

    jeecg-framework-3.1.0.RELEASE

    复杂业务采用表单自定义,业务流程使用工作流来实现、扩展出任务接口,供开发编写业务逻辑。 实现了流程任务节点和任务接口的灵活配置,既保证了公司流程的保密行,又减少了开发人员的工作量 架构说明 JEECG V3.0...

    EasyUI-1.Datagrid 数据网格

    Datagrid 支持多种功能扩展,如行选中(`singleSelect` 或 `multiSelect`)、行编辑(`editable`)、排序(`sortable`)、分页(`pagination`)、搜索(`searchText` 和 `onSearch`)等。 5. **事件处理**: ...

    jupyterlab-tabular-data-editor:在JupyterLab中响应有效地处理表格数据

    |jupyterlab表格数据编辑器在JupyterLab中响应有效地处理表格数据。实验:此扩展程序仍处于Alpha状态。 API会经常更改。 尝试我们的扩展!...tabular-data-editor JupyterLab 2: jupyter labextension inst

    wpf-dynamic-datagrid:从 code.google.compwpf-dynamic-datagrid 自动导出

    wpf-dynamic-datagrid 允许 WPF Toolkit DataGrid 使用嵌套集合。 WPF Toolkit DataGrid ([ ]) 是用于查看和编辑 WPF 中的对象集合的有用控件。 默认情况下,DataGrid 设置为显示来自对象集合的数据,其中集合中的...

    easyui datagrid 自定义编辑器 colorpickerEditor

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

    c#-WPF-VS插件dataGrid

    这个是WPF下的DataGridView,GridView,Repeater控件,安装直接使用.在WinForm或者WebForm中我们有一大批的Grid控件供我们使用DataGridView,GridView,Repeater等等,这样的网格数据空间给我们提供了极大的方便去让数据...

    jquery-easyui-datagridview datagrid-detailview.js升级自定义展开按钮功能

    jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...

    datagrid-detailview.js datagrid-bufferview.js datagrid-groupview.js

    `datagrid-detailview.js`文件包含了实现这一功能的代码。使用DetailView,可以提高用户体验,让用户无需离开当前页面就能查看和操作详细信息。 2. **BufferView**: BufferView是一种优化大量数据加载的技术。在...

Global site tag (gtag.js) - Google Analytics