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 相关文章推荐
JS实现根据出生年月计算年龄
Jan 10 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
javascript运动详解
Jul 06 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 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截取指定2个字符之间字符串的方法
2015/04/15 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
详解javascript void(0)
2020/07/13 Javascript
机器学习python实战之手写数字识别
2017/11/01 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
python中if嵌套命令实例讲解
2021/02/25 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
夜不归宿检讨书
2014/02/25 职场文书
志愿者活动总结范文
2014/04/26 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
就业协议书
2014/09/12 职场文书
企业党员个人自我评价
2014/09/20 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
2016高考寄语集锦
2015/12/04 职场文书