最近为了提升用户使用的便捷性,要求在日志查询界面加入双击某条日志,查看相关日志的功能,就好像我通过这条日志定位到日志文件中的某行,然后就像在文件中查看一样,上下滚动,看全部的日志,以下,和大家分享这是如何做到的。
自动滚屏 :
原理图:
html部分:
搜索窗口:
<table class="easyui-datagrid" id="resultContext" title="搜索结果" style="width:98%;height:600px;"
data-options="singleSelect:true,collapsible:true,nowrap:false,<span style="color:#ff0000;background-color: rgb(255, 255, 153);">onDblClickRow:showMore"</span> pagination="true">
<thead>
<tr>
<th data-options="field:'localHostIp',align:'left'" style="width:10%">Ip</th>
<th data-options="field:'localHostName',align:'left',hidden:true" >机器名称</th>
<th data-options="field:'domain',align:'left',hidden:true">域名</th>
<th data-options="field:'contextType',align:'left'" formatter="getLowercaseletters" style="width:10%">日志类型</th>
<th data-options="field:'context',align:'left'" style="width:78%">日志内容</th>
<th data-options="field:'level',align:'left',hidden:true" >级别</th>
<th data-options="field:'created',align:'left',hidden:true" formatter="getLocalTime" >生成日期</th>
<th data-options="field:'remark',align:'left',hidden:true">备注</th>
</tr>
</thead>
</table>
function showMore(){
var row = $("#resultContext").datagrid("getSelected");
var showMoreUrl ="";
showMoreUrl ="$!homeModule.getTarget("/es/showmore.action")";
showMoreUrl = showMoreUrl+"?created_begain_more_info="+row.created+"&localHostIp="+row.localHostIp+"&domain="+row.domain;
w<span style="color:#ff0000;background-color: rgb(255, 255, 153);">indow.open(showMoreUrl)</span>;
}