查找功能 | 功能展示 | ActiveReportsJS 示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script>
<script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-ui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"
/>
<script src="$DEMOROOT$/lib/purejs/license.js"></script>
<link rel="stylesheet" type="text/css" href="app.css" />
<script src="app.js"></script>
</head>
<body onload="load()" style="margin: 0">
<div id="root" style="height: 100vh"></div>
<div class="search-box">
<div class="search-content">
<input
id="searchStr"
type="text"
class="searchTerm"
placeholder="请输入所要查找的内容"
/>
<button type="submit" class="searchButton" onclick="search()">
查找
</button>
<button
id="searchNext"
type="submit"
class="searchButton searchButtonLast"
onclick="next()"
>
下一个
</button>
</div>
</div>
</body>
</html>

var viewer;
var results = []
var currentResult = -1;
function load() {
viewer = new ActiveReports.Viewer('#root', {language: 'zh'});
viewer.toggleSidebar();
viewer.open("products.rdlx-json");
reset();
}
function reset() {
results = [];
currentResult = -1;
viewer.highlight(null);
document.getElementById('searchNext').disabled = true;
}
function search() {
reset();
var text = document.getElementById('searchStr').value;
viewer.search({ text: text }, function(result) {
document.getElementById('searchNext').disabled = false;
results.push(result);
if(currentResult < 0) next();
}).then(function(status) {
console.log(results.length + "occurrences found", status);
});
}
function next() {
if(results.length == 0) {
viewer.highlight(null);
return;
}
var i = (currentResult + 1) % results.length;
currentResult = i;
viewer.highlight(results[i]);
}

/*Resize the wrap to see the search bar change!*/
.search-box {
width: 30%;
position: absolute;
top: 90%;
left: 5%;
z-index: 10000;
}
.search-content {
width: 100%;
position: relative;
display: flex;
flex-direction: row;
}
.searchTerm {
border: 3px solid #00B4CC;
border-right: none;
padding: 5px;
height: 30px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
flex-grow: 1;
}
.searchTerm:focus {
color: #00B4CC;
}
.searchButton {
height: 30px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
cursor: pointer;
font-size: 10pt;
}
.searchButton:disabled {
color: #0084CC;
}
.searchButtonLast {
border-radius: 0 5px 5px 0;
}