jqGrid学习总结_5 使用formatter

1、formatter与unformat官网：

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter

formatter:functionFormatter(cellvalue, options, rowObject){}

//cellvalue - 当前cell的值

//options - 该cell的options设置，包括{rowId, colModel（当前行的属性），grid(当前表格)，pos

//rowObject - 当前row数据，

关于formatter属性应用，推荐博客地址：http://mj4d.iteye.com/blog/1634857

2、formatter处理图片，即让图片显示在单元格中（一般用于不可编辑的行）

{name:"paramValue",index:"paramValue",edtiable：false，editType："text",

formatter:functionimageFormatter(cellvalue, options,rowObject){

if(cellvalue==1){

return “<imgsrc=‘"+contextPath+"/page/img/alarmflag.png'/>”;//图片地址

}elseif(cellvalue==2){

return “<imgsrc=‘"+contextPath+"/page/img/normalflag.png'/>”;//图片地址

}

动态添加图片到单元格也是修改edittype属性：

$("#editGrid").setColProp("paramValue",{

editytype:"image" ,

formatter:functionimageFormatter(cellvalue, options, rowObject){

if(cellvalue==1){

return “<imgsrc=‘"+contextPath+"/page/img/alarmflag.png'/>”;//图片地址

}elseif(cellvalue==2){

return “<imgsrc=‘"+contextPath+"/page/img/normalflag.png'/>”;//图片地址

}

})

3、formatter和unformat处理checkbox（select）

$("#editGrid").setColProp("paramValue",{

editytype:"checkbox" ,

editoptions：{value："ON:OFF"}//value值可以根据需求修改

formatter:functioncheckboxFormatter(cellvalue, options, rowObject){

if(cellvalue==1){

returnON；//当单元格的值为1时，显示在界面的值是ON,即选择

}elseif(cellvalue==2){

returnOFF；//当单元格的值为2时，显示在界面的值是OFF，即未选择

}

unformat:functioncheckboxunformat(cellvalue, options, rowObject){

if(cellvalue=="ON"){

return1；//当单元格的值为ON时，即选择，用getRowData获得当前行的 //paramValue的值为1,

}elseif(cellvalue=="OFF"){

return0；//当单元格的值为OFF时，即未选择，用getRowData获得当前行的 //paramValue的值为0

}

})

jqGrid学习总结_5 使用formatter相关推荐

jqgrid 学习资料
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. jQgrid 使用 ...
jqGrid 学习笔记整理——基础篇
jqGrid 学习笔记整理--基础篇 jqGrid 实例中文版网址:http://blog.mn886.net/jqGrid/ 国外官网:http://www.trirand.com/blog/ 本人 ...
jqGrid学习笔记（一）
原文地址为: jqGrid学习笔记(一) jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信.文档比较全面,其官方网址为: h ...
jqGrid 学习笔记整理——进阶篇（一）
jqGrid 学习笔记整理--进阶篇(一 ) 本篇为基础篇的扩展,使其具有增.删.改.查的基本功能. 在浏览导航栏添加所需按钮 <!DOCTYPE html> <html>&l ...
jqgrid学习(三)
1.修改jqgrid自带的行编辑按钮样式 //jqgrid默认的行编辑样式 {name : '',index : '',width : 70,fixed : true,sortable : false ...
jqGrid学习笔记
一.jqGrid的加载. 1.引用相关头文件引入CSS: <link href="Scripts/jquery-ui-1.8.1.custom.css" rel=" ...
jqgrid 单元格数据格式化 formatter formatoptions
jqGrid中对列表cell属性格式化设置主要通过colModel中formatter.formatoptions来设置. jQuery("#jqGrid_id").jqGrid( ...
【转】jqGrid学习之参数
jqGrid参数名称类型描述默认值可修改 url string 获取数据的地址 datatype string 从服务器端返回的数据类型,默认xml.可选类型:xml,local,json, ...
ASP.NET MVC and jqGrid 学习笔记 2-如何从本地获得数据
上回说到jqgrid的基本配置,同时演示了显示数据的一种方法--datatype: "local".这种方法是从本地获取的,确切地说是在前端页面的javascript里写的硬编码. ...

jqGrid学习总结_5 使用formatter

jqGrid学习总结_5 使用formatter相关推荐

最新文章

热门文章