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 最新版 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 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与jQuery库...
jqGrid是一款功能强大的JavaScript表格插件,用于在Web页面中展示和操作数据。它支持多种功能,包括数据分页、排序、搜索、编辑等。在本教程中,我们将深入探讨如何利用jqGrid实现数据的分组显示和统计,这对于数据...
在这个"jqGrid的自适应表格"示例中,我们将探讨如何利用jqGrid实现表格的自适应窗口大小,以及在单元格数据过多时如何优雅地处理显示。 首先,要创建一个基本的jqGrid,你需要在HTML文件中引入jQuery库和jqGrid的...
在这个主题中,我们将深入探讨如何使用jqGrid实现行的合并、添加行、删除行以及添加日期等功能。 首先,关于“行的合并”,在jqGrid中,可以使用`rowspan`属性来实现。例如,如果你有一组具有相同数据的连续行,你...
JqGrid是一款功能强大的JavaScript组件,主要用于创建交互式的数据网格,它在互联网应用中广泛用于展示和管理大量结构化的数据。JqGrid提供了一套丰富的API接口和配置选项,使得开发者能够灵活地定制表格的外观和...
首先,要在页面中引入jqGrid所需的CSS和JavaScript文件,通常包括`ui.jqgrid.css`和`jquery.jqGrid.min.js`。然后,你需要创建一个HTML表格元素,并为其添加`id`属性,这将是jqGrid的容器。 ```html ...
在JqGrid的`colModel`中,我们需要为操作列指定特定的属性来实现所需的功能。关键的两个属性是`edittype`和`formatter`。`edittype: 'select'`表示这一列的单元格将以下拉选择框的形式显示,而`formatter: ...
本篇文章将深入探讨如何在 jqGrid 中实现表格的一列编辑功能。 一、jqGrid 基础 在开始编辑表格之前,我们需要了解 jqGrid 的基本结构和配置。首先,引入 jqGrid 的必需库,包括 jQuery、jQuery UI CSS 文件、...
10. **自定义功能**:jqGrid允许开发者通过使用`formatter`和`unformatter`函数来自定义单元格的显示和解析,以及使用`beforeProcessing`回调来处理服务器返回的数据。 在WT.JqGrid这个压缩包中,可能包含了一个...
这篇文章将深入探讨如何利用jqGrid来实现类似Excel的录入功能,让用户能够在Web界面中进行高效的数据操作。 首先,我们需要了解jqGrid的基本结构。jqGrid是一个基于jQuery的插件,它通过HTML表格元素来呈现数据。你...
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提供的功能和扩展,提高开发效率和用户体验。