文档章节

jquery grid 自定义格式化程序

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



© 著作权归作者所有

共有 人打赏支持
五大三粗
粉丝 157
博文 2215
码字总数 4578339
作品 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
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
[转]240多个jQuery插件

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

inferrrrrr
2010/05/11
0
4
django +jQuery Grid Plugin 实现表格前提自动分页, 排序

由于django 中文在前台显示乱码,本文使用了 先在用django模板生成表格,再用jQuery Grid对表格 进行处理。

yubochinese
06/26
0
0
初看jQuery,比较dojo与jQuery的不同点

以下观点是建立在我初看jQuery,但并没有对jQuery详细理解的情况下。 可能随着后面对jQuery的使用,而增加更深的了解。也可能发现我当初的观点是错误的。 大体浏览了一下jQuery的文档,发现j...

xpbug
2012/08/18
0
0
[备忘]Web应用UI框架收集~

->DWZ 基于jQuery的RIA组件,一直在更新,而且它将一些优秀的组件(如jQuery.validation、xhEditor)整合进来了,并没有一味地造轮子,推荐! http://code.google.com/p/dwz ->jQuery UI 优点...

leeoo
2011/12/24
0
1
可考虑在你下一个项目中使用的 50 个 Bootstrap 插件

可考虑在你下一个项目中使用的 50 个 Bootstrap 插件 作者 jopen 2014-11-12 09:54:16 阅读目录 1. Bootstrap Multiselect 2. Bootstrap Dialog 3. Bootstrap Confirmation 4. Bootstrap Ta......

~少司命~
2015/08/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

关于DCL双重锁失效及解决方案

关于DCL双重锁失效及解决方案 Double Check Lock (DCL)实现单例 DCL 方式实现单例的优点是既能够在需要时才初始化单例,又能够保证线程安全,且单例对象初始化后调用getInstance方法不进行...

DannyCoder
8分钟前
0
0
PowerDesigner 16.5 安装配置

PowerDesigner16.5破解版是一款业内领先且开发人员常用的数据库建模工具,PowerDesigner可以从物理和概念两个层面设计数据库,方便用户制作处清晰直观的数据流程图和结构模型,欢迎有需要的朋...

Gibbons
33分钟前
0
0
前端Tips: 创建, 发布自己的 Vue UI 组件库

创建, 发布自己的 Vue UI 组件库 前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI, Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: n...

ssthouse_hust
今天
1
0
大数据教程(2.13):keepalived+nginx(多主多活)高可用集群搭建教程【自动化脚本】

上一章节博主为大家介绍了目前大型互联网项目的keepalived+nginx(主备)高可用系统架构体系,相信大家应该看了博主的文章对keepalived/nginx技术已经有一定的了解,在本节博主将为大家分享k...

em_aaron
今天
4
0
Git 2.18版本发布:支持Git协议v2,提升性能

在最新的官方 Git 客户端正式版2.18中添加了对 Git wire 协议 v2 的支持,并引入了一些性能与 UI 改进的新特性。在 Git 的核心团队成员 Brandon Williams 公开宣布这一消息前几周,Git 协议 ...

六库科技
今天
0
0
Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
今天
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
今天
2
0
将博客搬至CSDN

AHUSKY
今天
2
0
Python web框架Django学习(1)

1.Django简介 (1)Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django是一个开放源代码的Web应用框架,由Python写成。 (2...

十年磨一剑3344
今天
0
0
Databook-数据之书

Databook-数据之书 用于数据分析的Jupyter Notebooks。 不需购买服务器,快速开始自己的数据分析过程。 源码:https://github.com/openthings/databook 作者:openthings,https://github.co...

openthings
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部