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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
使用JS读秒使用示例
Sep 21 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
Java无向树分析 实现最小高度树
Apr 09 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自定义函数返回多个值
2006/11/26 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python之消除前缀重命名的方法
2018/10/21 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python给list排序的简单方法
2020/12/10 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
农行实习自我鉴定
2013/09/22 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript