jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置
基本用法:
1.jQuery("#jqGrid_id").jqGrid({ 2.... 3. colModel: [ 4. ... 5. {name:'price', index:'price', formatter:'integer', formatoptions:{thousandsSeparator: ','}}, 6. ... 7. ] 8.... 9.});
formatter主要是设置格式化类型(integer、email等以及函数来支持自定义类型),formatoptions用来设置对应formatter的参数,jqGrid中预定义了常见的格式及其options:
integer
thousandsSeparator: //千分位分隔符,
defaulValue
number
decimalSeparator, //小数分隔符,如"."
thousandsSeparator, //千分位分隔符,如","
decimalPlaces, //小数保留位数
defaulValue
currency
decimalSeparator, //小数分隔符,如"."
thousandsSeparator, //千分位分隔符,如","
decimalPlaces, //小数保留位数
defaulValue,
prefix //前缀,如加上"$"
suffix//后缀
date
srcformat, //source的本来格式
newformat //新格式
email
没有参数,会在该cell是email加上: mailto:name@domain.com
showlink
baseLinkUrl, //在当前cell中加入link的url,如"jq/query.action"
showAction, //在baseLinkUrl后加入&action=actionName
addParam, //在baseLinkUrl后加入额外的参数,如"&name=aaaa"
target,
idName //默认会在baseLinkUrl后加入,如".action?id=1"。改如果设置idName="name",那么".action?name=1"。其中取值为当前rowid
checkbox
disabled //true/false 默认为true此时的checkbox不能编辑,如当前cell的值是1、0会将1选中
select
设置下拉框,没有参数,需要和colModel里的editoptions配合使用
下面是一个使用的例子:
1.var datas = [ 2. {"id":1, "name":"name1", "price":123.1, "email":"abc@163.com", "amount":1123423, "gender":"1", "type":"0"}, 3. {"id":2, "name":"name2", "price":1452.2, "email":"abc@163.com", "amount":12212321, "gender":"1", "type":"1"}, 4. {"id":3, "name":"name3", "price":125454, "email":"abc@163.com", "amount":2345234, "gender":"0", "type":"0"}, 5. {"id":4, "name":"name4", "price":23232.4, "email":"abc@163.com", "amount":2345234, "gender":"1", "type":"2"}]
1.colModel:[ 2. {name:'id', index:'id', formatter: customFmatter}, 3. {name:'name', index:'name', formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}}, 4. {name:'price', index:'price', formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}}, 5. {name:'email', index:'email', formatter: "email"}, 6. {name:'amount', index:'amount', formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}}, 7. {name:'gender', index:'gender', formatter: "checkbox",formatoptions:{disabled:false}}, 8. {name:'type', index:'type', formatter: "select", editoptions:{value:"0:无效;1:正常;2:未知"}} 9.],
其中customFmatter声明如下
1.function customFmatter(cellvalue, options, rowObject){ 2. console.log(cellvalue); 3. console.log(options); 4. console.log(rowObject); 5. return "["+cellvalue+"]"; 6.};
在页面显示的效果如下:
当然还得支持自定义formatter函数,只需要在formatter:customFmatter设置formatter函数,该函数有三个签名
1.function customFmatter(cellvalue, options, rowObject){ 2. 3.} 4.//cellvalue - 当前cell的值 5.//options - 该cell的options设置,包括{rowId, colModel,pos,gid} 6.//rowObject - 当前cell所在row的值,如{ id=1, name="name1", price=123.1, ...}
当然对于自定义formatter,在修改时需要获取原来的值,这里就提供了unformat函数,这里见官网的例子:
1.jQuery("#grid_id").jqGrid({ 2.... 3. colModel: [ 4. ... 5. {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat}, 6. ... 7. ] 8.... 9.}); 10. 11.function imageFormat( cellvalue, options, rowObject ){ 12. return '<img src="'+cellvalue+'" />'; 13.} 14.function imageUnFormat( cellvalue, options, cell){ 15. return $('img', cell).attr('src'); 16.}
附上官网DOC:
本文章转载至:http://mj4d.iteye.com/blog/1634857
相关推荐
jqGrid属性中文详细说明 jqGrid属性中文详细说明
下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: ...如果想获取选择的行的数据,只要传入rowId即可,如下: var rowData = $(“#gridTable”).jqGrid(‘getRowData',rowId);
NULL 博文链接:https://vipshow.iteye.com/blog/1812381
jqgrid中文文档API,使用JQGRID
JqGrid中文API文档,包含了基础的JqGrid控件的属性方法事件等,有如何使用JqGrid的Demo.
jqgrid加载本地数据并且分页例子,下载直接搭环境使用
jqGrid属性中文详细说明
Jqgrid 中文文档 Jqgrid 属性参数详细解释 Jqgrid 属性大全
jqGrid表格数据展示插件,可以做出很多很炫酷的效果,你值得拥有
jqGrid数据调用实例
本Demo利用Jquery的jqgrid插件利用本地资源数据,实现分页。
; charset=utf-8"> <title>Insert title here ...<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> ...
Jqgrid中文使用手册,直接从jqgrid官网翻译。非常适合查阅
jqGrid 按多个条件 或单个条件进行查询
刚收集到的JqGrid的详细中文文档,版本3.9
jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 jqGrid 学习 格式化 21 jqGrid 学习 自定义按钮 26 jqGrid...
jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载下来是没法用的,因为里面有些东西是错的,当然我这个demo40还是还有是些不足,比喻说数据库中少表导致...
JqGrid 中文 帮助文档 api jQuery
在你开始jqGrid之前,你需要具有基本的JavaScript和jQuery知识。有关jQuery的知识可访问jQuery网站jquery.com。当你已有了这些基础知识后,我们从jqGrid的系统需求开始。