当前位置：网站首页>[H5 development] 02 take you to develop H5 list page ~ including query, reset and submission functions
[H5 development] 02 take you to develop H5 list page ~ including query, reset and submission functions
2022-06-26 04:30:00 【Rachel】
Don't be afraid of loneliness , Because there is always someone in this world who is trying to come to you .
Review of the previous section ： Take you through... From a simple page H5 Development https://blog.csdn.net/Sabrina_cc/article/details/119865234
In this section, let's make a slightly more difficult page . First, the prototype and UI Design
Learn about the main features ：（1） Database access list data display （2） year 、 quarter 、 department 、 Position query （3） Reset （4） Click an item to pop up the scoring box - Get the scoring details of this data and display （5） Click the Save button to send the request 、 Submit data （6） Click the submit button by year 、 Submit all records quarterly .
It is more complicated than yesterday , But step by step , Let's start now .
1. Write the front-end static page first according to the design draft
<body>
<div class='top'></div>
<div id="index-mask" class="index-mask" title=" Evaluation - home page ">
<div class="dqkhzq">
<span class="khzq"> Current appraisal cycle ：</span>
</div>
<div class="allDiv">
<div class="divWrap" style="position:relative">
<div class="divLeft"> year </div>
<div class="divRight" id="year" style="padding-right:0.4rem;"> <input placeholder=' Please select ' value="2021"
style="border:none;text-align:right;" id="yearInit" />
</div>
<img src="./images/kaoqin/xiala.png" style="width:0.25rem;height:0.14rem;position: absolute;
top: 0.35rem;right:0.4rem;" />
</div>
<div class="hpVertical"></div>
<div class="divWrap" style="position:relative">
<div class="divLeft"> quarter </div>
<div class="divRight" id="jidu" style="padding-right:0.4rem;"> <input id="jiduInit" placeholder=" Please select "
value=" The second quarter " style="border:none;text-align:right;" />
</div>
<img src="./images/kaoqin/xiala.png" style="width:0.25rem;height:0.14rem;position: absolute;
top: 0.35rem;right:0.4rem;" />
</div>
</div>
<div class='allDiv'>
<div class="divWrap" style="position:relative">
<div class="divLeft"> department </div>
<div class="divRight" id="bumen" style="padding-right:0.4rem;"> <input id="bumenInit" placeholder=' Please select '
style="border:none;text-align:right;" />
</div>
<img src="./images/huping/xiala.png" style="width:0.25rem;height:0.14rem;position: absolute;
top: 0.35rem;right:0.4rem;" />
</div>
<div class="hpVertical" style="position:relative"></div>
<div class="divWrap" style="position:relative">
<div class="divLeft"> Position </div>
<div class="divRight" id="gangwei" style="padding-right:0.4rem;"> <input id="gangweiInit" placeholder=' Please select '
style="border:none;text-align:right;" />
</div>
<img src="./images/huping/xiala.png" style="width:0.25rem;height:0.14rem;position: absolute;
top: 0.35rem;right:0.4rem;" />
</div>
<div class="hpVertical" style="position:relative"></div>
<div class="divWrap" style="justify-content: flex-end;">
<span class="btncx" onclick="getDPList()"> Inquire about </span>
<span class="btncz" onclick="resetList()"> Reset </span>
</div>
</div>
<div id="content_1" class="content_1"></div>
<!-- <div class="allDiv">
<div class="divWrap">
<div class="divLeft"> full name </div>
<div class="divRight"> Liu Ming </div>
</div>
<div class="hpVertical"></div>
<div class="divWrap">
<div class="divLeft"> department </div>
<div class="divRight"> Criminal Investigation Brigade </div>
</div>
<div class="hpVertical"></div>
<div class="divWrap">
<div class="divLeft"> Position </div>
<div class="divRight"> General management post </div>
</div>
<div class="hpVertical"></div>
<div class="divWrap">
<div class="divLeft"> Assessment type </div>
<div class="divRight"> Non leading member civil servant </div>
</div>
<div class="hpVertical"></div>
<div class="divWrap">
<div class="divLeft"> state </div>
<div class="divRightBlue"> To be submitted </div>
</div>
<div class="hpVertical"></div>
<div class="divWrap">
<div class="divLeft"> score </div>
<div class="divRightBlue">95</div>
</div>
<div class="hpVertical"></div>
<div class="divWrap" style="justify-content: flex-end">
<div class="rate" data-toggle="modal" data-target="#myModal"> score </div>
</div>
</div> -->
<div style="text-align: center;">
<div class="btnSubmit" id="submitBtn" onclick="allSubmit()"> Submit </div>
</div>
</div>
<!-- Scoring mode box （Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
style="margin-top: -1.5rem;">
<div class="modal-dialog" style="width: 6rem;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<div class="modal-title" id="myModalLabel"> Evaluation </div>
</div>
<div class="modal-body" style="padding-left: 0.3rem;">
<div class="bodycontent"> The score is :<input class="inputS" type="text" id="fenzhi" disabled="disabled"></div>
<div class="bodycontent" style="margin-top: 0.3rem;"> Scoring :<input class="inputS" id="dafen"></div>
<div class="bodycontent" style="margin-top: 0.3rem;"> explain :<textarea class="textarea" rows="3" id="explain"
disabled="true"></textarea></div>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" class="btn btn-default" data-dismiss="modal"> Cancel
</button>
<button type="button" class="btn btn-primary" style="margin-top: 0.3rem;margin-bottom: 0.31rem;"
onclick="btnSave()" id="baocun">
preservation
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"
style="margin-top: 0.3rem;margin-bottom: 0.31rem;" id="queren">
confirm
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- Submit Modal -->
<div class="modal fade" id="subModal" tabindex="-1" role="dialog" aria-labelledby="subModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<div class="modal-title" id="subModalLabel" style="color: black; font-weight: 400;">
Cannot be modified after submission , Are you sure to submit ？
</div>
</div>
<!-- <div class="modal-body">
Add some text here
</div> -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Cancel
</button>
<button type="button" class="btn btn-primary" onclick="btnSure()">
determine
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>2. Add year 、 quarter 、 Of a position select Drop down box information
<script src="./js/mobileSelect.js"></script> var year = ['2017', '2018', '2019', '2020', '2021'];
var mobileSelect1 = new MobileSelect({
trigger: '#year',
title: ' year ',
wheels: [
{ data: year }
],
position: [4], // Initialize positioning Which... Is selected by default when opening If you don't fill in the silent opinion 0
transitionEnd: function (indexArr, data) {
$("#year").val(data[0])
},
callback: function (indexArr, data) {
}
});
var jidu = [' first quarter ', ' The second quarter ', ' The third quarter ', ' In the fourth quarter '];
var mobileSelect2 = new MobileSelect({
trigger: '#jidu',
title: ' quarter ',
wheels: [
{ data: jidu }
],
position: [1], // Initialize positioning Which... Is selected by default when opening If you don't fill in the silent opinion 0
transitionEnd: function (indexArr, data) {
//console.log(data);
},
callback: function (indexArr, data) {
$("#jidu").val(data[0])
}
});
// Position 0： General management post ,1： Administrative affairs post ,2： Administrative law enforcement post ,3： Professional and technical post ,4： Window service post
var choosedGangweiIndex = "";
var gangwei = [' General management post ', ' Administrative affairs post ', ' Administrative law enforcement post ', ' Professional and technical post ', ' Window service post '];
var mobileSelect4 = new MobileSelect({
trigger: '#gangwei',
title: ' Position ',
wheels: [
{ data: gangwei }
],
position: [0], // Initialize positioning Which... Is selected by default when opening If you don't fill in the silent opinion 0
transitionEnd: function (indexArr, data) {
//console.log(data);
},
callback: function (indexArr, data) {
// console.log(indexArr[0])
choosedGangweiIndex = indexArr[0]
$("#gangwei").val(data[0])
}
});In fact, it is also a truth for departments , But here , Departments are not fixed enumeration , But according to the user from the database （ Interface ） Get display in , So we'll deal with it later
3. The introduction in the previous section , You need to initialize the page and add data to content_1
var pageNum = 1; // The default is to access... From the first page
var pageSize = pageSizeGlobal; // The default number of accesses to a page
var isMore = false;
var year = $("#yearInit").val() ? yearInitGlobal : $("#year").html();
var jidu = $("#jiduInit").val() ? quarterInitGlobal : getQuarterGlobal($("#jidu").html());
var bumen = ""
var gangwei = ""
// First access to the page , load 2021 Second quarter data .
getList(year, jidu, pageNum, pageSize, bumen, gangwei);function getList(year, quarter, pageNum, pageSize, departmentId, jobPost) {
// console.log(window.localStorage.getItem("currentUser"))
$.ajax({
type: "post",
url: urlGlobal + "/api/h5/assess/score/evaluation/page",
async: true,
dataType: "json",// Background return value type
contentType: "application/json;charset=utf-8", // If the submission is json data type , This parameter is required , Indicates the type of data submitted
async: false,// Asynchronous requests
data: JSON.stringify({
year: year,
quarter: quarter,
pageNum: pageNum,
pageSize: pageSize,
departmentId: departmentId,
jobDuty: jobPost
}),
headers: { 'Authorization': 'Bearer ' + window.localStorage.getItem("token") },
success: function (data) {
console.log(data)
if (data.code === 200) {
total = data.data.totalCount; // total
pades = data.data.totalPage; // Total number of pages
//isMore, When it's not the last page , by ture, If it's the last page , Then for false
// data.data.list[0].status = 0;
if (data.data.currPage < data.data.totalPage) {
isMore = true;
}
if (data.data.currPage === data.data.totalPage) {
isMore = false;
}
// If the total number ===0, Do the processing without data .
if (data.data.totalCount == 0) {
$("#content_1").empty();
// $("#content_1").append(" There is no content ");
// No, “ Submit button ”
document.getElementById("submitBtn").style.display = "none"
} else {
for (var i = 0; i < data.data.list.length; i++) {
$("#content_1").append(strlistDom(data.data.list[i]))
}
// When the current page is the last page, add the prompt that all the loaded pages have been completed
if (data.data.currPage === data.data.totalPage) {
$("#content_1").append("<div style='margin-top:0.2rem;margin-bottom:0.4rem;text-align:center;color: #999999;font-size:0.3rem;'> Data loaded </div>");
}
}
} else {
alertGlobal(data.message, 3000, true)
}
}
});
}
// Access to the page DOM Elements
function strlistDom(data) {
// Prevent no data from being displayed after no data is found and data is found btn Button
var status = data.status === 0 ? " To be submitted " : " Has been submitted ";
var score = data.score ? data.score : 0;
var pfck = status === " Has been submitted " ? " see " : " score "
if (pfck === " see ") {
document.getElementById("submitBtn").style.display = "none"
} else {
document.getElementById("submitBtn").style.display = "inline-block"
}
var str =
"<div class='allDiv'>" +
"<div class='divWrap'>" +
"<div class='divLeft'> full name </div>" +
"<div class='divRight'>" + data.name + "</div></div>" +
"<div class='hpVertical'></div>" +
"<div class='divWrap'>" +
"<div class='divLeft'> department </div>" +
"<div class='divRight'>" + data.department + "</div></div><div class='hpVertical'></div>" +
"<div class='divWrap'>" +
"<div class='divLeft'> Position </div>" +
"<div class='divRight'>" + data.jobPostStr + "</div></div><div class='hpVertical'></div>" +
"<div class='divWrap'> <div class='divLeft'> Assessment type </div>" +
"<div class='divRight'>" + data.examineeTypeStr + "</div></div><div class='hpVertical'></div>" +
"<div class='divWrap'><div class='divLeft'> score </div>" +
"<div class='divRight'>" + score + "</div></div><div class='hpVertical'></div>" +
"<div class='divWrap'><div class='divLeft'> state </div>" +
"<div class='divRightBlue'>" + status + "</div></div><div class='hpVertical'></div>" +
// score
// "<div class='divWrap' style='justify-content: flex-end'><div class='rate' data-toggle='modal' data-target='#myModal'> score </div></div>"
// see
"<div class='divWrap' style='justify-content: flex-end'>" +
"<div class='rate' data-toggle='modal' data-target='#myModal' onclick='pingfen(\"" + data.id + "\",\"" + pfck + "\")'>" + pfck + "</div></div></div>"
return str;
}
You can see , about “ To be submitted ”“ Has been submitted ” Made a distinction , Because the data returned by the backend is 0-1, Therefore, it is necessary to distinguish the display , And for the “ To be submitted ” The data can be scored , But for “ Has been submitted ” Data can only be viewed .
4. Deal with scrolling problems
$(window).scroll(function () {
$(".content_1").each(function () {
var scrollTop = this.scrollTop || document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop + window.innerHeight + 20 >= this.offsetHeight) {
if (isMore) {
isMore = false;
pageNum++;
year = $("#yearInit").val() ? yearInitGlobal : $("#year").html();
jidu = $("#jiduInit").val() ? quarterInitGlobal : getQuarterGlobal($("#jidu").html());
bumen = choosedDepartmentID;
console.log(bumen)
gangwei = choosedGangweiIndex;
getList(year, jidu, pageNum, pageSize, bumen, gangwei);
}
}
});
});5. The database obtains the Department information and displays it in select
var choosedDepartmentID;
// All data of the loading department is displayed in the drop-down box
window.onload = function () {
var organizationId = window.localStorage.getItem("unitId"); // The organization of the currently logged in user ID
// Get the current organization id All departments under
$.ajax({
type: "get",
url: urlGlobal + "/api/h5/sys/organizationList",
async: true,
dataType: "json",// Background return value type
contentType: "application/json;charset=utf-8", // If the submission is json data type , This parameter is required , Indicates the type of data submitted
async: false,// Asynchronous requests
data: ({
organizationId: organizationId,
}),
headers: { 'Authorization': 'Bearer ' + window.localStorage.getItem("token") },
success: function (data) {
if (data.code === 200) {
var bumen = []
for (var i = 0; i < data.data.length; i++) {
bumen.push({ id: data.data[i].id, value: data.data[i].name });
}
var mobileSelect3 = new MobileSelect({
trigger: '#bumen',
title: ' department ',
wheels: [
{ data: bumen }
],
position: [0], // Initialize positioning Which... Is selected by default when opening If you don't fill in the silent opinion 0
transitionEnd: function (indexArr, data) {
},
callback: function (indexArr, data) {
choosedDepartmentID = data[0].id;
$("#bumen").val(data[0])
},
});
} else {
alertGlobal(data.message, 3000, true)
}
}
});
}6. Query function and reset function
// Query function
function getDPList() {
console.log("search")
pageNum = 1; // The default is to access... From the first page
pageSize = pageSizeGlobal;
isMore = false;
year = $("#yearInit").val() ? yearInitGlobal : $("#year").html();
jidu = $("#jiduInit").val() ? quarterInitGlobal : getQuarterGlobal($("#jidu").html());
bumen = choosedDepartmentID;
gangwei = choosedGangweiIndex;
// bumen = $("#yearInit").val() ? yearInitGlobal : $("#year").html();
// gangwei = $("#jiduInit").val() ? quarterInitGlobal : getQuarterGlobal($("#jidu").html());
$("#content_1").empty();
getList(year, jidu, pageNum, pageSize, bumen, gangwei);
}
// The reset function
function resetList() {
pageNum = 1; // The default is to access... From the first page
pageSize = pageSizeGlobal;
isMore = false;
$("#year").html(yearInitGlobal); // The default display value of the recharge drop-down box
$("#jidu").html(" The second quarter ");
$("#bumen").html(' Please select ');
choosedDepartmentID = '';
$("#gangwei").html(' Please select ');
choosedGangweiIndex = '';
$("#content_1").empty();
getList(yearInitGlobal, quarterInitGlobal, pageNum, pageSize, '', '');
}
This completes the list of main pages , In fact, it is basically similar to the previous section , It only deals with some complicated situations , Next, we need to score. The details are displayed in the pop-up box , And score saving function , Overall submission function for development , Take a look at the interface document first .
For evaluation details （ That is, the data displayed after clicking the pop-up box ）, You need to pass in the evaluation id, The evaluation will be returned after the request id, score 、 The score is 、 explain , Put these on the page .
And for the save after the pop-up box input , The interface is simple , Just pass in the evaluation id And score , No data returned .
For the final batch submission function , Relatively simple , Simply submit all data by year and quarter
7. It has been written in the static page Modal bounced , Let's first click “ score ” After button , Trigger the event to display in the pop-up box
<div class='rate' data-toggle='modal' data-target='#myModal' onclick='pingfen(\"" + data.id + "\",\"" + pfck + "\")'>" + pfck + "</div></div></div>It's already written , For each selection “ score ” This message , Need to get its id The interface can be adjusted to display data , So in pingfen() Function data.id, The code of the scoring pop-up box to display and display data is as follows
var tempId;
var tempScore;
// Scoring function
function pingfen(id, pfck) {
tempId = id
$.ajax({
type: "get",
url: urlGlobal + "/api/h5/assess/score/evaluation/" + id,
async: true,
dataType: "json",// Background return value type
contentType: "application/json;charset=utf-8", // If the submission is json data type , This parameter is required , Indicates the type of data submitted
async: false,// Asynchronous requests
headers: { 'Authorization': 'Bearer ' + window.localStorage.getItem("token") },
success: function (data) {
console.log(data)
if (data.code === 200) {
tempScore = data.data.presetScore // Staging score - Aspects are quite different from the latter
var list = data.data
console.log(list.score)
$("#fenzhi").val(list.presetScore)
$("#dafen").val(list.score)
$("#explain").val(list.remark)
// Submitted or pending
console.log(list.score)
if (pfck === " see ") { // Has been submitted
console.log(" Has been submitted ")
document.getElementById("dafen").disabled = "disabled";
document.getElementById("baocun").style.display = "none"
document.getElementById("queren").style.display = "inline-block"
} else { //
console.log(" To be submitted ")
document.getElementById("queren").style.display = "none"
document.getElementById("baocun").style.display = "inline-block"
}
} else {
alertGlobal(data.message, 3000, true)
}
}
});
}You can see that after obtaining the return value , Render them to input Just inside . Here because “ see ” and “ score ” Button names and functions are different , All have been shown and hidden .
8. After the scoring page , Enter the corresponding score for scoring , And call the interface to save the data .
// The scoring page is saved
function btnSave(id) {
console.log(tempId)
var dafen = $("#dafen").val()
if (parseInt($("#dafen").val()) > tempScore) { // Judge whether the input is correct
alertGlobal(' The score should be less than the score ', 3000, true)
} else if (dafen == "" || isNaN(dafen)) {
alertGlobal(' The number of scores should be non empty and numeric ', 3000, true)
}
else {
$.ajax({
type: "post",
url: urlGlobal + "/api/h5/assess/score/evaluation",
async: true,
dataType: "json",// Background return value type
contentType: "application/json;charset=utf-8", // If the submission is json data type , This parameter is required , Indicates the type of data submitted
async: false,// Asynchronous requests
data: JSON.stringify({
id: tempId,
score: $("#dafen").val()
}),
headers: { 'Authorization': 'Bearer ' + window.localStorage.getItem("token") },
success: function (data) {
console.log(data)
if (data.code === 200) {
// Refresh the page But save the current year and quarter ??
var year = $("#yearInit").val() ? yearInitGlobal : $("#year").html();
var jidu = $("#jiduInit").val() ? quarterInitGlobal : getQuarterGlobal($("#jidu").html());
bumen = choosedDepartmentID;
gangwei = choosedGangweiIndex;
$("#content_1").empty();
getList(year, jidu, pageNum, pageSize, bumen, gangwei);
alertGlobal(data.message, 3000, true)
} else {
alertGlobal(data.message, 3000, true)
}
}
});
// Turn off scoring modal
$('#myModal').modal("hide")
}
}Before scoring , First judge “ The score is less than the score ”“ The input must be numeric and not empty ”, After the request . And notice that you need to refresh the page after completion , namely ： Empty the page first empty() after , Then retrieve the data and put it into .
9. Batch submission function
// Submit all bullets
function allSubmit() {
$('#subModal').modal({ show: true })
}
// Submit all （ Submit all by year and quarter ）
function btnSure() {
var year = $("#yearInit").val() ? yearInitGlobal : $("#year").html();
var jidu = $("#jiduInit").val() ? quarterInitGlobal : getQuarterGlobal($("#jidu").html());
$.ajax({
type: "post",
url: urlGlobal + "/api/assess/score/evaluation/submit",
async: true,
dataType: "json",// Background return value type
contentType: "application/json;charset=utf-8", // If the submission is json data type , This parameter is required , Indicates the type of data submitted
async: false,// Asynchronous requests
data: JSON.stringify({
year: year,
quarter: jidu
}),
headers: { 'Authorization': 'Bearer ' + window.localStorage.getItem("token") },
success: function (data) {
if (data.code === 200) {
alertGlobal(" Submit successfully ", 3000, true)
// $('#subModal').modal({ show: false })
} else {
alertGlobal(data.message, 3000, true)
}
}
});
$('#subModal').modal("hide")
refresh();
}This completes today's page effect
Next section , We will implement a more difficult function , Submit in bulk , Different from the bulk submission of this article , A choice needs to be made , For the selected item, get the corresponding id and score Give it to the back end .
边栏推荐
- Video label forbids downloading. The test is valid. Hide button. The test is valid at three points
- Group by and order by are used together
- 35岁程序员炒Luna 千万资产3天归零，网友：和赌博一样
- Nailing open platform - applet development practice (nailing applet client)
- "Eight hundred"
- PHP has the problem of using strtotime to obtain time in months and months [original]
- Database design (3): database maintenance and optimization
- Wechat applet is bound to a dynamic array to implement a custom radio box (after clicking the button, disable the button and enable other buttons)
- How much do you make by writing a technical book? To tell you the truth, 2million is easy!
- CTF crypto (I) some simple encoding and encryption
猜你喜欢
Sixtool- source code of multi-functional and all in one generation hanging assistant
![Fastadmin always prompts sqlstate[23000]: integrity constraint violation: 1052 column 'ID' in order clause is am](/img/71/ed3b2ca9e6d4afd2dae3c601b3a75b.jpg)
Fastadmin always prompts sqlstate[23000]: integrity constraint violation: 1052 column 'ID' in order clause is am
Understand CGI and fastcgi
NPM installation tutorial
PHP small factory moves bricks for three years - interview series - my programming life
How much do you make by writing a technical book? To tell you the truth, 2million is easy!
Parse JSON interface and insert it into the database in batch
TP5 distinct method paging problem
Database design (I)
![Simple personal summary of tp6 multi application deployment -- Part I [original]](/img/7b/65fab1973423081483dacc9bed9594.jpg)
Simple personal summary of tp6 multi application deployment -- Part I [original]
随机推荐
Zhimeng CMS will file a lawsuit against infringing websites
Microsoft prohibits Russian users from downloading and installing win10/11
Thinkphp6 using kindeditor
numpy 随机数
[geek challenge 2019] rce me
Oracle 數據泵導錶
C generic
SQL related knowledge - DQL
[Qunhui] this suite requires you to start PgSQL adapter service
Thymeleaf data echo, single selection backfill, drop-down backfill, time frame backfill
钉钉开放平台-小程序开发实战（钉钉小程序服务器端）
防撤回测试记录
Laravel framework Alipay payment fails to receive asynchronous callback request [original]
A brain map to summarize the needs analysis (a supplement to the actual situation at work)
Knowledge of functions
Swagger
SQL related knowledge - constraints
2021-01-31
MySQL est livré avec l'outil de test de performance MySQL lap pour effectuer des tests de résistance
MySQL's built-in performance testing tool, mysqlslap, performs stress testing