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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 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中邮箱地址正则表达式实现与详解
2012/04/24 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php简单的上传类分享
2016/05/15 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python回调函数用法实例详解
2015/07/02 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python 实现A*算法的示例代码
2018/08/13 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
python在协程中增加任务实例操作
2021/02/28 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
幸福终点站观后感
2015/06/04 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python