zoukankan      html  css  js  c++  java
  • 关于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
  • 相关阅读:
    C++11:02decltype关键字
    git 源操作,分支操作
    git操作命令以及优点
    drf--序列化组件
    项目相关 --知识点
    vue框架:
    drf --解析器,异常模块,响应模块 序列化组件
    drf框架相关
    中间键 csrf跨站请求伪造 装饰器相关 auth模块
    多对多表的创建方式 forms组件 session与cookie
  • 原文地址:https://www.cnblogs.com/fanwencong/p/5706620.html
Copyright © 2011-2022 走看看