`
什么向往
  • 浏览: 81110 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jqgrid--自定义格式化

 
阅读更多
    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    
      
    }  

 

cellvalue:要被格式化的值
options:对数据进行格式化时的参数设置,格式为:
{ rowId: rid, colModel: cm}
rowObject:行数据

 

 

 

数据的反格式化跟格式化用法相似.

 

    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("$","");    
      
    }    

 表格中数据实际值为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>  

 

具体使用:

    jQuery("#grid_id").jqGrid({    
      
    ...    
      
       colModel: [     
      
          ...     
      
          {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},    
      
          ...    
      
       ]    
      
    ...    
      
    })  

 

 

 

 

分享到:
评论

相关推荐

    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-3.5-beta

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

    jquery.jqGrid-4.4.5

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

    free-jqgrid-4.15.5.tgz

    jqGrid是一款功能强大的JavaScript数据网格插件,广泛应用于Web应用程序中,用于展示和操作大量的结构化数据。本文将深入探讨free-jqgrid-4.15.5版本,此版本包含了所有的js和css文件,为开发者提供了完整的jqGrid...

    jquery.jqGrid-4.6.0

    8. **国际化**:支持多种语言,方便不同地区的用户使用。 9. **响应式设计**:适应不同屏幕尺寸,提供良好的移动设备体验。 在实际应用中,开发者通常会根据项目需求选择引入必要的jqGrid文件,通过配置选项来定制...

    jquery.jqGrid-4.5.2.zip

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

    jquery.jqGrid-4.3.2.zip

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

    jquery.jqGrid-4.3.1.zip

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

    jquery.jqGrid-4.0.0.zip

    5. **自定义列和模板**:允许开发者定义列的样式、宽度、对齐方式,并可以自定义模板来显示复杂格式的数据。 6. **事件驱动**:丰富的事件机制,如 "loadComplete"、"beforeSort" 等,使得开发者可以轻松响应用户...

    jquery.jqGrid-4.4.0.zip

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

    jqGrid-4.15.2

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

    jquery[1].jqGrid-4.1.0

    3. 多种数据源支持:jqGrid不仅支持本地数据,还可以通过AJAX从服务器获取数据,支持JSON、XML、CSV等多种数据格式。 4. 编辑模式:jqGrid提供了行内编辑、弹出式编辑和表单编辑三种模式,方便用户对表格中的数据...

    jqGrid-3.5.alfa-2

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

    jquery.jqGrid-3.6.4Demo

    `jQuery.jqGrid` 是一个基于 jQuery 的数据网格插件,它提供了丰富的数据管理、排序、筛选、编辑和格式化功能,适用于创建动态和交互式的表格。在 `3.6.4` 版本中,这个插件进行了优化和增强,提供了更美观的样式和...

    jquery.jqGrid-3.6.2.zip

    jQuery.jqGrid 是一个基于 jQuery 的开源网格插件,主要用于在网页上展示和管理大量结构化的数据。在版本 3.6.2 中,jqGrid 提供了一系列高效且功能丰富的特性,使得数据操作变得更加简单和直观。本篇文章将深入探讨...

Global site tag (gtag.js) - Google Analytics