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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
基于postman获取动态数据过程详解
Sep 08 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-fpm配置详解
2014/02/12 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
Python学习笔记之解析json的方法分析
2017/04/21 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python网络编程之五子棋游戏
2020/05/14 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
粗加工管理制度
2014/02/04 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
小摄影师教学反思
2014/04/27 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
小学美术教学反思
2016/02/17 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL