- 浏览: 3365429 次
- 性别:
- 来自: 珠海
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸:
你好博主,这个不是很理解,能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站:
写得不错,可以看这里,和这里的这篇文章一起看,有 ...
jquery 遍历对象、数组、集合 -
xue88ming:
很有用,谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC:
厉害,困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意,用$而不是# -
TopLongMan:
非常好,很实用啊。。
PostgreSQL递归查询实现树状结构查询
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cells-editing.htm
Mouse Edit Actions
Single mouse click: Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value.
Single mouse click on a selected cell: Marks the cell as selected and shows the editor.
Double mouse click on a cell: Marks the cell as selected and shows the editor. The editor’s value is equal to the cell’s value..
Keyboard Edit Actions and Navigation
If the user starts typing text, the cell’s content is replaced with the text entered from the user.
Left Arrow key is pressed - Selects the left cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Right Arrow key is pressed - Selects the right cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Up Arrow key is pressed - Selects the cell above, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Down Arrow key is pressed - Selects the cell below, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Page Up/Down is pressed - Navigate Up or Down with one page, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Home/End is pressed - Navigate to the first or last row, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Enter key is pressed - Shows the selected cell’s editor. If the cell is in edit mode, hides the cell’s editor and saves the new value. The editor’s value is equal to the cell’s value.
Esc key is pressed - Hides the cell’s editor and cancels the changes.
Tab key is pressed - Selects the right cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the right cell and opens its editor.
Shift+Tab keys are pressed - Selects the left cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the left cell and opens its editor.
F2 key is pressed - shows the selected cell's editor.
Space key is pressed - Toggles the checkbox editor’s check state when the selected cell’s column is a checkbox column.
Programmatic Editing
The Grid have APIs for showing and hiding the cell editors. The 'begincelledit' method allows you to put a specific cell into edit mode.
The 'endcelledit' method ends the edit operation and confirms or cancels the changes. The following code cancels the changes.
The following code confirms the changes.
To set a new value to a Grid cell, you can use the 'setcellvalue' method:
// the first parameter is the row's index.
// the second parameter is the column's datafield.
// the third parameter is the new cell's value.
To get the value of a Grid cell, you can use the 'getcellvalue' method:
// the first parameter is the row's index.
// the second parameter is the column's datafield.
The 'cellbeginedit' and 'cellendedit' events are raised when the edit operation begins or ends.
Editor Types
jqxGrid supports the following types of editors:
TextBox
CheckBox(uses the jqxCheckBox widget)
NumberInput(uses the jqxNumberInput widget and edits currency, percentange and any type of numeric information)
DateTimeInput(uses the jqxDateTimeInput widget and edits date and time values)
DropDownList(uses the jqxDropDownList widget and selects a single value from a list of values)
To specify the column's editor, you should set the column's 'columntype' property to 'textbox', 'dropdownlist', 'numberinput', 'checkbox' or 'datetimeinput'. To disable the editing of a specific grid column, you can set the column's editable property to false. The 'initeditor' function is called when the editor's widget is initialized. It allows you to use the properties of the widget and make it best fit your application's scenario.
Please note that in order to use the 'dropdownlist', 'numberinput', 'checkbox' or 'datetimeinput' editors you need to include the necessary javascript files.
Validation
The Grid will display a validation popup message when the new cell’s value is not valid. The developers are able to set a custom validation logic and error messages for each grid column. The Grid will stay in edit mode until a correct value is entered or the user presses the “Esc” key.
In following code, the "Ship Date", "Quantity" and "Price" columns define custom validation functions. Each function has 2 parameters - the edit cell and its value. Depending on your logic, you can validate the value and return true if the value is correct or false, if the value is not correct. You can also return an object with 2 members - result and message. The message member represents the message that your users will see, if the validation fails.
Mouse Edit Actions
Single mouse click: Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value.
Single mouse click on a selected cell: Marks the cell as selected and shows the editor.
Double mouse click on a cell: Marks the cell as selected and shows the editor. The editor’s value is equal to the cell’s value..
Keyboard Edit Actions and Navigation
If the user starts typing text, the cell’s content is replaced with the text entered from the user.
Left Arrow key is pressed - Selects the left cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Right Arrow key is pressed - Selects the right cell, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Up Arrow key is pressed - Selects the cell above, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Down Arrow key is pressed - Selects the cell below, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Page Up/Down is pressed - Navigate Up or Down with one page, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Home/End is pressed - Navigate to the first or last row, when the Grid is not in edit mode. Otherwise, the key stroke is handled by the editor.
Enter key is pressed - Shows the selected cell’s editor. If the cell is in edit mode, hides the cell’s editor and saves the new value. The editor’s value is equal to the cell’s value.
Esc key is pressed - Hides the cell’s editor and cancels the changes.
Tab key is pressed - Selects the right cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the right cell and opens its editor.
Shift+Tab keys are pressed - Selects the left cell. If the Grid is in edit mode, saves the edit cell's value, closes its editor, selects the left cell and opens its editor.
F2 key is pressed - shows the selected cell's editor.
Space key is pressed - Toggles the checkbox editor’s check state when the selected cell’s column is a checkbox column.
Programmatic Editing
The Grid have APIs for showing and hiding the cell editors. The 'begincelledit' method allows you to put a specific cell into edit mode.
$("#jqxgrid").jqxGrid('begincelledit', 0, 'firstname');
The 'endcelledit' method ends the edit operation and confirms or cancels the changes. The following code cancels the changes.
$("#jqxgrid").jqxGrid('endcelledit', 0, 'firstname', true);
The following code confirms the changes.
$("#jqxgrid").jqxGrid('endcelledit', 0, 'firstname', false);
To set a new value to a Grid cell, you can use the 'setcellvalue' method:
// the first parameter is the row's index.
// the second parameter is the column's datafield.
// the third parameter is the new cell's value.
$("#jqxgrid").jqxGrid('setcellvalue', 0, 'lastname', 'My Value');
To get the value of a Grid cell, you can use the 'getcellvalue' method:
// the first parameter is the row's index.
// the second parameter is the column's datafield.
var value = $("#jqxgrid").jqxGrid('getcellvalue', 0, 'lastname');
The 'cellbeginedit' and 'cellendedit' events are raised when the edit operation begins or ends.
$("#jqxgrid").bind('cellbeginedit', function (event) { var args = event.args; var columnDataField = args.datafield; var rowIndex = args.rowindex; var cellValue = args.value; }); $("#jqxgrid").bind('cellendedit', function (event) { var args = event.args; var columnDataField = args.datafield; var rowIndex = args.rowindex; var cellValue = args.value; var oldValue = args.oldvalue; });
Editor Types
jqxGrid supports the following types of editors:
TextBox
CheckBox(uses the jqxCheckBox widget)
NumberInput(uses the jqxNumberInput widget and edits currency, percentange and any type of numeric information)
DateTimeInput(uses the jqxDateTimeInput widget and edits date and time values)
DropDownList(uses the jqxDropDownList widget and selects a single value from a list of values)
To specify the column's editor, you should set the column's 'columntype' property to 'textbox', 'dropdownlist', 'numberinput', 'checkbox' or 'datetimeinput'. To disable the editing of a specific grid column, you can set the column's editable property to false. The 'initeditor' function is called when the editor's widget is initialized. It allows you to use the properties of the widget and make it best fit your application's scenario.
$("#jqxgrid").jqxGrid( { source: dataAdapter, editable: true, theme: theme, selectionmode: 'singlecell', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 }, { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 65 }, { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd'}, { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ decimalDigits: 0 }); } }, { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 3 }); } } ] });
Please note that in order to use the 'dropdownlist', 'numberinput', 'checkbox' or 'datetimeinput' editors you need to include the necessary javascript files.
Validation
The Grid will display a validation popup message when the new cell’s value is not valid. The developers are able to set a custom validation logic and error messages for each grid column. The Grid will stay in edit mode until a correct value is entered or the user presses the “Esc” key.
In following code, the "Ship Date", "Quantity" and "Price" columns define custom validation functions. Each function has 2 parameters - the edit cell and its value. Depending on your logic, you can validate the value and return true if the value is correct or false, if the value is not correct. You can also return an object with 2 members - result and message. The message member represents the message that your users will see, if the validation fails.
$("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, editable: true, theme: theme, selectionmode: 'singlecell', columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 180 }, { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 65 }, { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd', validation: function (cell, value) { var year = value.getFullYear(); if (year >= 2013) { return { result: false, message: "Ship Date should be before 1/1/2013" }; } return true; } }, { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 100) { return { result: false, message: "Quantity should be in the 0-100 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ decimalDigits: 0 }); } }, { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 15) { return { result: false, message: "Price should be in the 0-15 interval" }; } return true; }, initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 3 }); } } ] });
发表评论
-
TimeDifference.js获取时间差插件
2016-06-06 16:46 1124http://www.oschina.net/p/timedi ... -
日期时间插件Date-Utils
2016-05-28 23:16 1303原文 https://segmentfault.com/a/1 ... -
Riot v2.4.1 发布,JavaScript 的 MVP 框架
2016-05-23 13:14 948http://www.oschina.net/news/736 ... -
个最实用的JavaScript开发工具
2016-05-21 10:22 825http://my.oschina.net/u/2421687 ... -
zepto tap “点透”的解决
2016-05-20 15:44 1001http://my.oschina.net/u/2497925 ... -
Date.js
2016-04-20 17:09 951原文 http://my.oschina.net/hnqing ... -
你真的了解图片的预加载吗
2016-04-14 10:26 1086http://my.oschina.net/HerrySun/ ... -
JavaScript之立即执行函数
2016-03-30 11:42 1190http://blog.csdn.net/qq83841923 ... -
JavaScript迭代
2016-03-27 01:44 710http://my.oschina.net/u/2346786 ... -
zepto(移动简化版jQuery),的 API 分类
2016-03-24 09:22 1698http://my.oschina.net/leejun200 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 939[HTML5]Notification桌面提醒功能 http: ... -
js中浮点型运算
2015-12-14 11:12 1282http://www.cnblogs.com/wangkong ... -
JavaScript 文件拖拽上传插件 dropzone.js 介绍
2015-12-04 23:12 1778JavaScript 文件拖拽上传插件 dropzone.js ... -
jqgrid保存或者删除成功后调用自定义方法的解决方法
2015-11-19 23:53 5955参考: http://www.debugease.com/ja ... -
Java执行js脚本
2015-11-14 23:40 993http://my.oschina.net/sniperLi/ ... -
YUI Compressor压缩JS
2015-11-06 17:12 1051过程心得记录 http://www.cnblogs.com/t ... -
如何使用js、html5在浏览器直接打开pdf文档
2015-11-03 22:32 8623http://q.cnblogs.com/q/48507/ ... -
js获取 本周,本月,本季度,本年,上月,上周,上季度,去年
2015-11-03 00:01 2885/** * 针对Ext的工具类 */ var ... -
正则表达式
2015-10-10 09:27 873http://my.oschina.net/robortly/ ... -
jquery垮页面事件传递
2015-08-25 21:18 1033http://my.oschina.net/u/157514/ ...
相关推荐
jqxgrid.edit.js: Grid Editing plug-in jqxgrid.storage.js: Grid Save/Load state plug-in jqxgrid.aggregates.js: Grid Aggregates plug-in jqxgauge.js: Radial and Linear Gauge widget jqxdatatable.js: ...
ViEmu/VS: vi-vim editing for Microsoft Visual Studio ViEmu for Visual Studio is the most popular and mature product of the ViEmu line. Many hundreds of developers use it all day, every day for all ...
语言:English (UK) 此扩展允许在“优化视觉编辑器”下加载目标页面 如果Webtrends Optimize客户希望充分利用我们的转化率优化解决方案,则应安装此扩展程序,因为它为用户提供了增强的显示内容支持。...
此扩展允许在优化可视化编辑器的情况下加载目标页面。 如果Webtrends Optimize客户希望充分利用我们的转化率优化解决方案,则应安装此扩展程序,因为它为用户提供了增强的显示内容支持。 通过激活,它使客户端可以...
The video-editing-timeline repo contains three packages: video-editing-timeline (native version), video-editing-timeline-react (react version), and video-editing-timelinevue (vue version). You can ...
侠盗猎车手:罪恶都市的任务编辑工具。
emulates Vim editing commands within Visual Studio,It is only available for all editons of Visual Studio 2010 and 2012 excluding Express Edition, and as with viemu does not use Vim.
PISE Person Image Synthesis and Editing With Decoupled GAN
The Eclipse Graphical Editing FrameWork 本资料共包含以下附件: The Eclipse Graphical Editing FrameWork.pdf
Title:Visual ChatGPT: Talking, Drawing and Editing with Visual Foundation Models 标题:Visual ChatGPT:使用 Visual Foundation 模型进行对话、绘图和编辑 作者:Chenfei Wu, Shengming Yin, Weizhen Qi, ...
Chapter 6: Creating Killer Content: Adding and Editing Articles Chapter 7: Welcoming your Visitors: Creating Attractive Home Pages Chapter 8: Helping Your Visitors Find What They Want: Managing Menus ...
npm install vue-editable-grid 然后导入您的主文件 import Vue from 'vue' // Vue editable grid component and styles import VueEditableGrid from 'vue-editable-grid' import 'vue-editable-grid/dist/...
The Learn With series will teach you about Enterprise ...Chapter 5: Creating and Editing Tasks Chapter 6: Scheduling Tasks Chapter 7: Marking a Task Completed Chapter 8: Implementing User Roles
When: 改为 Editing Text 关于有中文根本看不清的解决办法: window -> Preferences -> General -> Appearance -> Colors and Fonts -> Basic -> Text font -> Edit -> Size 改为 11 -> OK -> Apply and Close ...
一个协作平台,可实现非锁定,同步,实时协作(仅非文本)编辑,并且具有独立于编辑器的功能。 它还提供按编辑会话回放的编辑。 要进行协作,只需输入名称,组和密码。
该方案称为LightCore, 方案设计可参见ACNS2015上的论文《LightCore: Lightweight Collaborative Editing Cloud Services for Sensitive Data》。此方案使用流密码或AES-CTR加密算法在客户端加密实时的操作数据,仅...
AE脚本:根据音频节奏自动剪辑视频素材Automated+Video+Editing+1.11 AE脚本:根据音频节奏自动剪辑视频素材Automated+Video+Editing+1.11 AE脚本:根据音频节奏自动剪辑视频素材Automated+Video+Editing+1.11 AE...
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。今天小编通过分享本文给大家介绍Kendo Grid editing 自定义验证报错提示的解决方法
Paperback: 224 pages Publisher: Packt Publishing; 1st New edition edition (April 7, 2010) Language: English ISBN-10: 1847194966 ISBN-13: 978-1847194961
Photo Editing Extension Demo, 苹果官方例子。 配合博客学习使用