文档章节

jquery grid

五大三粗
 五大三粗
发布于 2015/11/19 10:27
字数 802
阅读 95
收藏 2

The good news is that you don't really need to extend the standard custom formatter. Instead of that you want probably just share the code. So you can define the common code as the function like

function imageLinkFormatter(cellval, options, rowObject, icon, link_class, link_action) { var img = '<span class="ui-icon ' + icon + ' icon"><span/>'; var link = '<a href="#' + link_action + '/id/' + rowObject.id + '" class="' + link_class + '" rel="' + rowObject.id + '">' + img + '</a>'; return link; }

and call the function from the custom formatter of the different columns of the grid with additional parameters.

colModal: [ {name: 'col1', formatter: function (cellvalue, options, rowObject) { return imageLinkFormatter(cellvalue, options, rowObject, 'ui-icon-pencil', 'edit-link-class', 'Edit'); }}, {name: 'col2', formatter: function (cellvalue, options, rowObject) { return imageLinkFormatter(cellvalue, options, rowObject, 'ui-icon-plus', 'add-link-class', 'Add'); }}, {name: 'col2', formatter: function (cellvalue, options, rowObject) { return imageLinkFormatter(cellvalue, options, rowObject, 'ui-icon-trash', 'del-link-class', 'Delete'); }}, ... ]


jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置
基本用法:
Js代码   收藏代码
  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配合使用
下面是一个使用的例子:
Java代码   收藏代码
  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"}]  
 
Js代码   收藏代码
  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声明如下
Js代码   收藏代码
  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函数,该函数有三个签名
Js代码   收藏代码
  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函数,这里见官网的例子:
Js代码   收藏代码
  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:

© 著作权归作者所有

五大三粗
粉丝 163
博文 2293
码字总数 4767276
作品 0
广州
程序员
私信 提问
15 最棒的 jQuery 画廊滑块和模板教程

MERGING IMAGE BOXES WITH JQUERY ( Demo || Download ) MULTIMEDIA GALLERY FOR IMAGES, VIDEO AND AUDIO ( Demo || Download ) IMAGE ZOOM TOUR WITH JQUERY ( Demo || Download ) AUTOMAT......

红薯
2012/01/25
2.3K
4
240多个jQuery插件(2)

表格等(Tables, Grids etc.) UI/Tablesorter. jQuery ingrid. jQuery Grid Plugin. Table Filter - awesome!. TableEditor. jQuery Tree Tables. Expandable “Detail” Table Rows. Sortab......

五味格子
2011/05/11
309
0
20 个新鲜有用的 jQuery 插件

Supersized 3.2 – Fullscreen Slideshow jQuery Plugin Full screen background slideshow plugin for jQuery. Expanding Fullscreen Grid Portfolio The main idea is to have a grid lay......

红薯
2011/08/27
3.2K
6
超过 30 个有用的 CSS、jQuery插件和代码技巧

Grid Navigation Effects with jQuery The 30 CSS Selectors you Must Memorize Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Fixed Fade Out Menu: A CSS and jQuery Tutori......

小编辑
2011/08/23
3.9K
4
基于jquery开发的UI框架有哪些

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是...

UIleader
2017/09/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
1
0
微服务架构依赖图

基于spring-cloud-alibaba + dubbo

龙影
昨天
3
0
Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部