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.Encode手动解码技巧
Jul 14 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
动态加载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类
2006/10/09 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP实现简易计算器功能
2020/08/28 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
Vue实现日历小插件
2019/06/26 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python封装原理与实现方法详解
2018/08/28 Python
浅析Python函数式编程
2018/10/06 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python导入库的具体方法
2020/06/18 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
2014年高考决心书
2014/03/11 职场文书
《桥》教学反思
2014/04/09 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android