renderings
1. Use iframe to introduce the page
//Initialize the page on the right createHtml: function(flag) { $("#_result").css('width','100%'); $("#_result").css('height','100%'); if(flag) { var page = ` <div style="width:100%; height:100%"> <iframe frameborder="no" scrolling-y="yes" allowtransparency="yes" src="../business/ak_business/html/ak_xmtj/ak_fxpgjgtj.html?" style="list-style:none;width:100%;height:100%;"></iframe> </div>`; }else { var page = ` <div style="width:100%; height:100%"> <iframe frameborder="no" scrolling-y="yes" allowtransparency="yes" src="../business/ak_business/html/ak_xmtj/ak_fxsjjgtj.html?" style="list-style:none;width:100%;height:100%;"></iframe> </div>`; } $('#_result').html(page); var docuWidth = $(document).width(); _slipWin.upws(docuWidth*0.27); _slipWin.show(); $(".rightCallBackBox").height($("#ak_left4").height()); },
According to the business distinction, the flag is judged to refer to different pages. This code is triggered in the three-dimensional part, and the referenced page is within the business page structure.
2.html page
HTML page introduced by iframe
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="../../css/rightPage_common.css"/> <style type="text/css"> \t\t\t </style> </head> <body class="page-header-fixed page-sidebar-closed-hide-logo page-sidebar-closed-hide-logo" style="background-color: rgba(0,0,0,0); "> <!--#include virtual="../../common/head_global.html"--> <!--#include virtual="../../common/head_theme.html"--> \t\t <!-- Risk event organization statistics --> <div class="panel-heading"> <span id="head_title"></span> <img id="imgSlide" src="../../../build/slipWin/up.png"> <span id="head_total"></span> </div> <div class="panel-body" id="slide_body" style="display: none;"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:3px;opacity: 0.7;"> <!-- Risk level --> <div class="col-md-2"> <select id="severityCode" class="form-control" placeholder=""></select> </div> <!-- Risk status --> <div class="col-md-2"> <select id="state" class="form-control" data-size="3"> <option value ="">All risk status</option> <option value ="10">New</option> <option value ="20">Tracking in progress</option> <option value ="30">Disposal completed</option> </select> </div> </div> <div class="form-group" style="margin-top:3px;opacity: 0.7;"> <!-- Unit level --> <div class="col-md-2"> <select id="unitHierarchy" class="form-control" placeholder=""></select> </div> <!-- Categories of risk events --> <div class="col-md-2"> <select id="riskEventFirst" class="form-control" data-size="3"></select> </div> </div> <!-- Country/Province and City --> <div class="form-group" style="margin-top:3px;opacity: 0.7;"> <div class="col-md-2"> <select id="areaSecondCode" class="form-control" placeholder=""></select> </div> <div class="col-md-2"></div> </div> <!-- Query icon --> <!-- <div class="form-group" style="margin-top:3px;opacity: 0.75;"> <div class="col-md-2" style="display: flex;justify-content: start;position: relative;width: 94%;"> <input type="text" class="form-control serach_input" id="projectName" placeholder="Please enter the project name:" autocomplete="off"> <a href="javaScripts:;" class="serach_img" id="btn_query1"></a> </div> </div> --> <div class="form-group" style="margin-top:3px;margin-bottom: 0;justify-content: start;"> <div class="col-md-3" style="margin-left: 8px;"> <button type="button" id="btn_query" class="btn btn-primary" style="margin-left:5px;background-color: #1a4264;" >Query</button > <button type="button" id="btn_reset" class="btn btn-primary" style="margin-left:5px;background-color: #1a4264;" >Reset</ button> </div> </div> </form> </div> \t\t <div id="body"></div> <!-- Interestingly, the bottom.html file will only take effect if it is created in the html directory. --> <!--#include virtual="../../common/bottom.html"--> <script src="../../common/assets/global/plugins/bootstrap/js/bootstrap-paginator.js" type="text/javascript" charset="utf-8"> </script> </body> <script type="text/javascript" src="../../js/ak_xmtj/ak_fxsjjgtj.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { ak_fxsjjgtj.init(); }); </script> </html>
3. Script
Initialize query conditions and call background interface methods
//Receive request parameters initSearch: function() { this.offset = this.pagesize * (this.page - 1); \t\t ak_fxsjjgtj.temp = { Authorization:akglobe_config.token, limit: 10, offset: this.offset, severityCode: $("#severityCode").val(), // Risk level state: $("#state").val(), // Risk state unitHierarchy: $("#unitHierarchy").val(), // unit hierarchy riskEventFirst: $("#riskEventFirst").val(), // Risk event categories // name: $("#projectName").val(), // Project name in Chinese areaSecondCode: $("#areaSecondCode").val(), // country/province/city } ak_fxsjjgtj.getDate(); // Request list data },
Call the backend interface and pass the obtained data to the callback function
// Request list data interface query getDate: function() { var options = new Object(); options.url = "/manage-api/TRiskTjfxController/getRiskEventCountry"; options.type = "GET"; options.data = ak_fxsjjgtj.temp; options.errorback = akglobe_config.errBack; \t options.callback = function(data) { ak_fxsjjgtj.callBackGET(data); } // If it is a test environment, use fake data if(parent.typep002==2){ ak_fxsjjgtj.callBackGET(ak_ztqg.getRiskEventCountry); }else{ akglobe_config.ajaxQuery(options); } },
Call the initialization html and initialization paging methods in the callback function
callBackGET:function(data){ if(!data) return; $("#head_total").text(`(${data.total})`); // Total number next to the title \t\t ak_fxsjjgtj.initList(data); // Initialize html content ak_fxsjjgtj.initPage(data); // Initialize paging },
initializehtml
//Initialize html content initList: function(data) { var data = data.rows; var html = ""; html + = "<div id='pageid_obstacle' style='overflow-y:auto;overflow-x:hidden;margin-top:10px;'>"; html + = ak_fxsjjgtj.htmlTable(data); // List and paging html structure. html + = "</div>"; html + = "<div id='pagebottom_poi' class="pageListbottom"></div>"; html + = `<div id="Paginator" style="text-align: center"> <ul id="pageLimit"></ul> </div>`; $('#body').html(html); }, htmlTable: function(r) { var comlist = r; var length = r.length; var table = []; for(var i=0;i< length;i + + ){ var db = comlist[i]; var code = db.code; // Country/province and city code var name = db.name; // name //Exceeding characters are represented by ellipsis if(name) { if(name.length > 15) { name = name.substr(0, 15) + '...'; } }else{ name = ""; } var num = db.num; // quantity var x = db.x; // latitude var y = db.y; // longitude var jsonstr = JSON.stringify(db); // Convert json object to json string var index = i + 1; \t\t\t// first row table.push("<div style='position:relative'><input type='button' class='callBack_button1' style='width:80%;height:27px;margin-left : 10%;' value='" + name + "' onclick='ak_fxsjjgtj.handleEvent(" + jsonstr + ")' />"); table.push("<div style='position: absolute;width: 30px;height: 20px;top: 4px;left: 10%;color: #0a69fb;background-color: #d6c6ff;border-bottom-right -radius: 50%;border-top-right-radius: 50%;text-align: center;line-height: 20px;'>" + index + "</div>"); table.push("</div>"); \t\t\t// second line table.push("<div style='width: 80%;height: 30px;margin:0 auto;display:flex;justify-content:space-between;align-items: center;font-weight: normal; margin-bottom: 10px;'>"); table.push("<div style=''><span style='color:#fff'>Quantity:</span> & amp;nbsp;<a style='color:white;\ '>" + num + "</a></div>"); table.push("<div style=''><a style='color: #00FFFF' src='javaScript:;' onclick='ak_fxsjjgtj.handleEvent2(" + code + \ ")'>Risk events</a></div>"); table.push("</div>"); } return table.join(""); },
Set paging defaults in global variables
page: 1, // current page number pagesize: 10, // number of lines per page offset: 0, // used to calculate the current page number
Initialize paging
//Initialize paging initPage: function(data) { data.currenPage = parseInt(data.currenPage/this.pagesize + 1); if(data.currenPage == 1 || data.currenPage == data.pageCount) { var currenPage = data.currenPage; }else if(data.currenPage == 0){ var currenPage = data.currenPage + 1; }else { var currenPage = data.currenPage; } \t\t $('#pageLimit').bootstrapPaginator({ bootstrapMajorVersion: 3, //Corresponding bootstrap version currentPage: currentPage, //current page totalPages: data.pageCount == 0 ? 1 : data.pageCount, // Total number of pages size:"normal", //Page size alignment:"right", numberOfPages: 5, //Number of pages displayed // itemTexts: function (type, page, current) { // switch (type) { // case "first": return "Home"; // case "prev": return "previous page"; // case "next": return "next page"; // case "last": return "last page"; // case "page": return page; // } // }, /** *Page click event * @param event [jquery object] * @param originalEvent [dom native object] * @param type [button type] * @param page [the page number corresponding to the click button] */ onPageClicked: function (event, originalEvent, type, page) { // render(page);//Render the page based on the number of clicked pages ak_fxsjjgtj.page = page; // Number of clicked pages ak_fxsjjgtj.initSearch(); // Receive request parameters } }); },
4. Complete js script
//National statistics of risk events var ak_fxsjjgtj = { temp: null, // National statistics of risk events request parameters temp2: null, // Parameters specially used to handle all data annotations page: 1, // current page number pagesize: 10, // number of lines per page offset: 0, // used to calculate the current page number init: function() { $("#head_title").text("Statistics on the number of countries with risk events"); // Title \t\t this.initSearch(); // Receive request parameters this.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. this.ButtonInit(); // Initialize Button's click event //this.initSelect(); // Initialize the drop-down box // this.initDatepicker(); // Initialize time control this.initSlide(); // Initialization conditions for sliding and sliding out }, //Initialize time control initDatepicker:function (){ // Date control initialization $("#startTime").datepicker({ format: 'yyyy-mm-dd', minView:'month', language: 'zh-CN', autoclose:true }).on("click",function(){ $("#startTime").datepicker("setEndDate", $("#startTime").val()) }); $("#endTime").datepicker({ format: 'yyyy-mm-dd', minView:'month', language: 'zh-CN', autoclose:true }).on("click",function(){ $("#endTime").datepicker("setStartDate",$("#endTime").val()) }); }, //Initialization conditions for sliding and sliding out initSlide: function() { // title $(".panel-heading").click(function(){ var img = $("#imgSlide").attr("src"); if(img == '../../../build/slipWin/down.png') { $("#imgSlide").attr("src", '../../../build/slipWin/up.png'); }else { $("#imgSlide").attr("src", '../../../build/slipWin/down.png'); } $("#slide_body").slideToggle("slow"); }); }, //Initialize the drop-down box initSelect: function() { // risk level var options=new Object(); options.url="/manage-api/TRiskDictionController/TObjSelect"; options.defualtOption="All risk levels"; options.data = { codeSetId: 'fxdj' } options.id="severityCode"; akglobe_config.SelectInit(options); \t\t // unit level var options=new Object(); options.url="/manage-api/TRiskDictionController/TObjSelect"; options.defualtOption="All unit levels"; options.data = { codeSetId: 'dwcj' } options.id="unitHierarchy"; akglobe_config.SelectInit(options); \t\t // Risk event categories var options=new Object(); options.url="/manage-api/TRiskDictionController/TObjSelect"; options.defualtOption="All risk event categories"; options.data = { codeSetId: 'fxsjfl', parentId: '0' } options.id="riskEventFirst"; akglobe_config.SelectInit(options); \t\t //Country/province/city var options = new Object(); options.url = "/manage-api/TRiskDictionController/TObjSelect"; options.defualtOption = "All countries/provinces and cities"; options.data = { codeSetId: 'gjdq', } options.id = "areaSecondCode"; akglobe_config.SelectInit(options); }, // Generic function to obtain iframe nested page parameter values getQuery: function(url, name) { // console.log(url); var index = url.indexOf('?'); // Get the position of ? // If there are no parameters, return null if (index !== -1) { var query = url.substring(index + 1).split(' & amp;'); // Intercept the string and split the string into an array // console.log(query) // (2)['pageIndex=1', 'pageSize=10'] for (let i = 0; i < query.length; i + + ) { // console.log(query[i].split('=')) var itemArr = query[i].split('=') // Split the key-value pair of each parameter, if (itemArr[0] === name) { // Determine whether it is the key name you are looking for return itemArr[1] // Return the value of the corresponding key-value pair } } } return null }, //Receive request parameters initSearch: function() { this.offset = this.pagesize * (this.page - 1); \t\t ak_fxsjjgtj.temp = { Authorization:akglobe_config.token, limit: 10, offset: this.offset, severityCode: $("#severityCode").val(), // Risk level state: $("#state").val(), // Risk state unitHierarchy: $("#unitHierarchy").val(), // unit hierarchy riskEventFirst: $("#riskEventFirst").val(), // Risk event categories // name: $("#projectName").val(), // Project name in Chinese areaSecondCode: $("#areaSecondCode").val(), // country/province/city } ak_fxsjjgtj.getDate(); // Request list data }, //Request list data interface query getDate: function() { var options = new Object(); options.url = "/manage-api/TRiskTjfxController/getRiskEventCountry"; options.type = "GET"; options.data = ak_fxsjjgtj.temp; options.errorback = akglobe_config.errBack; \t options.callback = function(data) { ak_fxsjjgtj.callBackGET(data); } // If it is a test environment, use fake data if(parent.typep002==2){ ak_fxsjjgtj.callBackGET(ak_ztqg.getRiskEventCountry); }else{ akglobe_config.ajaxQuery(options); } }, callBackGET:function(data){ if(!data) return; $("#head_total").text(`(${data.total})`); // Total number next to the title \t\t ak_fxsjjgtj.initList(data); // Initialize html content ak_fxsjjgtj.initPage(data); // Initialize paging }, // Receive parameter 2 of the request, specifically all data is marked. initSearch2: function() { ak_fxsjjgtj.temp2 = { Authorization:akglobe_config.token, severityCode: $("#severityCode").val(), // Risk level state: $("#state").val(), // Risk state unitHierarchy: $("#unitHierarchy").val(), // unit hierarchy riskEventFirst: $("#riskEventFirst").val(), // Risk event categories // name: $("#projectName").val(), // Project name in Chinese areaSecondCode: $("#areaSecondCode").val(), // country/province/city } ak_fxsjjgtj.getDate2(); // All data annotation data interface }, //All data annotation data interface getDate2: function() { var options = new Object(); options.url = "/manage-api/TRiskTjfxController/getRiskEventCountry"; options.type = "GET"; options.data = ak_fxsjjgtj.temp2; options.errorback = akglobe_config.errBack; options.callback = function(data) { ak_fxsjjgtj.callBackGET2(data); } // If it is a test environment, use fake data if(parent.typep002==2){ ak_fxsjjgtj.callBackGET2(ak_ztqg.getRiskEventCountry); }else{ akglobe_config.ajaxQuery(options); } }, callBackGET2:function(data){ if(!data) return; parent.ak_left_click4.top3CallBackFxsj(data.rows); // Initialize 3D annotation }, \t //Initialize html content initList: function(data) { var data = data.rows; var html = ""; html + = "<div id='pageid_obstacle' style='overflow-y:auto;overflow-x:hidden;margin-top:10px;'>"; html + = ak_fxsjjgtj.htmlTable(data); // List and paging html structure. html + = "</div>"; html + = "<div id='pagebottom_poi' class="pageListbottom"></div>"; html + = `<div id="Paginator" style="text-align: center"> <ul id="pageLimit"></ul> </div>`; $('#body').html(html); }, htmlTable: function(r) { var comlist = r; var length = r.length; var table = []; for(var i=0;i< length;i + + ){ var db = comlist[i]; var code = db.code; // Country/province and city code var name = db.name; // name //Exceeding characters are represented by ellipsis if(name) { if(name.length > 15) { name = name.substr(0, 15) + '...'; } }else{ name = ""; } var num = db.num; // quantity var x = db.x; // latitude var y = db.y; // longitude var jsonstr = JSON.stringify(db); // Convert json object to json string var index = i + 1; \t\t\t// first row table.push("<div style='position:relative'><input type='button' class='callBack_button1' style='width:80%;height:27px;margin-left : 10%;' value='" + name + "' onclick='ak_fxsjjgtj.handleEvent(" + jsonstr + ")' />"); table.push("<div style='position: absolute;width: 30px;height: 20px;top: 4px;left: 10%;color: #0a69fb;background-color: #d6c6ff;border-bottom-right -radius: 50%;border-top-right-radius: 50%;text-align: center;line-height: 20px;'>" + index + "</div>"); table.push("</div>"); \t\t\t// second line table.push("<div style='width: 80%;height: 30px;margin:0 auto;display:flex;justify-content:space-between;align-items: center;font-weight: normal; margin-bottom: 10px;'>"); table.push("<div style=''><span style='color:#fff'>Quantity:</span> & amp;nbsp;<a style='color:white;\ '>" + num + "</a></div>"); table.push("<div style=''><a style='color: #00FFFF' src='javaScript:;' onclick='ak_fxsjjgtj.handleEvent2(" + code + \ ")'>Risk events</a></div>"); table.push("</div>"); } return table.join(""); }, //The child page passes the value to the parent page handleEvent: function (jsonstr) { // parent.ak_left_click3.clearTop2fgs(); // parent.ak_fgsObject_position.getData5(jsonstr); // Directly call the method of the parent element parent.ak_commonQuery.clicklabelNewCountry(jsonstr); // Directly call the method of the parent element }, // Jump to the details page handleEvent2: function(id) { var db = {}; db.areaSecondCode = id; // Country/province and city code db.levelCode = $("#severityCode").val(); // Risk level db.state = $("#state").val(); // Risk state db.unitHierarchy = $("#unitHierarchy").val(); // unit hierarchy db.riskEventFirst = $("#riskEventFirst").val(); // Risk event categories akglobe_config.setDDoptions(db, "ak_fxsjjgtjList"); // Set the parameters to be passed window.open(ak_config.tm_urm + 'ak_business/html/ak_fxpg/ak_fxsjjgtjList.html'); }, //Initialize paging initPage: function(data) { data.currenPage = parseInt(data.currenPage/this.pagesize + 1); if(data.currenPage == 1 || data.currenPage == data.pageCount) { var currenPage = data.currenPage; }else if(data.currenPage == 0){ var currenPage = data.currenPage + 1; }else { var currenPage = data.currenPage; } \t\t $('#pageLimit').bootstrapPaginator({ bootstrapMajorVersion: 3, //Corresponding bootstrap version currentPage: currentPage, //current page totalPages: data.pageCount == 0 ? 1 : data.pageCount, // Total number of pages size:"normal", //Page size alignment:"right", numberOfPages: 5, //Number of pages displayed // itemTexts: function (type, page, current) { // switch (type) { // case "first": return "Home"; // case "prev": return "previous page"; // case "next": return "next page"; // case "last": return "last page"; // case "page": return page; // } // }, /** *Page click event * @param event [jquery object] * @param originalEvent [dom native object] * @param type [button type] * @param page [the page number corresponding to the click button] */ onPageClicked: function (event, originalEvent, type, page) { // render(page);//Render the page based on the number of clicked pages ak_fxsjjgtj.page = page; // Number of clicked pages ak_fxsjjgtj.initSearch(); // Receive request parameters } }); }, //Initialize Button's click event ButtonInit: function() { // Query button $("#btn_query").click(function () { ak_fxsjjgtj.initSearch(); // Receive request parameters ak_fxsjjgtj.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. }); $("#btn_query1").click(function () { ak_fxpgjgtj.initSearch(); // Receive request parameters ak_fxpgjgtj.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. }); //reset button $("#btn_reset").click(function () { $("#severityCode").val(''); // Risk level $("#state").val(''); // Risk state $("#unitHierarchy").val(''); // Unit hierarchy $("#riskEventFirst").val(''); // Risk event categories $("#areaSecondCode").val(''); // Country/province and city ak_fxsjjgtj.initSelect(); // Initialize the drop-down box \t\t\t ak_fxsjjgtj.initSearch(); // Receive request parameters ak_fxsjjgtj.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. }); // Risk level drop-down box changes $("#severityCode").change(function () { ak_fxsjjgtj.initSearch(); // Receive request parameters ak_fxsjjgtj.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. }); // Risk status drop-down box changes $("#state").change(function () { ak_fxsjjgtj.initSearch(); // Receive request parameters ak_fxsjjgtj.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. }); // Unit level drop-down box changes $("#unitHierarchy").change(function () { ak_fxsjjgtj.initSearch(); // Receive request parameters ak_fxsjjgtj.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. }); // Risk event categories drop-down box changes $("#riskEventFirst").change(function () { ak_fxsjjgtj.initSearch(); // Receive request parameters ak_fxsjjgtj.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. }); // Country/province and city drop-down box changes $("#areaSecondCode").change(function () { ak_fxsjjgtj.initSearch(); // Receive request parameters ak_fxsjjgtj.initSearch2(); // Receive parameter 2 of the request, specifically all data is marked. }); }, //Convert date format (timestamp to datetime format) changeDateFormat2:function (cellval) { var dateVal = cellval + ""; if (cellval != null) { var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10)); var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); \t var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); return date.getFullYear() + "-" + month + "-" + currentDate + " "; } }, }