Mergely学习文档（联机合并差异文档）

最新推荐文章于 2023-09-18 21:21:53 发布

dengjiao5378

最新推荐文章于 2023-09-18 21:21:53 发布

阅读量639

点赞数

文章标签： javascript 大数据 json ViewUI

原文链接：http://www.cnblogs.com/CherishZeng/p/9541710.html

版权

工作中需要用到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');
            })
    }

转载于:https://www.cnblogs.com/CherishZeng/p/9541710.html

dengjiao5378

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Mergely学习文档（联机合并差异文档）

工作中需要用到Mergely插件进行对比差异。需求：Post两个不同的接口信息，获取Json报文，将两个Json报文进行对比，将对比差异结果进行展示。Mergely：http://www.mergely.com/doc具体中文解释的方法请参考：https://www.helplib.com/GitHub/article_114138Mergely是一个在浏览器中交互/合并文件...
复制链接

扫一扫