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的文件是什么文件
Dec 06 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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
UCenter Home二次开发指南
2009/05/28 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP对象实例化单例方法
2017/01/19 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
快速了解Python相对导入
2018/01/12 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
python实现控制台输出颜色
2021/03/02 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
后勤部长岗位职责
2013/12/14 职场文书
教师节促销活动方案
2014/02/14 职场文书
《画》教学反思
2014/04/14 职场文书
说明书格式及范文
2014/05/07 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
社团招新宣传语
2015/07/13 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers