文档章节

jquery grid 自定义格式化程序

五大三粗
 五大三粗
发布于 2015/12/02 16:40
字数 955
阅读 43
收藏 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'}, ... ] ... });
请注意,在这种情况下,您不需要指定恢复格式化功能。



© 著作权归作者所有

共有 人打赏支持
五大三粗
粉丝 160
博文 2264
码字总数 4712446
作品 0
广州
程序员
私信 提问
基于jquery开发的UI框架有哪些

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

UIleader
2017/09/20
0
0
我淘到的各种jQuery Grid网格插件

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

lanmeimei
2014/03/05
0
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
0
0
18个最好的 jQuery 表格插件

我们一般使用HTML表格来显示数据,我们都知道div更容易设计,更灵活。但是现在你使用这些精彩的jQuery表格插件,将更简单、灵活、更多风格。 本篇文章介绍了18个非常不错的jQuery 表格插件,...

老枪
2011/04/06
77.6K
7

没有更多内容

加载失败,请刷新页面

加载更多

isEmpty和null的区别

isEmpty和null的区别: 1.一个是对象为空(IsNull),一个是值为空(IsEmpty) 2.IsNull指任务类型变量是否为空包括对象类型的变量。 IsNull函数: 功能:返回Boolean的值,指明表达是否不包...

DemonsI
11分钟前
0
0
Centos7 安装mysql与php

https://blog.csdn.net/qq_36431213/article/details/79576025 官网下载安装mysql-server 依次使用下面三个命令安装 wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.r......

Yao--靠自己
20分钟前
0
0
详解如何实现一个简单的 vuex

首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定,简单的非父子组件通信用 bus(一个空的 Vue 实例)。那么使用 vuex 就是为了解决复杂的非父子组件通信。 仅仅...

嫣然丫丫丫
25分钟前
1
0
算法——RangePartitioner实现之reservoirSample

简介 reservoir的作用是:**在不知道文件总行数的情况下,如何从文件中随机的抽取一行?**即是说如果最后发现文字档共有N行,则每一行被抽取的概率均为1/N? 我们可以:定义取出的行号为cho...

freeli
28分钟前
1
0
Python安装及netcdf数据读写

一、在CentOS7系统上安装Python3 在anaconda官网下载(http://https://www.anaconda.com/download/#linux)(Anaconda指的是一个开源的Python发行版本,是Python的包管理器和环境管理器) 下...

voole
32分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部