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 下载:

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

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

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

    一般table view有编辑模式和正常模式,当table view进入编辑模式时,会在row的左边显示编辑和重排控件,如图 42所示的编辑模式时的控件布局:左边的editing control有表 ...

  2. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  3. [Ext JS 4] 实战之Grid, Tree Gird编辑Cell

    前言 本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onRead ...

  4. EXTJS4.0 grid 可编辑模式 配置

    首先配置这个参数 plugins:[//插件 Ext.create("Ext.grid.plugin.CellEditing",{ clicksToEdit:1//单元格 点一下就 ...

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

    在网上查了好多资料,关于ExtJs处理操作栏的“删除”.“编辑”.“查看详细”的处理,原来项目都是这么处理: 操作栏:{ text:'操作', xtype:'actioncolumn', items ...

  6. 在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件

    在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件 开源程序 浏览:29555 2013年05月02日 文章目录[隐藏] 常见的工作流程 SFTP 安装和使用方法 第一步: ...

  7. easyui datagrid 编辑模式详解

       一,建立编辑器 从api得知,扩展一种新的编辑器类型,需要提供以上几个方法.项目中正好需要一个checkbox 类型编辑器,但在easyui中并没提供这样的编辑器,那我们可以通过扩展编辑器来解决 ...

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

    摘选自[王清培]博客 http://www.cnblogs.com/wangiqngpei557/archive/2011/06/10/2077413.html 今天跟大家分享一下我们在日常开发中并不 ...

  9. 实现Launcher编辑模式(1) 壁纸更换

    Android Launcher分析和修改13——实现Launcher编辑模式(1) 壁纸更换 Posted on 2013-09-11 23:25 泡泡糖 阅读(212) 评论(3) 编辑 收藏 已 ...

随机推荐

  1. (转)新手必看:HighCharts几个基础问答

    转自:http://bbs.hcharts.cn/article-21-1.html

  2. Mac eclipse找不到source的解决办法

    因为要搞hadoop,最终还是逃不过写java的命运... eclipse里想查具体函数源代码时,如果报错说找不到源: 试试ls -l which java,在这个目录周围看看能不能找到src.zip ...

  3. js 判断微信浏览器

    上周接到个需求,需求是这样的:用户扫一扫二维码会产生一个链接,该链接会向后端发送个请求,返回一个 apk 的下载地址,用户点击下载按钮可以下载此 apk.然后就发生了问题,经过测试,发现用微信扫一扫打 ...

  4. URL 学习总结

    1.绝对路径(以"/"斜线开头的路径,代表相对于当前Web应用): a)地址给服务器用,web应用名称可以省略. 请求包含:request.getRequestDispatcher ...

  5. java-cef系列视频第二集:搭建开发环境

    上一集我们介绍了如何从官方代码编译java-cef. 本视频介绍了如何使用eclipse搭建java-cef二次开发环境. 下一集我们将给java-cef添加flash支持. 本作品采用知识共享署名- ...

  6. make menuconfig出错解决方法

     make menuconfig出错解决方法 2011-06-11 22:22:49 分类: 系统运维 错误现象: make menuconfig In file included from scri ...

  7. java之容器

    先来一张容器的API框架图,我们在java中所学的所有知识,都是根据下面这张图来学习的.... 容器API: 1.Collection接口------定义了存储一组对象的方法,其子接口Set和List ...

  8. Android之TextView文字绘制流程

    一:TextView的onDraw()方法: 1.第一句restartMarqueeIfNeeded()绘制字幕滚动. protected void onDraw(Canvas canvas) { r ...

  9. Ajax请求WebService跨域问题 [转载]

    1.背景 用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2.出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容 ...

  10. Touch Event

    转自:      http://hi.baidu.com/masaiui/item/971775e8b316238bc10d754b 参考: http://hedgehogking.com/?p=55 ...