当前位置：网站首页>[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 .
边栏推荐
- C generic
- OSS CDN alicloud configuration method
- Development trend and prospect forecast report of China's financial industry 2022-2028 Edition
- The statistics in the MySQL field become strings, and then they are converted into numbers for sorting
- 条件查询
- Simple use of redis in laravel
- Report on demand situation and development trend of China's OTC industry from 2022 to 2028
- Clickhouse stand alone installation
- Use shell script to analyze system CPU, memory and network throughput
- Realize video call and interactive live broadcast in the applet
猜你喜欢
Install cenos in the virtual machine
35 year old programmer fired Luna millions of assets and returned to zero in three days. Netizen: it's the same as gambling
PHP small factory moves bricks for three years - interview series - my programming life
MySQL enable logbin in Qunhui docker
Parse JSON interface and insert it into the database in batch
Ubuntu installs PostgreSQL and uses omnidb to view
Mutex of thread synchronization (mutex)
Thinkphp6 implements a simple lottery system
Knowledge of SQL - database design, backup and restore
解析JSON接口并批量插入到数据库中
随机推荐
35岁程序员炒Luna 千万资产3天归零，网友：和赌博一样
Database design (I)
Add, delete, modify and query curd in PHP native SQL
Construction of art NFT trading platform | NFT mall
Threejs special sky box materials, five kinds of sky box materials are downloaded for free
[Qunhui] import certificate
PHP syntax summary
Etcd watch principle
6、 Project practice --- identifying cats and dogs
[Qunhui] command line acme SH automatically apply for domain name certificate
2021/11/6-burpsuit packet capturing and web page source code modification
List of provinces, cities and counties in China
China air compressor manufacturing market demand analysis and investment prospect research report 2022-2028
SSH password free login, my server password free login to the other server, the other server password free login to your server
条件查询
The select option in laravel admin contains a large amount of data
There is no response to redirection and jump in the laravel constructor [original]
Nightmare
Advanced learning of MySQL (learning from Shang Silicon Valley teacher Zhou Yang)
Zhubo Huangyu: you can try these non-agricultural operation skills