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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
vue 弹出遮罩层样式实例
Jul 22 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获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python读取注册表中值的方法
2013/04/08 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
岗位职责范本
2013/11/23 职场文书
司机岗位职责说明书
2014/07/29 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2015年工程师工作总结
2015/04/30 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers