含有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: saveOrderIsInitfrozenDragEvent = 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;
});

含有function的JSON对象转换字符串与反转相关推荐

Java对象转换成JSON对象/JSON对象转换成JSON字符串/JSON字符串转换成JS对象
文章目录后端部分前端部分后端部分 Option op = new Option("海淀","hd");//java对象转换json对象 JSONObjec ...
微信小程序开发——json对象和字符串转换
JSON对象和字符串的互转 // json对象 let jsonitem = {"key":"网站","name":"百度&quo ...
json字符串转换成json对象，json对象转换成字符串，值转换成字符串，字符串转成值...
json字符串转换成json对象,json对象转换成字符串,值转换成字符串,字符串转成值原文:json字符串转换成json对象,json对象转换成字符串,值转换成字符串,字符串转成值主要内容: 一 ...
json字符串转成 json对象 json对象转换成java对象
import com.alibaba.fastjson.JSONArray;import com.alibaba.fastjson.JSONObject; 依赖包 <dependency> ...
对象转换字符串格式的JSON
开发工具与关键技术:Eclipse 10.java 作者:梁添荣撰写时间:2020-04-28 有时我们传到页面的json数据,如果有日期格式,则不会以我们想要的格式去输出,这是我们可以自定义工具, ...
JSON对象与字符串之间的转换
JSON对象与字符串之间的转换 JSON转换成字符串字符串转换成JSON JavaScript中内置了一个JSON对象,可以用来进行JSON与字符串之间的转换. JSON转换成字符串使用:JSON ...
javascript json对象转字符串形式
2019独角兽企业重金招聘Python工程师标准>>> /*** json对象转字符串形式*/function json2str(o) {var arr = [];var fmt = ...
JSON 对象和字符串对象的互转
JSON.stringify( json ); 此方法可以把一个 json 对象转换成为 json 字符串 JSON.parse( jsonString ); 此方法可以把一个 json 字符串转换成 ...
json对象与字符串互转
在页面代码寻找问题时,页面中代码太多,一下看不过来,于是想把页面中的对象直接复制出来,可通过JSON相关方法实现: JSON.parse(jsonstr); //可以将json字符串转换成json对象 ...

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

含有function的JSON对象转换字符串与反转相关推荐

最新文章

热门文章