jqgrid 编辑添加功能详细解析


Posted in Javascript onNovember 08, 2013

ColModel 是jqGrid里最重要的一个属性,设置表格列的属性。

用法:

Java代码 :

jQuery("#gridid").jqGrid({   
...   
   colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],   
..   
}); 

属性  数据类型  备注  默认值 
align  string  定义单元格对齐方式;可选值:left, center, right.  left 
classes  string  设置列的css。多个class之间用空格分隔,如:'class1 class2' 。表格默认的css属性是ui-ellipsis  empty string 
datefmt  string  对日期列进行格式化。”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日.  ISO Date (Y-m-d) 
defval  string  查询字段的默认值  空 
editable  boolean  单元格是否可编辑  false 
editoptions  array  对列进行编辑时设置的一些属性  empty array 
editrules  array  对于可编辑单元格的一些额外属性设置  empty array 
edittype  string  可以编辑的类型。可选值:text, textarea, select, checkbox, password, button, image and file.  text 
fixed  boolean  列宽度是否要固定不可变  false 
formoptions  array  对于form进行编辑时的属性设置  empty 
formatoptions  array  对某些列进行格式化的设置  none 
formatter  mixed  对列进行格式化时设置的函数名或者类型  none 
hidedlg  boolean  是否显示或者隐藏此列  false 
hidden  boolean  在初始化表格时是否要隐藏此列  false 
index  string  当排序时定义排序字段名称的索引,参数名为sidx  empty string 
jsonmap  string  定义了返回的json数据映射  none 
key  boolean  当从服务器端返回的数据中没有id时,将此作为唯一rowid使用,默认只能有一个id属性  false 
label  string  如果colNames为空则用此值来作为列的显示名称,如果都没有设置则使用name 值  none 
name  string  必输项,表格列的名称,所有关键字,保留字都不能作为名称使用包括subgrid, cb and rn.  Required 
resizable  boolean  是否可以被resizable  true 
search  boolean  在搜索模式下,定义此列是否可以作为搜索列  true 
searchoptions  array  设置搜索参数  empty 
sortable  boolean  是否可排序  true 
sorttype  string  用在当datatype为local时,定义搜索列的类型,可选值:int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本  text 
stype  string  定义搜索元素的类型  text 
surl  string  搜索数据时的url  empty string 
width  number  默认列的宽度,只能是象素值,不能是百分比  150 
xmlmap  string  定义当前列跟返回的xml数据之间的映射关系  none 
unformat  function  ‘unformat'单元格值  null 

源码中添加

editurl:'index.php?do=do_edit',
     addurl:'index.php?do=do_add',
                    datatype: 'xml',
                    mtype: 'GET',
                    colNames:['ID', '任务名称', '所属类'
                    colModel :[
                        {name:'taskid', index:'taskid', width:100,align:'center',searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
      {name:'taskname', index:'taskname', width:100, align:'center',editable:true},
      {name:'classid', index:'classid', width:100, align:'center',editable:true,edittype:'select',editoptions: {
       value: '1:事务;2:非事务'},editselected:'classid' },
                    ],

添加editable后 添加也是同样有效的;

搜索
eq 等于( = )
ne 不等于( <> )
lt 小于( < )
le 小于等于( <= )
gt 大于( > )
ge 大于等于( >= )
bw 开始于 ( LIKE val% )
bn 不开始于 ( not like val%)
in 在内 ( in ())
ni 不在内( not in ())
ew 结束于 (LIKE %val )
en 不结束于
cn 包含 (LIKE %val% )
nc 不包含

Javascript 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
js模拟实现烟花特效
Mar 10 Javascript
动态加载JS文件的三种方法
Nov 08 #Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 #Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 #Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 #Javascript
JavaScript中this的使用详解
Nov 08 #Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 #Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 #Javascript
You might like
PHP 数据库树的遍历方法
2009/02/06 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php与paypal整合方法
2010/11/28 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python 字典的打印实现
2019/09/26 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
银行求职信
2014/05/31 职场文书
篮球比赛策划方案
2014/06/05 职场文书
考研导师推荐信范文
2015/03/27 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python