• 关于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;}

    QQ交流群:494389786 个人网站:www.fanwencong.com
  • 相关阅读:
    三代测序及基于三代数据的基因组组装流程评估
    组装技术的新进展 New advances in sequence assembly.
    细菌完成图组装软件简单介绍 细菌
    个人基因组测序将进入千美元费用时代
    HALC:用于长读取错误纠正的高吞吐量算法
    基因组装配新前沿:长片段完成完整的基因组
    第三代PacBio测序技术的测序原理和读长
    三代组装小基因组研究综述
    矩阵连乘 动态规划
    poj 1723 中位数
  • 原文地址:https://www.cnblogs.com/fanwencong/p/5706620.html
Copyright © 2020-2023  润新知