文档章节

jquery grid 自定义格式化程序

五大三粗
 五大三粗
发布于 2015/12/02 16:40
字数 955
阅读 40
收藏 0

你可以定义自己的格式化程序为特定列。 这通常是一个函数。 当格式化程序选项中设置这个不应该包含在引号而不是进入()——显示的函数的名称。 例如,

<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter}, ... ] ... });
  function currencyFmatter (cellvalue, options, rowObject) { // do something here return new_format_value } </script>
定义和参数

自定义格式化程序传递以下参数:

function myformatter ( cellvalue, options, rowObject ) { // format the cellvalue to new format return new_formated_cellvalue; }
注意返回的函数。 这个函数应该返回一个值,以正常工作。
cellvalue——是要格式化的值
选择——是一个对象包含以下元素
选择:{ rowId:消除colModel:厘米} rowId——在哪里行colModel对象的id的属性这一列无氧colModel jqGrid的数组
rowObject——是一个行数据表示格式确定的数据类型选择。 如果我们有数据类型:xml / xmlstring - rowObject xml节点,提供根据xmlReader如果我们有数据类型的规则:json / jsonstring - rowObject数组,根据jsonReader规则提供


恢复格式化

所 预定义的格式化程序 章所有预定义的类型兼容编辑模块。 这意味着数据、链接、电子邮件、转换等,这样他们就可以被编辑正确。 同样的方法(如getRowData和getCell)获取数据,使用这个恢复格式化为了得到原始值。 问题是:如果我们使用一个自定义格式化程序功能和想回原来的值如果我们使用编辑或方法getRowData getCell ?

答案是:您可以使用您自己的自定义恢复格式化功能。 这个函数可以用于colModel

显示图片和编辑图片的路径:

<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat}, ... ] ... });
  function imageFormat( cellvalue, options, rowObject ){ return '<img src="'+cellvalue+'" />'; } function imageUnFormat( cellvalue, options, cell){ return $('img', cell).attr('src'); } </script>
自定义恢复格式化函数传递以下参数:

cellvalue——是要恢复格式化的值(纯文本)。
选择——是一个对象包含以下元素
选择:{ rowId:消除colModel:厘米} rowId——在哪里行colModel对象的id的属性这一列无氧colModel jqGrid的数组
cellobject——是一个细胞jQuery对象。 这个对象可以用来获得不同的东西从细胞元素——通过jQuery示例(cellobject). html()可以用来获取html内容而不是文本。
例子

下面我们将模拟部分货币格式化程序使用一个自定义的格式和恢复格式化功能

<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency}, ... ] ... });
  function currencyFmatter (cellvalue, options, rowObject) {   return "$"+cellvalue; } function unformatCurrency (cellvalue, options) {   return cellvalue.replace("$",""); }   </script>
如果该值在网格中插入或更新是123.00,它将显示在网格中:123.00美元; 当我们使用getRowData getCell方法或任何编辑模块这一列的值将是123.00

创造共同的格式化程序功能

有时,你可能想要使用您的自定义格式/恢复格式化函数在很多地方的代码。 这当然可以定义上面的函数作为示例。 我们设计了格式化程序模块,这样就可以很容易扩展的开发人员,所以简化开发过程。 下面我们将讨论如何使你自己的可见的所有代码格式化程序功能。 

加载jqGrid Java脚本文件后您可以定义在脚本标记以下(或简单的创建自己的文件,包括头部部分)

<script type="text/javascript"> jQuery.extend($.fn.fmatter , { currencyFmatter : function(cellvalue, options, rowdata) { return "$"+cellvalue; } });
jQuery.extend($.fn.fmatter.currencyFmatter , { unformat : function(cellvalue, options) { return cellvalue.replace("$",""); } });
  </script>
然后在代码中你只需要做的是:

<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, align:"center", editable: true, formatter:'currencyFmatter'}, ... ] ... });
请注意,在这种情况下,您不需要指定恢复格式化功能。



© 著作权归作者所有

共有 人打赏支持
五大三粗
粉丝 159
博文 2250
码字总数 4671674
作品 0
广州
程序员
我淘到的各种jQuery Grid网格插件

如今,绝大多数网站都要依靠网格来进行布局,拥有一些好的Grid网格布局插件能大大地节约开发时间,还能在满足响应式布局的同时拥有迷人的外观。接下来,小编带大家来认识15款非常棒的响应式j...

lanmeimei
2014/03/05
0
0
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
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
[转]240多个jQuery插件

Query 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种...

穿越星辰
2010/05/13
0
0
[转]240多个jQuery插件

Query 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种...

inferrrrrr
2010/05/11
0
4

没有更多内容

加载失败,请刷新页面

加载更多

C++ std::function 和 std::bind

C++11提供了std::function和std::bind两个工具,用于引用可调用对象。这些可调用对象包括 普通函数,Lambda表达式,类的静态成员函数,非静态成员函数以及仿函数等。引用可调用对象,可以用于...

yepanl
今天
1
0
python:可迭代对象的索引

关于 python的range的用法: 注意是[ 开始,结束)的半开区间,不包括结束 http://www.runoob.com/python/python-func-range.html import collectionsfrom collections import Iterable字符串......

Oh_really
今天
2
0
docker-compose ,docker-stack

1.例子 version: "3"services: php: image: registry.cn-hangzhou.aliyuncs.com/lxepoo/apache-php5 ports: - "38080:80" networks: - my_php_mysql volum......

chenbaojun
今天
3
0
SQL_Server2000示例数据库NorthWind的分析(转)

SQL_Server2000示例数据库NorthWind的分析 表名:Categories(食品类别表) 表结构: 字段名称 数据类型 长度 允许为空 CategoryID(主键) int 4 否 CategoryName nvarchar 15 否 Description ...

QQZZFT
今天
1
0
laravel 5.5 Session store not set on request.

laravel 5.5 数据存入session,会出现Session store not set on request.错误。查了下laravel 5.5将session放到global middleware中,需要laravel的文件 ./app/Http/Kernel.php中的加上一句:...

MichaelShu
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部