HTML5 Wijmo:控制 Wijmo Grid 插件的编辑模式

Wijmo jQuery 插件经常应用于在财务类网站中创建平滑和良好用户体验的交互表格。WijGrid
插件用于显示、排序、分组和编辑数据。今天我们来分享下如何控件WijGrid插件的编辑模式。

在本篇博客汇总我们将会实现通过以下方式来是 WijGrid 进入编辑状态:

  • 单击

  • 双击

  • 特定列

我们可以通过设置 allowEditing 属性允许 WijGrid 编辑。默认情况下
WijGrid 通过点击“F2”或双击进入编辑状态。

通过单击使单元格进入编辑状态,我们需要捕获 currentCellChanged
事件,并且通过代码来使单元格进入编辑状态。代码如下:

   currentCellChanged: function (e, args) {
            if ($(e.target).wijgrid(‘option‘, ‘isLoaded‘)) {
                selectedEditMode = $("#editMode").wijcombobox("option", "selectedValue");
                //if Editing mode is single click then start editing
                if (selectedEditMode == ‘Single Click‘) {
                   window.setTimeout(function () {
                   $(e.target).wijgrid(‘beginEdit‘);
                   }, 100);
             }
         }
     }

可以通过设置列的 readOnly 属性为 true 来禁止用户编辑特定列.

最终效果图:

Demo 下载:

WijGrid - Editing Modes.htm

更多关于 HTML5 Wijmo 特性请参考:http://wijmo.gcpowertools.com.cn/

HTML5 Wijmo:控制 Wijmo Grid 插件的编辑模式,码迷,mamicode.com

时间: 2024-08-26 08:26:34

HTML5 Wijmo:控制 Wijmo Grid 插件的编辑模式的相关文章

iOS UIKit:TableView之编辑模式(3)

一般table view有编辑模式和正常模式,当table view进入编辑模式时,会在row的左边显示编辑和重排控件,如图 42所示的编辑模式时的控件布局:左边的editing control有表 61的两种图标. 表 61 table view编辑控件 图标 描述 Deletion控件 Insertion控件 若table view在编辑模式时,用户点击编辑控件,那么table view会发送一系列消息给data source 和delegate对象.可以通过实现这些方法来修改table v

编辑模式下,控制对象移动

有时候我们可能会有这样的需求,就是在编辑模式下,控制移动场景中的物体,这里面有两个点要解决: (1)怎么在编辑模式下运行一个脚本: (2)怎么有效地响应鼠标按键. 第一个问题可以使用编辑器属性ExecuteInEditMode让脚本在编辑模式也能实时地更新.下面的代码用来控制物体的移动,并且可以在编辑模式下运行: using UnityEngine; using System.Collections; #if UNITY_EDITOR using UnityEditor; #endif [Exe

安装SFTP/FTP插件快速编辑远程服务器文件

默认的Sublime Text 3 是没有sftp/ftp功能的,如果编辑器自带ftp势必会提高开发效率,虽然Sublime Text 3 默认是没有ftp功能,但是安装sftp插件很容易.下面是我安装步骤,希望能帮助那些喜欢Sublime Text 3的朋友. 按下Ctrl+Shift+P调出命令面板 输入install 调出 Install Package 选项并回车,然后输入ftp,下拉列表中会出现一些相关的插件,选中sftp进行安装就行了, 出现下图说明安装成功了. 装好后还需配置如下:

ExtJs Grid 删除,编辑,查看详细等超链接处理

在网上查了好多资料,关于ExtJs处理操作栏的“删除”.“编辑”.“查看详细”的处理,原来项目都是这么处理: 操作栏:{ text:'操作', xtype:'actioncolumn', items : [{ icon : '../images/edit.png', tooltip : '编辑', handler:function(grid, rowIndex, colIndex){ var record = grid.getStore().getAt(rowIndex); var data =

控制cellEditor是否为可编辑

class TableViewerEditingSupport extends EditingSupport { int column; private TableViewer columnViewer; private CellEditor editor; public TableViewerEditingSupport(ColumnViewer viewers, int column) { super(viewers); this.columnViewer = (TableViewer) v

Blender 编辑模式

1.如何进入编辑模式 可直接通过"Tab"快捷键进入编辑模式,或者选择界面底部的下拉列表: 如果想退出编辑模式,可再按下"Tab"键退出. 2.编辑选择 进入编辑状态后,我们可以通过鼠标右键来选择某个顶点(Vertex).并且可以任意移动这些顶点.如果几个顶点构成了一个面,那么可通过"Shift"键多选这个面的几个顶点,从而达到选中这个面的效果.被标记出来的这个面即是所谓的Face. 选中一个顶点,按下ALT键,再选择另外一个点.物体会自动把此路

.NET简谈插件系统开发模式

摘选自[王清培]博客 http://www.cnblogs.com/wangiqngpei557/archive/2011/06/10/2077413.html 今天跟大家分享一下我们在日常开发中并不常用的开发模式“插件系统模式”,什么叫插件,从大一点的概念讲就是我们开发的软件是由很小的模块组成,每一块都能成功的装卸,使我们的软件成为一个有机体,在发生重大事故.改良优化等等的时候,我们不需要重新编译我们的系统就能很方便的进行升级替换进行使用:这样的开发模式就是插件系统开发模式:这个概念很大,每个

XAF-列表视图编辑模式

下面来看看XAF中列表有哪些编辑模式: 一.inline编辑 下图说明了WinForms和ASP.NET应用程序中的可编辑列表视图. 在win中,这个很友好,就像excel中编辑一样.5星功能^_^. 在web中,还需要点击一个按钮,这个个人感觉和弹出窗口没啥区别.当然,还是能够看到别的记录的信息,勉强用吧. 如何设置? 在VS中找到xafml文件,找到指定的列表视图 设置AllowEdit属性为真. 如果要允许新建功能,则需要设置AllowNew属性为真和IModelListViewNewIt

easyui-datagrid 编辑模式详解

   一,建立编辑器 从api得知,扩展一种新的编辑器类型,需要提供以上几个方法.项目中正好需要一个checkbox 类型编辑器,但在easyui中并没提供这样的编辑器,那我们可以通过扩展编辑器来解决,扩展如下 1 $.extend($.fn.datagrid.defaults.editors, { 2 checkbox: {//调用名称 3 init: function (container, options) { 4 //container 用于装载编辑器 options,提供编辑器初始参数