当前位置：网站首页>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
边栏推荐
- C 43. Get UDP available ports
- Dijkstra sequence (summer vacation daily question 5)
- 文件详细操作
- Learn when playing No 6 | the magic of document library lies in
- Raspberry pie uses the command line to configure WiFi connections
- Learn when playing No 2 | learning is too boring? Learning maps lets you learn and play
- mysql 如何获取两个集合的交集/差集/并集
- pom容易忽略的问题
- enq: HW – contention等待引起的故障分析
- 机器学习理论及案例分析(part2)--回归
猜你喜欢
Pricing is arbitrary, products are difficult to distinguish between true and false, and platforms are running away. Will the Tibetan market continue to be popular?
P1086 [noip2004 popularization group question 2] peanut picking
Online shopping E-commerce mall system based on jsp+servlet+mysql+
查看电脑重启次数、原因
"Unable to recognize" yarn "item as cmdlet, function, script file
UNIPRO multi terminal deployment to meet customers' diversified needs
enq: HW – contention等待引起的故障分析
Raspberrypico analytic PWM
CM4 development cross compilation tool chain production
MVC mode three-tier architecture
![P1086 [noip2004 popularization group question 2] peanut picking](/img/f0/5c311d1fb1e320a29cbcbc05d2f334)
随机推荐
How to create a simple electron desktop program
【音视频】图片YUV数据格式
机器学习理论及案例分析(part1)--机器学习基础
第3章业务功能开发（实现全选按钮实时的响应）
A simple SQL injection shooting range exercise
eval与assert一句话木马分析
Didi - dispatching
Raspberry connects EC20 for PPP dialing
Summary of SQL skills in data warehouse development
Install MySQL 8.0 using docker
Advanced C language (XIII) - Example Analysis of dynamic memory management
Efcore's solution of multi tenant zero script, table and database read-write separation under SaaS system
【FFmpeg】mp4转yuv
Niuke dynamic planning training
Redis core principles
One of C language multithreading programming
Test the mock data method of knowing and knowing
Supplementary notes on Relevant Issues of complete model group
Refreshing mobile terminal personal center page
Calculation formula of cross entropy