关于jqGrig如何写自定义格式化函数将JSON数据的字符串转换为表格各个列的值

时间：2021-03-30 16:35:36

首先介绍一下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;}

相关文章