`
a3mao
  • 浏览: 563418 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqGrid学习 -------------- 自定义格式化类型

    博客分类:
  • Work
阅读更多
<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:要被格式化的值
options:对数据进行格式化时的参数设置,格式为:
{ rowId: rid, colModel: cm}
rowObject:行数据

数据的反格式化跟格式化用法相似。
<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。
创建通用的格式化函数
定义如下:
<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},
      ...
   ]
...
});

分享到:
评论

相关推荐

    jqGrid学习笔记1 - - - - jqGrid英语PDF文档

    此外,列的模板功能允许用户自定义单元格内容的渲染方式,实现更复杂的数据格式化。 在功能方面,jqGrid支持分页、排序、过滤、编辑、添加、删除等多种操作,极大地提高了数据管理的便捷性。分页功能可以轻松处理...

    jquery.jqGrid-3.5-beta

    此外,jqGrid还具有良好的国际化和本地化支持,可以方便地切换语言,适应全球化的项目需求。它的列模型设置灵活,可以定制每一列的显示方式,包括宽度、对齐方式、可编辑性等。并且,jqGrid提供了丰富的事件处理机制...

    jquery.jqGrid-4.5.4

    6. **数据格式化**:jqGrid 提供了多种内置的数据格式化器,如日期、数字等,也可以自定义格式化函数。 7. **导出功能**:支持将表格数据导出为 CSV、Excel 或 PDF 格式,便于数据分析或打印。 8. **响应式设计**...

    jQuery tonytomov-jqGrid-v4.5.2 插件

    jqGrid是基于jQuery库的,它提供了丰富的功能,如数据排序、分页、搜索、编辑以及自定义列等,使开发者能够轻松地实现复杂的数据展示和管理。 首先,jqGrid的核心特性包括: 1. 数据绑定:jqGrid支持多种数据源,...

    jquery.jqGrid-4.5.2.zip

    - 使用 JavaScript 初始化 jqGrid,配置表格的列、数据源、分页等参数。 - 可选:根据需求,添加自定义插件或调整样式。 5. **注意事项**: - 在使用 jqGrid 时,需要确保浏览器支持 jQuery,因为 jqGrid 是构建...

    jquery.jqGrid-4.4.5

    通过灵活的配置选项,开发者可以定制符合项目需求的界面和操作逻辑,同时,jqGrid支持JSON、XML、CSV等多种数据格式,方便与后端数据源进行交互。 二、jqGrid与jQuery UI的结合 jQuery UI是一套设计精美、功能完善...

    jqGrid-3.5.alfa-2

    1. 新增功能:可能引入了一些新的API函数或者特性,例如自定义操作按钮、更丰富的数据格式化选项等。 2. 性能优化:对数据加载速度、渲染效率等方面进行了优化,以提高整体性能。 3. 兼容性提升:可能增强了对不同...

    jquery.jqGrid-4.3.2.zip

    6. **国际化**:jqGrid支持多语言,可以轻松实现应用的国际化。 接下来,我们看看jqGrid 4.3.2的文件结构: - **css**:这个目录包含所有与jqGrid样式相关的CSS文件,例如`ui.jqgrid.css`是基本的样式表,用于定义...

    jquery.jqGrid-4.6.0

    jQuery.jqGrid是一个非常流行的JavaScript库,用于在Web应用程序中创建功能丰富的表格。这个压缩包“jquery.jqGrid-4.6.0”包含了该库的4.6.0版本,这是一个被广泛使用的稳定版本,提供了强大的数据网格功能,包括...

    free-jqgrid-4.15.5.tgz

    本文将深入探讨free-jqgrid-4.15.5版本,此版本包含了所有的js和css文件,为开发者提供了完整的jqGrid学习和应用资源。 一、jqGrid概述 jqGrid是一款基于jQuery的开源数据网格组件,它允许用户在网页上创建交互式...

    jqGrid-4.1.2

    它提供了丰富的功能,如数据分页、排序、过滤、编辑以及自定义格式化,使得前端开发人员可以方便地构建交互式的网格视图。4.1.2 版本是 jqGrid 的一个稳定版本,包含了对各种浏览器的良好兼容性以及多项性能优化。 ...

    jQgrid demo

    7. **自定义列**:jQGrid 允许开发者自定义列的显示,包括列宽、格式化、隐藏/显示等,以满足不同场景的需求。 8. **国际化**:jQGrid 支持多语言,可以轻松切换不同的语言环境。 9. **主题支持**:jQGrid 提供...

    jqGrid-4.15.2

    5. 自定义列:开发者可以自由定制表格的列,包括列宽、排序、隐藏、显示、格式化等,满足不同需求。 6. 扩展功能:jqGrid 提供了丰富的插件和扩展,如行选择、行拖放、树形结构展示、列头菜单、多级表头等,进一步...

    jquery.jqGrid-4.4.0.zip

    4. **多语言支持**:jqGrid 提供了多种语言的本地化文件,便于实现国际化。 5. **主题化**:jqGrid 遵循 jQuery UI 的主题系统,可以轻松地与现有的 jQuery UI 主题兼容,也可以创建自己的主题,以满足设计需求。 ...

    jquery.jqGrid-4.3.1.zip

    5. 导入导出:jqGrid允许用户将表格数据导出为Excel、PDF等多种格式,同时也可导入数据,增强了数据处理的灵活性。 6. 自定义行为:通过使用jQuery插件机制,开发者可以扩展和自定义网格的行为,实现各种复杂的功能...

Global site tag (gtag.js) - Google Analytics