含有function的JSON對象轉換字符串與反轉

因爲項目需要，需要將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;
});