jqGrid中对列表cell属性格式化设置主要通过colModel中formatter、formatoptions来设置
基本用法:
- jQuery("#jqGrid_id").jqGrid({
- ...
- colModel: [
- ...
- {name:'price', index:'price', formatter:'integer', formatoptions:{thousandsSeparator: ','}},
- ...
- ]
- ...
- });
formatter主要是设置格式化类型(integer、email等以及函数来支持自定义类型),formatoptions用来设置对应formatter的参数,jqGrid中预定义了常见的格式及其options:
integer
thousandsSeparator: //千分位分隔符,
defaulValue
number
decimalSeparator,//小数分隔符,如"."
thousandsSeparator,//千分位分隔符,如","
decimalPlaces,//小数保留位数
defaulValue
currency
decimalSeparator,//小数分隔符,如"."
thousandsSeparator,//千分位分隔符,如","
decimalPlaces,//小数保留位数
defaulValue,
prefix//前缀,如加上"$"
suffix//后缀
date
srcformat,//source的本来格式
newformat//新格式
email
没有参数,会在该cell是email加上: mailto:name@domain.com
showlink
baseLinkUrl,//在当前cell中加入link的url,如"jq/query.action"
showAction, //在baseLinkUrl后加入&action=actionName
addParam, //在baseLinkUrl后加入额外的参数,如"&name=aaaa"
target,
idName //默认会在baseLinkUrl后加入,如".action?id=1"。改如果设置idName="name",那么".action?name=1"。其中取值为当前rowid
checkbox
disabled //true/false 默认为true此时的checkbox不能编辑,如当前cell的值是1、0会将1选中
select
设置下拉框,没有参数,需要和colModel里的editoptions配合使用
下面是一个使用的例子:
- var datas = [
- {"id":1, "name":"name1", "price":123.1, "email":"abc@163.com", "amount":1123423, "gender":"1", "type":"0"},
- {"id":2, "name":"name2", "price":1452.2, "email":"abc@163.com", "amount":12212321, "gender":"1", "type":"1"},
- {"id":3, "name":"name3", "price":125454, "email":"abc@163.com", "amount":2345234, "gender":"0", "type":"0"},
- {"id":4, "name":"name4", "price":23232.4, "email":"abc@163.com", "amount":2345234, "gender":"1", "type":"2"}]
- colModel:[
- {name:'id', index:'id', formatter: customFmatter},
- {name:'name', index:'name', formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}},
- {name:'price', index:'price', formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}},
- {name:'email', index:'email', formatter: "email"},
- {name:'amount', index:'amount', formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}},
- {name:'gender', index:'gender', formatter: "checkbox",formatoptions:{disabled:false}},
- {name:'type', index:'type', formatter: "select", editoptions:{value:"0:无效;1:正常;2:未知"}}
- ],
其中customFmatter声明如下
- function customFmatter(cellvalue, options, rowObject){
- console.log(cellvalue);
- console.log(options);
- console.log(rowObject);
- return "["+cellvalue+"]";
- };
在页面显示的效果如下:
当然还得支持自定义formatter函数,只需要在formatter:customFmatter设置formatter函数,该函数有三个签名
- function customFmatter(cellvalue, options, rowObject){
- }
- //cellvalue - 当前cell的值
- //options - 该cell的options设置,包括{rowId, colModel,pos,gid}
- //rowObject - 当前cell所在row的值,如{ id=1, name="name1", price=123.1, ...}
当然对于自定义formatter,在修改时需要获取原来的值,这里就提供了unformat函数,这里见官网的例子:
- 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');
- }
附上官网DOC:
相关推荐
首先,要在页面中引入jqGrid所需的CSS和JavaScript文件,通常包括`ui.jqgrid.css`和`jquery.jqGrid.min.js`。然后,你需要创建一个HTML表格元素,并为其添加`id`属性,这将是jqGrid的容器。 ```html ...
jqGrid 最新版 3.7.2 离线帮助手册,方便各位查看 Installing jqGrid Before you begin System Requirements Download jqGrid Change Log How to Install How it Works My First Grid Basic Grid Conventions ...
`jqGrid`是一款基于JavaScript的开源数据网格组件,主要用于在Web应用中展示和管理大量结构化数据。它提供了丰富的特性和功能,包括数据的分页、排序、过滤、编辑以及对服务器端数据的异步操作。jqGrid与jQuery库...
jqGrid 3.7.2 版本 官方完整帮助手册,含有很多代码样例,方便大家查看学习。 Upgrading Upgrade from 3.6.4 to 3.6.5 Upgrade from 3.4.x to 3.5 Installing jqGrid Before you begin System Requirements Download...
jqGrid是一款功能强大的JavaScript表格插件,用于在Web页面中展示和操作数据。它支持多种功能,包括数据分页、排序、搜索、编辑等。在本教程中,我们将深入探讨如何利用jqGrid实现数据的分组显示和统计,这对于数据...
在这个"jqGrid的自适应表格"示例中,我们将探讨如何利用jqGrid实现表格的自适应窗口大小,以及在单元格数据过多时如何优雅地处理显示。 首先,要创建一个基本的jqGrid,你需要在HTML文件中引入jQuery库和jqGrid的...
在这个主题中,我们将深入探讨如何使用jqGrid实现行的合并、添加行、删除行以及添加日期等功能。 首先,关于“行的合并”,在jqGrid中,可以使用`rowspan`属性来实现。例如,如果你有一组具有相同数据的连续行,你...
JqGrid是一款功能强大的JavaScript组件,主要用于创建交互式的数据网格,它在互联网应用中广泛用于展示和管理大量结构化的数据。JqGrid提供了一套丰富的API接口和配置选项,使得开发者能够灵活地定制表格的外观和...
在JqGrid的`colModel`中,我们需要为操作列指定特定的属性来实现所需的功能。关键的两个属性是`edittype`和`formatter`。`edittype: 'select'`表示这一列的单元格将以下拉选择框的形式显示,而`formatter: ...
本篇文章将深入探讨如何在 jqGrid 中实现表格的一列编辑功能。 一、jqGrid 基础 在开始编辑表格之前,我们需要了解 jqGrid 的基本结构和配置。首先,引入 jqGrid 的必需库,包括 jQuery、jQuery UI CSS 文件、...
10. **自定义功能**:jqGrid允许开发者通过使用`formatter`和`unformatter`函数来自定义单元格的显示和解析,以及使用`beforeProcessing`回调来处理服务器返回的数据。 在WT.JqGrid这个压缩包中,可能包含了一个...
1. **单元格合并**:jqGrid允许在表格中合并单元格,这在显示具有层次结构的数据时非常有用。通过设置`cellattr`或`formatter`函数,可以控制单元格的样式,实现跨行或跨列的合并。例如,当某一列的值相同,我们可以...
4. **操作列**:jqGrid提供预定义的操作列,如编辑、删除、查看按钮,可以通过`formatter`和`actions`进行定制。也可以添加自定义列头菜单,扩展更多功能。 5. **排序与过滤**:用户可以通过点击列头进行数据排序,...
`colModel`是jqGrid中定义列的关键配置对象,每个列都有其对应的配置项,例如: 1. `align`: 定义列数据在单元格内的对齐方式,可以是`left`、`center`或`right`。 2. `datefmt`: 设置日期的显示格式,例如`Y-m-d`...
在项目中使用jqGrid,首先需要下载jQuery库和jqGrid插件。然后在HTML文件中引入这两个文件,通过`<script>`标签确保jQuery先于jqGrid加载。同时,需要设置CSS样式以呈现网格布局。 三、基本使用 创建一个jqGrid,...
jqGrid是一款功能强大的JavaScript数据网格插件,广泛用于Web应用程序中展示、操作和管理大量数据。它是基于jQuery库开发的,提供了丰富的特性和灵活的配置选项,使得在网页上创建交互式表格变得简单易行。 1. **...
在jqGrid 3.6版本中,配置表格涉及到多个方面,包括列模型(colModel)、编辑规则(editrules)、表单选项(formoptions)等。下面将详细介绍这些关键配置。 1. **colModel**: - `align`:设置列数据在单元格中的对齐...
jqGrid是一款基于jQuery的开源数据网格插件,它提供了强大的数据展示、编辑和管理功能,尤其适用于Web应用程序中展示大量的结构化数据。对于初学者来说,掌握jqGrid的应用是提升Web开发效率的重要一环。下面将详细...
这可以通过定义列模型中的`formatter`和`actions`实现。前端可以通过监听按钮点击事件,发送Ajax请求到后端进行数据更新。 总结一下,Spring MVC的分页组件结合JqGrid,可以构建出功能完善的表格展示和数据管理界面...
**深入研究jqGrid** jqGrid是一款非常强大的JavaScript数据网格组件,它允许开发者在网页上创建交互式的表格,用于展示和...在实际项目中,应结合具体需求,充分利用jqGrid提供的功能和扩展,提高开发效率和用户体验。