工作中需要用到Mergely插件进行对比差异。需求：Post两个不同的接口信息，获取Json报文，将两个Json报文进行对比，将对比差异结果进行展示。
Mergely：http://www.mergely.com/doc
具体中文解释的方法请参考：https://www.helplib.com/GitHub/article_114138
Mergely是一个在浏览器中交互/合并文件的JavaScript组件，适合比较文本：txt,html,xml,c,cpp,java
加入连接：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
<script src="lib/mergely/lib/mergely.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" href="lib/mergely/lib/mergely.css" />
在<body>中添加<div>,格式如下：
<div class="mergely-full-screen-8">
<div class="mergely-resizer">
<div id="mergely"></div>
</div>
</div>bootstraptable初始化：
var url = "/searchlog";
$('#LogTable').bootstrapTable('refresh');
$('#LogTable').bootstrapTable({
url: url,
method: "post",
sidePagination: 'client',
queryParams: queryParams,
responseHandler: responseHandler,//参数
striped: true,
pagination: true,
paginationFirstText: "首页",
paginationPreText: "上一页",
paginationNextText: "下一页",
paginationLastText: "末页",
toolbar:'#Toolbar',
onLoadSuccess: function (data) {
},
onLoadError: function () { //加载失败时执行
alert("加载数据失败");
},
pageNumber: 1,
pageList: [10, 30, 50],
pageSize: 10,
columns: [{field: 'orderId', title: '订单号', align: 'center', 100,height:120},
{field: 'serviceCode', title: 'serviceCode', align: 'center'},
{field: 'serviceName', title: '服务名', align: 'center'},
{field: 'appid', title: 'appid', align: 'center'},
{field: 'diffIp', title: 'IP地址(fat379)', align: 'center'},
{field: 'baseIp', title: 'IP地址(fws)', align: 'center'},
{field: 'clientId', title: 'clientId', align: 'center'},
{field: 'diffTime', title: '对比时间', align: 'center',order:'desc'},
{field: 'logToken', title: 'logToken', align: 'center'},
{field: 'uid', title: 'uid', align: 'center'},
{field: 'operate', title: '操作', align: 'center', events: "operateEvents", formatter: operateFormatter,100}],
onDblClickRow: function (row) {
},
onEditableSave: function (field, row, oldValue, $el) {
},
onDblClickCell: function (field, value, row, $el){
if (field === "diffTime"){
alert("对比时间不支持Tag筛选，可在开始时间栏，结束时间栏中选择");
}else {
var newValue = value;
if ($('#tag').val().indexOf(field) > -1){
var tags = $('#tag').val().split(";");
$.each(tags,function (index,value) {
var tag = tags[index].split('=');
if (value !== ""&&tag[0]===field) {
tag[1] = newValue;
tags[index] = tag.join('=');
}
});
$('#tag').val(tags.join(';'));
}else {
$('#tag').val($('#tag').val()+field+'='+value+';');
}
}
// alert("当前双击了"+value+" "+row+field);
}
});
function queryParams(params) { //配置参数
var request = {};
var timeRange = $('#starttime').val().split('~');
request.startTime = timeRange[0];
request.endTime = timeRange[1];
var params = {};
var paramsobj = $('#tag').val().split(';');
$.each(paramsobj,function (index,value) {
if (value !== ""){
var key = value.split('=')[0];
var arg = value.split('=')[1];
params[key] = arg;
}
});
request.params = params;
return request;
}
function responseHandler(res) {
var rows = [];
$.each(res.payload, function (index, value) {
var row = {};
if (!isEmptyObject(value)) {
row.orderId = value.orderId;
row.serviceCode = value.serviceCode;
row.baseResponse = value.baseResponse;
row.diffResponse = value.diffResponse;
row.appid = value.appid;
row.baseEnv = value.baseEnv;
row.baseIp = value.baseIp;
row.clientId = value.clientId;
row.diffEnv = value.diffEnv;
row.diffIp = value.diffIp;
var localeString = new Date(value.diffTime).format("yyyy-MM-dd hh:mm:ss");
row.diffTime = localeString;
row.logToken = value.logToken;
row.serviceName = value.serviceName;
row.uid = value.uid;
rows.push(row);
}
});
return rows;
}
function isEmptyObject(e) {
var t;
for (t in e)
return !1;
return !0
}
function operateFormatter(value, row, index) {
return [
'<button type="button" id="mirror" class="RoleOfA btn btn-success">查看详情</button>'
].join('');
}
window.operateEvents = {
'click .RoleOfA': function (e, value, row, index) {
// 禁用按钮防止重复提交
var baseResponse = JSON.parse(row.baseResponse);
baseResponse.ResponseStatus.Extension = [];
var baseResponsestring = JSON.stringify(baseResponse,null,2);
var diffResponse = JSON.parse(row.diffResponse);
diffResponse.ResponseStatus.Build = undefined;
diffResponse.ResponseStatus.Version = undefined;
var diffResponsestring = JSON.stringify(diffResponse,null,2);
$("#detailModal").modal({backdrop: 'static', keyboard: true });
$('#mergely').mergely('clear','lhs');
$('#mergely').mergely('clear','rhs');
$('#mergely').mergely('lhs',JSON.stringify(JSON.parse(baseResponsestring),null,2));
$('#mergely').mergely('rhs',JSON.stringify(JSON.parse(diffResponsestring),null,2));
console.log($('#mergely').mergely('diff'));
console.log(JSON.stringify($('#mergely').mergely('diff')));
$('#detailModal').modal('show');
}
};
$('#next').bind('click',function () {
$('#mergely').mergely('scrollToDiff', 'next');
}),
$('#prev').bind('click',function () {
$('#mergely').mergely('scrollToDiff', 'prev');
}),
$('#update').bind('click',function () {
$('#mergely').mergely('update');
})
}