工作中需要用到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', width: 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,width: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+"\n"+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');
})
}