首先介绍一下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数据的字符串转换为表格各个列的值的更多相关文章

  1. [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")

    javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢?   原因在于: ...

  2. eval函数解析json数据时加上圆括号的原因

    var temp = eval("(" + data + ")"); //解析json数据 json是以”{}”的方式来开始以及结束的,在JS中,“{}”会被当 ...

  3. eval函数处理JSON数据需要加括号

    在将服务器端构建好的JSON数据转化为可用的JavaScript对象时常常使用eval函数.如下: var dataJson = eval('(' + data + ')'); 在转化的时候需要将JS ...

  4. javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")

    原因很简单:因为在js中{}表示一个语句块(代码段),所有加上"()"表示表达式

  5. python笔记5:装饰器、内置函数、json

    装饰器 装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象. 先看简单例子: def run(): time.sleep(1 ...

  6. Python格式化处理json数据的方式

    1.问题 在遇到json数据的过程中,我们经常需要获取json数据中某个值的操作,如果是用get方法去取比较繁琐,接下来介绍两种方式来取值. 2.jsonpath来格式化处理json数据 2.1介绍 ...

  7. 【转】让浏览器格式化显示JSON数据之chrome jsonView插件安装

    jsonView 用来让Chrome浏览器能格式化的显示JSON数据. 以上是网上找的方式,且试验成功! 步骤: 1.打开 https://github.com : 2.搜索 jsonView 链接: ...

  8. 前端自定义format函数,做字符串格式化功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 日期格式化函数(可自定义)

    js 日期格式化函数 DateFormat var DateFormat = function (datetime, formatStr) { var dat = datetime; var str ...

随机推荐

  1. TreeView 使用方法:(在View.Details模式下)

    1.建立TreeView的標題         2.建立TreeView的Item         3.在TreeView的Item中的建立SubItem                  如果將各部 ...

  2. 混搭.NET技术

    新闻 .NET技术+25台服务器怎样支撑世界第54大网站 再度燃起人们对.NET的技术热情.这篇新闻中透露了StackExchange 在技术方面的混搭,这也是我所崇尚的.因此我也在社区里极力推广Mo ...

  3. .NET中的DES对称加密

    DES是一种对称加密(Data Encryption Standard)算法,于1977年得到美国政府的正式许可,是一种用56位密钥来加密64位数据的方法.一般密码长度为8个字节,其中56位加密密钥, ...

  4. 【性能为王】从PHP源码剖析array_keys和array_unique

    之前在[译]更快的方式实现PHP数组去重这篇文章里讨论了使用array_flip后再调用array_keys函数替换直接调用array_unique函数实现数组去重性能较好.由于原文没有给出源码分析和 ...

  5. EasyPR--一个开源的中文车牌识别系统

    我正在做一个开源的中文车牌识别系统,Git地址为:https://github.com/liuruoze/EasyPR. 我给它取的名字为EasyPR,也就是Easy to do Plate Reco ...

  6. Linux学习之Exam系统发布

    配置时间:2015年11月27日 配置人:撰写人:微冷的雨   Happy 01.Linux安装图 欢迎页面 桌面 02.Linux命令之文件目录操作 给北大青鸟五道口校区创建三个机房(L4,L5,L ...

  7. 【玩转单片机系列002】 如何使用STM32提供的DSP库进行FFT

    前些日子,因为需要在STM32F103系列处理器上,对采集的音频信号进行FFT,所以花了一些时间来研究如何高效并精确的在STM32F103系列处理器上实现FFT.在网上找了很多这方面的资料做实验并进行 ...

  8. 支持向量机(SVM)复习总结

    摘要: 1.算法概述 2.算法推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 其基本模型定义为特征空间上的间隔最大的线性分类器,即支持向量机的学习策略 ...

  9. Node.js教程系列~目录

    Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...

  10. uwp 图片切换动画

    最近在学习安卓,LOL自定义战绩项目近乎停工,而且腾旭把界面全改了,好烦.刚好学习到安卓中的图片切换动画,我就想在LOL项目中实现一个.首先上百度查看一下,妈的,资料少的可怜. 还是自己来吧.自定义控 ...