含有function的JSON对象转换字符串与反转

最新推荐文章于 2024-09-10 08:48:38 发布

ao123056

最新推荐文章于 2024-09-10 08:48:38 发布

阅读量4.3k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/ao123056/article/details/98728814

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

因为项目需要，需要将easyui中的datagrid列动态排序，所以需要将默认的一些配置存入数据库中，如下的格式：

[

  {
      field: 'FID', title: 'id', hidden: 'true', width: 100

  },

{
    field: 'FCode', halign: 'center', title: '工号', width: 100, fixed: true
},

   field: 'FName', halign: 'center', title: '姓名', width: 100, fixed: true
,
   {
       field: 'FThisYearGoalFloatBonus', halign: 'center', title: '本年目标浮<br />动奖金', width: 100, formatter: function (value, row, index) {
           var fmt = Common.GetThousandNum(value);
           return fmt;
       }
   },
  {
      field: 'FBonusProposedValue', halign: 'center', title: '奖金建议值', width: 100, fixed: true, formatter: function (value, row, index) {
          var fmt = Common.GetThousandNum(value);
          return fmt;
      }
  },

    {
        field: 'FFirstBonus', halign: 'center', title: '初评奖金', width: 100, fixed: true, editor: {
            type: 'numberbox'
           , options: { required: true, precision: 2 }
        }, formatter: function (value, row, index) {
            var fmt = Common.GetThousandNum(value);
            return fmt;
        }
    },

    {
        field: 'FFirstAppraise_Desc', halign: 'center', title: '初评人评审说明', width: 120, fixed: true, editor: {
            type: 'textbox'
            //,options: { required: true }
        }
    }
]

因为默认没有配置排序的功能的，所以这里需要自己去实现

整体思路。将类似上面的这种JSON数据转换为字符串直接存入数据库中，在页面加载的时候查出字符串并转换回数组类型然后绑定到datagrid即可实现功能，这里面涉及到2个关键地方，

1、前台的拖动排序，这边实现前台的拖动排序是使用的dragsort.js 前台js插件实现的

2、对json中function的处理，如果不对此进行处理的话转换为字符串后会将formatter给忽略掉，造成数据显示异常

数据库设计如下图

datagrid中可以有冻结列和非冻结列，所以这边设计了两个字段存储

首先是插入默认的列排序内容，然后每个人可以在页面对默认的顺序进行调整排序，然后再存入数据库，下次查询的时候会优先

查询出自己账号下的配置，没有自定义配置会取默认配置

排序页面如图，其中每一个模块都是可以进行拖动排序的，比如将三级部门拖到了自由排序列中的第一位

页面html代码如下

  <div class="g-popwrap" id="AppDialog">
        <div class="g-popup">
            <div class="m-addapp">
                <div class="addapp-title">
                  
                    <h3><b><span id="AppDialogTitle"><span class="app-title">冻结列</span></span></b></h3>
                </div>

                <div class="addapp-current">
                    <div class="addapp-list" id="forzenDialogCurrent"></div>
                </div>
                <div class="addapp-title">

                    <h3><b><span><span class="app-title">自由排序列</span></span></b></h3>
                </div>

                <div class="addapp-current">
                    <div class="addapp-list" id="otherDialogCurrent"></div>
                </div>
                
            </div>
        </div>
    </div>

这里将配置查出来解析后赋值到 forzenDialogCurrent 与otherDialogCurrent中

页面绑定后html如下

这里需要将某个列的内容存入变量中在存入数据库中时取出来使用，这里存成自定义属性data-field中

以上实现的过程是，

1、查询数据库查询出冻结列与自由列的json字符串并转换为json对象（类似最上面的json格式），这里需要对json特殊处理因为json中是含有function的，column_datas就是处理成功后的json数组了

   myAjax({
            url: '/FirstAppraise/FirstAppraise/GetColumnsData',
            data: {type:0},
            type: 'get',
            cache: false,
            dataType: 'json',
            async: false
        }, function (data) {
             column_datas = JSON.parse(data.Data.FColumns, function (k, v) {
                if (v.indexOf && v.indexOf('function') > -1) {
                    return eval("(function(){return " + v + " })()")
                }
                return v;
            });
             frozen_column_datas = JSON.parse(data.Data.FFrozenColumns, function (k, v) {
                if (v.indexOf && v.indexOf('function') > -1) {
                    return eval("(function(){return " + v + " })()")
                }
                return v;
            });
        }, function (err) {
            DiaModal.error('获取列表排序数据异常');
        });

2、自定义排序时将json对象处理后循环将json中的内容赋值到html中，比如冻结列的处理

if (frozen_column_datas.length > 0) {
           
            for (var i = 0; i < frozen_column_datas.length; i++) {
                var model = frozen_column_datas[i];
                var data_field = JSON.stringify(model, function (key, val) {
                    if (typeof val === 'function') {
                        return val + '';
                    }
                    return val;
                });
                html += '<div class="current-item" id="current_frozen_' + i + '"><span class="item-name" title="' + model.title + '" data-field=\'' + data_field + '\'>' + model.title + '</span><i class="image-remove pull-right"></i></div>';
            }
        }
        $('#forzenDialogCurrent').html(html);
        if (!IsInitfrozenDragEvent)
        {
            $("#forzenDialogCurrent").dragsort({ dragSelector: "div", dragBetween: false, placeHolderTemplate: "<div class='placeHolder current-item'></div>" });//, dragEnd: saveOrder
            IsInitfrozenDragEvent = true;
        }

上面代码中dragsort初始化一次就可以了，多次初始化会出现问题，所以这里IsInitfrozenDragEvent用来判断是否第一次初始化，第2步的代码就可以生成可拖动排序的页面了

3、取出排序好的html内容，组合成json字符串然后存入数据库即可完成个人配置了

   var frozenColumns = [];
        var otherColumns = [];
        $("#forzenDialogCurrent").find("span").each(function (i) {
       
            frozenColumns.push(JSON.parse($(this).attr('data-field')));
        })
        $("#otherDialogCurrent").find("span").each(function (i) {
            
            otherColumns.push(JSON.parse($(this).attr('data-field')));
        })
        var model = { FFrozenColumns: JSON.stringify(frozenColumns), FColumns: JSON.stringify(otherColumns), FType: 0 };

其中对含有function的json对象转换字符串与字符串转换为对象的方法

// json对象转换成字符串
var str = JSON.stringify(json, function(key, val) {
  if (typeof val === 'function') {
    return val + '';
  }
  return val;
});
// json字符串转换成对象
var json = JSON.parse(str,function(k,v){
  if(v.indexOf && v.indexOf('function') > -1){
     return eval("(function(){return "+v+" })()")
  }
  return v;
});