当前位置：网站首页>Chapter 3 business function development (modifying clues, data echo and modifying data)
Chapter 3 business function development (modifying clues, data echo and modifying data)
2022-07-25 08:09:00 【Make a light】
Click the Create button to realize data echo
according to id Query data , The returned result is a piece of data , Because the attributes are all clue Properties of entities , So it can be used clue Entity classes are encapsulated
1.ClueMapper Interface ,
2.ClueMapper.xml file
3.ClueService Interface
4.ClueServiceImpl class
5.ClueController class
6.clue Of index.jsp page
js sentence
// Set the data echo of the modification window
$("#editClueBtn").click(function () {
// Collection parameters
var checkId=$("#tBody input[type='checkbox']:checked");
// validate form
if (checkId.size()==0){
alert(" Please select a clue to execute ！");
return;
}
if (checkId.size()>1){
alert(" Only one piece of data can be selected at a time ！");
return;
}
var id=checkId.val();
// Send a request
$.ajax({
url:"workbench/clue/queryClueById.do",
type:'post',
dataType:'json',
data:{
id:id
},
success:function (data) {
$("#edit-id").val(data.id);
$("#edit-clueOwner").val(data.owner);
$("#edit-company").val(data.company);
$("#edit-call").val(data.appellation);
$("#edit-surname").val(data.fullname);
$("#edit-job").val(data.job);
$("#edit-email").val(data.email);
$("#edit-phone").val(data.phone);
$("#edit-website").val(data.website);
$("#edit-mphone").val(data.mphone);
$("#edit-status").val(data.state);
$("#edit-source").val(data.source);
$("#edit-describe").val(data.description);
$("#edit-contactSummary").val(data.contactSummary);
$("#edit-nextContactTime").val(data.nextContactTime);
$("#edit-address").val(data.address);
// Pop up the modified modal window
$("#editClueModal").modal("show");
}
});
});
html sentence
<!-- Modify the modal window of the clue -->
<div class="modal fade" id="editClueModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 90%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"> Modify clues </h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<input type="hidden" id="edit-id">
<div class="form-group">
<label for="edit-clueOwner" class="col-sm-2 control-label"> owner <span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-clueOwner">
<c:forEach items="${userList}" var="user">
<option value="${user.id}">${user.name}</option>
</c:forEach>
</select>
</div>
<label for="edit-company" class="col-sm-2 control-label"> company <span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-company">
</div>
</div>
<div class="form-group">
<label for="edit-call" class="col-sm-2 control-label"> call </label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-call">
<option></option>
<c:forEach items="${appellation}" var="app">
<option value="${app.id}">${app.value}</option>
</c:forEach>
</select>
</div>
<label for="edit-surname" class="col-sm-2 control-label"> full name <span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-surname">
</div>
</div>
<div class="form-group">
<label for="edit-job" class="col-sm-2 control-label"> Position </label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-job">
</div>
<label for="edit-email" class="col-sm-2 control-label"> mailbox </label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-email">
</div>
</div>
<div class="form-group">
<label for="edit-phone" class="col-sm-2 control-label"> Company line </label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-phone">
</div>
<label for="edit-website" class="col-sm-2 control-label"> The company's web site </label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-website">
</div>
</div>
<div class="form-group">
<label for="edit-mphone" class="col-sm-2 control-label"> mobile phone </label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-mphone">
</div>
<label for="edit-status" class="col-sm-2 control-label"> Clue status </label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-status">
<option></option>
<c:forEach items="${clueState}" var="clu">
<option value="${clu.id}">${clu.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="edit-source" class="col-sm-2 control-label"> Source of clues </label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-source">
<option></option>
<c:forEach items="${source}" var="sou">
<option value="${sou.id}">${sou.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="edit-describe" class="col-sm-2 control-label"> describe </label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-describe"></textarea>
</div>
</div>
<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
<div style="position: relative;top: 15px;">
<div class="form-group">
<label for="edit-contactSummary" class="col-sm-2 control-label"> Contact minutes </label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-contactSummary"></textarea>
</div>
</div>
<div class="form-group">
<label for="edit-nextContactTime" class="col-sm-2 control-label"> Next contact time </label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-nextContactTime">
</div>
</div>
</div>
<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>
<div style="position: relative;top: 20px;">
<div class="form-group">
<label for="edit-address" class="col-sm-2 control-label"> Detailed address </label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="1" id="edit-address"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> close </button>
<button type="button" class="btn btn-primary" id="saveEditClueBtn"> to update </button>
</div>
</div>
</div>
</div>Click the update button to update the data
The parameters passed are clue, The update result is int type , Pass by getting hidden id Come on
1.ClueMapper Interface ,
2.ClueMapper.xml file
<update id="updateClueChecked" parameterType="com.it.crm.workbench.entity.Clue">
update tbl_clue
set fullname=#{fullname},appellation=#{ appellation},owner=#{ owner},company=#{ company},job=#{ job},email=#{ email},phone=#{ phone},website=#{ website},mphone=#{ mphone},state=#{ state},
source=#{source},description=#{ description},contact_summary=#{ contactSummary},edit_by=#{editBy},edit_time=#{editTime},
next_contact_time=#{nextContactTime},address=#{ address}
where id=#{id}
</update>3.ClueService Interface
4.ClueServiceImpl class
5.ClueController class
@RequestMapping(value = "/workbench/clue/saveEditClueChecked.do")
@ResponseBody
public Object saveEditClueChecked(Clue clue,HttpSession session){
User user = (User) session.getAttribute(Contants.SESSION_USER);
// Package parameters
clue.setEditTime(DateUtils.formateDateTime(new Date()));
clue.setEditBy(user.getId());
ReturnObject returnObject=new ReturnObject();
// call service Layer method ,
try{
int i = clueService.saveEditClueChecked(clue);
if (i>0){
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
}else {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage(" The system is busy , Please try again later ！");
}
}catch (Exception e){
e.printStackTrace();
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage(" The system is busy , Please try again later ！");
}
return returnObject;
}6.clue Of index.jsp page
// Add a click event to the update button of the modify mode window
$("#saveEditClueBtn").click(function () {
// Collection parameters
var id=$("#edit-id").val();
var owner=$("#edit-clueOwner").val();
var company=$("#edit-company").val();
var appellation=$("#edit-call").val();
var fullname=$("#edit-surname").val();
var job=$("#edit-job").val();
var email=$("#edit-email").val();
var phone=$("#edit-phone").val();
var website=$("#edit-website").val();
var mphone=$("#edit-mphone").val();
var state=$("#edit-status").val();
var source=$("#edit-source").val();
var description=$("#edit-describe").val();
var contactSummary=$("#edit-contactSummary").val();
var nextContactTime=$("#edit-nextContactTime").val();
var address=$("#edit-address").val();
// validate form
if (company==""){
alert(" Company cannot be empty ！");
return;
}
if (fullname==""){
alert(" Name cannot be empty ！");
return;
}
var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!emailRegExp.test(email)){
alert(" Please enter the correct email format ！");
return;
}
var phoneRegExp=/\d{3}-\d{8}|\d{4}-\d{7}/;
if (!phoneRegExp.test(phone)){
alert(" Please enter the correct landline format !");
return;
}
var websiteRegExp=/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
if(!websiteRegExp.test(website)){
alert(" Please enter a website with the correct format ！");
return;
}
var mphoneRegExp=/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/;
if (!mphoneRegExp.test(mphone)){
alert(" Please enter the correct phone format ！");
return;
}
// Send a request
$.ajax({
url:"workbench/clue/saveEditClueChecked.do",
type:'post',
data:{
id:id,
owner:owner,
company:company,
appellation:appellation,
fullname:fullname,
phone:phone,
mphone:mphone,
website:website,
job:job,
email:email,
state:state,
source:source,
description:description,
contactSummary:contactSummary,
nextContactTime:nextContactTime,
address:address
},
dataType:'json',
success:function (data) {
if (data.code=="1"){
$("#editClueModal").modal("hide");
queryClueByConditionForPage(
$("#demo_page").bs_pagination("getOption","currentPage"),
$("#demo_page").bs_pagination("getOption","rowsPerPage")
);
} else {
alert(data.message);
$("#editClueModal").modal("show");
}
}
});
});A functional test
1. Click Modify without selecting data
2. Select two pieces of data and click Modify
3. Select a piece of data , Click Modify , Fill in the form correctly according to the form rules , Modify name only , Automatically refresh the page after modification
边栏推荐
- Dijkstra序列（暑假每日一题 5）
- Codeforces Round ＃809 Editorial(A,B,C)
- Learn when playing No 3 | are enterprise learning resources wasted? Learn map one trick to solve!
- P1047 [noip2005 popularization group t2] tree outside the school gate
- RK3399开发板I2C4挂载EEPROM实例
- Uiautomator2 common commands
- Raspberry pie 3b ffmpeg RTMP streaming
- redis客户端工具redis-insight推荐
- Learn when playing No 6 | the magic of document library lies in
- Problems easily ignored by POM
猜你喜欢
刷题《剑指Offer》day02
CM4 development cross compilation tool chain production
CentOS 8.2 MySQL installation (xshell6)
【着色器实现Shadow投影效果_Shader效果第八篇】
UNIPRO multi terminal deployment to meet customers' diversified needs
efcore在Saas系统下多租户零脚本分表分库读写分离解决方案
Raspberry pie 4B parsing PWM
Numpy learning
yolov7 网络架构深度解析
Efcore's solution of multi tenant zero script, table and database read-write separation under SaaS system
随机推荐
Dijkstra序列（暑假每日一题 5）
Enq: HW - fault analysis caused by content waiting
Raspberry pie uses the command line to configure WiFi connections
Design a stack with getmin function
刷题《剑指Offer》day02
刷题《剑指Offer》day01
Redis core principles
batchnorm 和layernorm的区别
【着色器实现Shadow投影效果_Shader效果第八篇】
Rk3399 development board i2c4 attaching EEPROM instance
JS cool rolling picture deformation animation JS special effects
VS2019 C＃ MFC安装
Vs2019 C MFC installation
CM4 development cross compilation tool chain production
Hotel room management system based on jsp+servlet+mysql
Science: listening to music can really relieve pain. Chinese scientists reveal the neural mechanism behind it
Numpy learning
Weblux default IO threads
Didi eta (estimate the travel time)
Codeforces Round ＃809 Editorial(A,B,C)