关于jqGrig如何写自定义格式化函数将JSON数据的字符串转换为表格各个列的值
首先介绍一下jqGrid是一个jQuery的一个表格框架,现在有一个需求就是将数据库表的数据拿出来显示出来,分别有id,name,details三个字段,其中难点就是details字段,它的数据是这样的'{"watchDomain":"xxx.com",....省略......"":""}',也就是json数据字符串,现在要把它显示在前端jqGrid表格上,列名就是json数据的Key值,值就是对应的value值,jqGrid允许我们自定义格式化函数,思路大概就是这样,从后台获取到数据的时候,把details的列写一个格式化函数该列的数据取出来,然后赋值给一个全局变量。colModel里面的name为details的值隐藏掉,写个自定义函数,自定义函数代码大概如下
/*
*描述details列的数据格式化函数
**/
function detailsFmatter(cellvalue, options,rowObject)
{
text=JSON.parse(cellvalue);//把JSON字符串转换为JSON对象再赋值给全局变量text
return cellvalue;
}
上面的cellvalue就是detalis的列的值,假设我的数据库details的数据为'{"sex":"男","addr":"广州"}',那上面的text就是text={"sex":"男","name":"小王"},(需要注意的是如果不用JSON.parse(cellvalue)这个方法转换的话页面展示的就是undefine)
假如你的数据库字段为id,name,details 而你的前端表格要显示的是却是name,sex,addr你就把获取到的数据的id和details隐藏掉,也就是说本来有5个列的。id,name.details,sex,addr,现在就显示name,sex,addr。
,让其它不显示出来,然后在sex,addr的列各写一个自定义格式化函数,返回它的值,代码大概如下
function sexFmatter(cellvalue, options,rowObject)
{ var isNone='';
isNone=text.sex;
if(isNone==null || isNone=="")
{ return "";}
return text.sex;}
下面我把全部代码贴上来吧
colWid = wid/12-12;
var text='';//全局变量,获取details的json数据
var colModel = [ {name : "sequence",index : "sequence", label : "序号",width : 30, height : 50, sortable : false,editable : true,fixed : true,align : "center"},
{name : "id", index : "id", label : "id", width : 50, height : 50,sortable : false, hidden:true,editable : false, align : "center",search : false},
{name : "name", index : "name", label : "名字",width : colWid, height : 50,sortable : false,editable : false, align : "center",search : false},
{name : "details", index : "details", label : "描述",hidden:true,width : colWid, height : 50,sortable : false,editable : false, align : "center",search : false,formatter:detailsFmatter},
{name : "sex", index : "sex", label : "性别", width : colWid, height : 50,sortable : true,editable : false, align : "center",search : false,formatter:sexFmatter},
{name : "addr", index : "addr", label : "住址", width : colWid, height : 50, sortable : false, fixed : true, hidden : false, align : "center", search : false, editable :false,formatter:addrFmatter},
];
/*
*描述列的数据格式化函数
**/
function detailsFmatter(cellvalue, options,rowObject)
{
text=JSON.parse(cellvalue);//把JSON字符串转换为JSON对象再赋值给全局变量text
return cellvalue;
}
function sexFmatter(cellvalue, options,rowObject)
{ var isNone='';
isNone=text.sex;
if(isNone==null || isNone=="")
{ return "";}
return text.sex;}
function addrFmatter(cellvalue, options,rowObject)
{ var isNone='';
isNone=text.addr;
if(isNone==null || isNone=="")
{ return "";}
return text.addr;}
关于jqGrig如何写自定义格式化函数将JSON数据的字符串转换为表格各个列的值的更多相关文章
- [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")
javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢? 原因在于: ...
- eval函数解析json数据时加上圆括号的原因
var temp = eval("(" + data + ")"); //解析json数据 json是以”{}”的方式来开始以及结束的,在JS中,“{}”会被当 ...
- eval函数处理JSON数据需要加括号
在将服务器端构建好的JSON数据转化为可用的JavaScript对象时常常使用eval函数.如下: var dataJson = eval('(' + data + ')'); 在转化的时候需要将JS ...
- javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")
原因很简单:因为在js中{}表示一个语句块(代码段),所有加上"()"表示表达式
- python笔记5:装饰器、内置函数、json
装饰器 装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象. 先看简单例子: def run(): time.sleep(1 ...
- Python格式化处理json数据的方式
1.问题 在遇到json数据的过程中,我们经常需要获取json数据中某个值的操作,如果是用get方法去取比较繁琐,接下来介绍两种方式来取值. 2.jsonpath来格式化处理json数据 2.1介绍 ...
- 【转】让浏览器格式化显示JSON数据之chrome jsonView插件安装
jsonView 用来让Chrome浏览器能格式化的显示JSON数据. 以上是网上找的方式,且试验成功! 步骤: 1.打开 https://github.com : 2.搜索 jsonView 链接: ...
- 前端自定义format函数,做字符串格式化功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 日期格式化函数(可自定义)
js 日期格式化函数 DateFormat var DateFormat = function (datetime, formatStr) { var dat = datetime; var str ...
随机推荐
- 关于ubuntu16.04中mysql root登陆不了的情况下(大多是未设置密码的情况)
1.先将当前用户改成 root用户:sudo su 2.进入安装路径,我的是:cd /etc/mysql/ 3.打开debian.cnf : gedit debian.cnf 4.找到:user pa ...
- Node.js 框架
Node.js的是一个JavaScript平台,它允许你建立大型的Web应用程序. Node.js的框架平台使用JavaScript作为它的脚本语言来构建可伸缩的应用. 当涉及到Web应用程序的开发 ...
- Second Day: 关于Button监听事件的三种方法(匿名类、外部类、继承接口)
第一种:通过匿名类实现对Button事件的监听 首先在XML文件中拖入一个Button按钮,并设好ID,其次在主文件.java中进行控件初始化(Private声明),随后通过SetOnClickLis ...
- ios使用CocoaHTTPServer实现文件共享
CocoaHTTPServer下载地址:https://github.com/robbiehanson/CocoaHTTPServer 实现效果:在电脑端输入192.168.0.100:8080,出现 ...
- .NET 4.5.1 预览版新特性
上个月的微软Build大会上宣布了.NET 4.5.1的推出,Heydarian的这个演讲题为".NET开发中的新内容",涵盖了.NET Framework中一些重要的新特性. H ...
- Nova PhoneGap框架 第六章 使用Mock
在我们的框架中引入了一个很重要的设计,那就是使用Mock. 这里的mock是指cordova.mock.js文件,它模拟了PhoneGap(Cordova)的API,从而可以在浏览器中运行测试我们的程 ...
- NoSQL初探之人人都爱Redis:(4)Redis主从复制架构初步探索
一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...
- 在C#代码中应用Log4Net(一)简单使用Log4Net
首先让我们先把Log4Net跑起来,示例代码在文章最后面可以下载 1.先把Log4Net引入到工程中,为了演示方便,我们先建立一个winform程序.在程序的根目录下面,建立一个Libs文件夹,以便存 ...
- 几个常用Json组件的性能测试
上一篇文章中我已经介绍了JsonBuilder方案的整体思路以及一个版本的雏形代码,他现在已经是可以使用的了,但是因为是实时反射的,所以效率并不高. 鉴于几位博友对Json转换组件的性能有兴趣,我先放 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (42) ------ 第八章 POCO之使用POCO
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第八章 POCO 对象不应该知道如何保存它们,加载它们或者过滤它们.这是软件开发中熟 ...