标签：glyphicon ----------- V07 -- 对应 SSM pMap data id
前言：
这一篇应该是这个项目最后一次更新了，是关于交易模块的相关内容的，当然，这个版本里面还是有比较多内容是比较新的，值得记录。
外记：前段时间学校放假了，回家了，再加上干了一些科研的事情，最后不仅科研没有达到自己预想的效果这个项目也放下了[狗头]。后来又去补充了前面的客户和联系人模块，花费了大量的时间。下面就是本期内容啦~
1.创建交易
因为交易的内容比较多，给的前端，他是直接跳转到新的一张页面了。这样的话我们就直接使用超链接，然后后台返回userList集合放到request搭转发到新页面就好了。
创建页面是这样子的：
内容还是比较丰富比较新的
1.1默认选中当前登录用户为所有者
这里所有者的选中和以前不一样了，因为这里的所有者也是使用JSTL技术动态拼接出来的，JSTL其实也是属于EL表达式，幸运的是，EL表达式里面是可以使用 三目运算符 的，这样就可以做了。
<option></option>
<c:forEach items="${uList}" var="u">
<option value="${u.id}" ${user.id eq u.id ? "selected" : ""}>${u.name}</option>
</c:forEach>
后面的${user.id eq u.id ? "selected" : ""就是表示当前登录用户user.id和后台查出来的用户u.id是否相同，相同就选中，不同就没有。
1.2客户名称文本框的自动补全
这个地方要使用前端bootstrap typeahead插件，去他给的资源里面复制到我们的项目中。然后直接拿到这个文本框给他绑定他提供的函数即可。即：
//为 客户名称 文本框绑定事件----实现自动补全，这是插件，是直接复制的
$("#create-customerName").typeahead({
source: function (query, process) {
$.post(
"workbench/transaction/getCustomerName.do",
{ "name" : query }, //name就是我们输入的内容，会发送到后台
function (data) {
process(data);
},
"json"
);
},
delay: 1500
});
然后在后台控制器里面处理这个需求就行了。返回的是List<String>，因为在前端只有String才能被这个插件处理的，其他我们自己写的类他是不认识的。sql语句就是根据name模糊查询出List<String>。
最终实现的效果：
文本输入1之后查出了三条包含1的内容。完美！
还有说明，我们数据库表中保存的也是顾客的id，但是在前端我们没有办法去处理id，我们是将顾客的名字传到后台，然后在后台进行处理。
1.3市场活动源 和 联系人名称的查询
这里我是直接将两个文本框都变成了只读，只能通过点击旁边的搜索然后去查出相应的集合。这个需求也是前面做过的。这里就说一下步骤。
1)点击放大镜，打开查找的模态窗口。
2)在文本框输入内容，敲回车实现查询功能(绑定敲键盘事件)。
3)然后选中其中的一项，点击提交。(如果没有选中，弹出提示)
4)提交后，将对应的姓名保存到两个文本框里面给用户看；然后将对应的id保存到隐藏域中，这个id是我们到时候提交数据的时候真正要提交的内容。关闭模态窗口。
1.4阶段和可能性的处理
因为在表中没有对应的可能性字段，这是和以前不一样的。那怎么处理呢？这个和之前一样，要把阶段和可能性之间的对应关系放到服务器缓存application域中，在监听器方法里面做。
这个对应关系要使用Unicode编码，不过这个文件他已经提供了，我们直接复制就行，放到resource文件夹里面，是一个properties文件。在监听器里面这样处理：
//------------------------下面是处理阶段和可能性的对应关系-------------------------------
System.out.println("--------监听器执行，阶段和可能性对应关系处理开始------");
Map<String,String> pMap = new HashMap<>();
ResourceBundle rb = ResourceBundle.getBundle("Stage2Possibility"); //解析属性配置文件，后缀名一定要删除
Enumeration<String> keys = rb.getKeys();
while (keys.hasMoreElements()){
String key = keys.nextElement(); //拿到每个阶段
String value = (String) rb.getObject(key); //拿到对应的可能性
pMap.put(key,value); //放到map中
}
application.setAttribute("pMap",pMap);
System.out.println("--------监听器执行，阶段和可能性对应关系处理结束------");
然后，服务器启动的时候，application域里面就有 阶段和可能性的对应关系了。
在前端，我们首先在最前面拿到这个map集合。
<%
//处理可能性
Map<String,String> pMap = (Map<String, String>) application.getAttribute("pMap");
Set<String> set = pMap.keySet();
%>
然后我们需要在<script>标签去拼接出他们对应关系的json串。这样做：
<script type="text/javascript">
var json = {
<%
for (String key : set){
String value = pMap.get(key);
%>
"<%=key%>" : <%=value%>,
<%
}
%>
};
</script>
然后所有的内容都准备好了，我们给这个下拉框绑定一个change事件就行了，在里面将不同的可能性赋值到对应的文本框里面。
这里有一个要注意的地方是：最后在change事件里面使用拼出来的json，json.key的方式取得可能性。
但是在这里的stage不是固定是，是可变的，就不能使用json.key的方式进行取值，取不出来，要使用json[key]来取值。
//为 阶段 文本框绑定事件，选择不同的阶段，自动填充不同的可能性
$("#create-stage").change(function (){
var stage = $("#create-stage").val();
//拿到对应的可能性，在上面已经拼好json了
var possibility = json[stage];
//将可能性写入文本框
$("#create-possibility").val(possibility);
})
1.5给保存按钮绑定事件
这里因为表中的字段比较多，我们不可能使用ajax将每一个字段都传递到后端，因为也没有什么要局部刷新的地方，保存完就是跳到了一张全新的页面，这里我们使用提交form表单的形式。form表单提交的内容是name属性的内容，这个要注意。
2.pageList方法，修改，删除等需求
这个内容也是完全和前面一样的。不在这里写了。自己完成即可。和以前不一样的就是这个有可能是一个全新的页面，而不是局部刷新了。
3.跳转到详细信息页
这里的有些内容是和前面一样的，有些是很新的内容，特别是图标的动态展示。
这是在第九个阶段的时候：
第四个阶段的时候是这样的：
先说一下传统的内容要注意的地方，这里因为也有可能性，而且不是和之前一样有的选的，为了解决这个问题，有两种做法：
1)我们可以在后台将查到的可能性单独放到request域中返回前端。
2)在Tran这个类里面添加多一个 可能性 的属性，虽然实际的表里面没有这个字段，但是我们是可以添加的，为了方便，而且在后面的时候也经常需要使用到这个内容。
这里我们就使用第二种方式。
接下来就是超级超级恶心的图标的动态展示(差点干吐了！):
这里他给出的方案也是有两种，然后我就直接使用了比较简单的第二种。
这里同样，在最前面要提前准备一些我们需要使用的内容：
<%
//准备字典类型为 stage的List集合
List<DicValue> dvList = (List<DicValue>) application.getAttribute("stage");
//准备 类型和可能性的对应关系
Map<String,String> pMap = (Map<String, String>) application.getAttribute("pMap");
//准备： 正常阶段和丢失阶段的分界点下面，下标为可能性为0时候的下标
int fenJiePoint = 0;
for (int i=0; i<dvList.size(); i++){
//取得每个字典值
DicValue dv = dvList.get(i);
//取得字典值里面的value
String stage = dv.getValue();
//取得这个value对应的可能性
String possibility = pMap.get(stage);
if ("0".equals(possibility)){
fenJiePoint = i;
break;
}
}
//准备pMap中的key集合
Set<String> set = pMap.keySet();
//获取 阶段-->下标 之间的对应关系
Map<String,Integer> rMap = (Map<String, Integer>) request.getAttribute("rMap");
%>
这上面的rMap是什么呢？因为给的第二种方案要有阶段和对应下标之间的关系，本来我是想在前端拼的，但是拼来拼去觉得太麻烦，最后直接在后台进行处理了，将他们之间的关系封装成了一个map集合。因为这里他是用第一种方案做的，我们的就不一样了。
后台：
@ResponseBody
@RequestMapping("/workbench/transaction/detail.do")
public ModelAndView detail(HttpServletRequest request,String id){
System.out.println("交易控制器，跳转至详细信息页");
Tran tran = tranService.getTranById(id);
//获取阶段和可能性之间的对应关系--从服务器缓存中取
Map<String,String> pMap = (Map<String, String>) request.getServletContext().getAttribute("pMap");
String possibility = pMap.get(tran.getStage());
//将可能性封装到tran中
tran.setPossibility(possibility);
//阶段 和 下标的对应关系
Map<String,Integer> relationMap = new HashMap<>();
relationMap.put("01资质审查",0);
relationMap.put("02需求分析",1);
relationMap.put("03价值建议",2);
relationMap.put("04确定决策者",3);
relationMap.put("05提案/报价",4);
relationMap.put("06谈判/复审",5);
relationMap.put("07成交",6);
relationMap.put("08丢失的线索",7);
relationMap.put("09因竞争丢失关闭",8);
ModelAndView mv = new ModelAndView();
mv.addObject("t",tran);
mv.addObject("rMap",relationMap);
mv.setViewName("/workbench/transaction/detail.jsp");
return mv;
}
然后在前端下面具体的地方，将原来的图标注释了，我们要自己对这部分内容进行拼接了。
代码：
<!-- 阶段状态 -->
<div style="position: relative; left: 40px; top: -50px;">
阶段
<%
Tran t = (Tran) request.getAttribute("t");
//当前阶段
String currentStage = t.getStage();
//当前阶段的可能性
String currentPossibility = pMap.get(currentStage);
//当前阶段对应的下标
Integer currentIndex = rMap.get(currentStage);
//正常和丢失阶段的分界点下标 fenjiePoint
//当前阶段的可能性为0，前7个是黑圈，后两个不确定
if ("0".equals(currentPossibility)){
//遍历前7个
for (int i=0; i<fenJiePoint; i++){
//取得遍历过程中的阶段
DicValue dv = dvList.get(i);
//-----------------黑圈----------------
%>
<span id="<%=i%>" onclick="changeStage('<%=dv.getValue()%>','<%=i%>')" class="glyphicon glyphicon-record mystage"
data-toggle="popover" data-placement="bottom"
data-content="资质审查" style="color: #000000;"></span>
-----------
<%
}
//遍历后2个
for (int i=fenJiePoint; i<dvList.size(); i++){
DicValue dv = dvList.get(i);
//是当前阶段
if (i==currentIndex){
//----------红叉-------------
%>
<span id="<%=i%>" onclick="changeStage('<%=dv.getValue()%>','<%=i%>')" class="glyphicon glyphicon-remove mystage"
data-toggle="popover" data-placement="bottom"
data-content="资质审查" style="color: #FF0000;"></span>
-----------
<%
//不是当前阶段
}else {
//----------黑叉-------------
%>
<span id="<%=i%>" onclick="changeStage('<%=dv.getValue()%>','<%=i%>')" class="glyphicon glyphicon-remove mystage"
data-toggle="popover" data-placement="bottom"
data-content="资质审查" style="color: #000000;"></span>
-----------
<%
}
}
//当前不是0，后两个是黑叉，前7个不确定
}else {
//遍历前7个
for (int i=0; i<fenJiePoint; i++){
DicValue dv = dvList.get(i);
//当前阶段
if (i==currentIndex){
//---------绿标----------
%>
<span id="<%=i%>" onclick="changeStage('<%=dv.getValue()%>','<%=i%>')" class="glyphicon glyphicon-map-marker mystage"
data-toggle="popover" data-placement="bottom"
data-content="资质审查" style="color: #90F790;"></span>
-----------
<%
//大于当前阶段
}else if(i>currentIndex){
//-------------黑圈------
%>
<span id="<%=i%>" onclick="changeStage('<%=dv.getValue()%>','<%=i%>')" class="glyphicon glyphicon-record mystage"
data-toggle="popover" data-placement="bottom"
data-content="资质审查" style="color: #000000;"></span>
-----------
<%
//小于当前阶段
}else {
//-------------绿圈-------
%>
<span id="<%=i%>" onclick="changeStage('<%=dv.getValue()%>','<%=i%>')" class="glyphicon glyphicon-ok-circle mystage"
data-toggle="popover" data-placement="bottom"
data-content="资质审查" style="color: #90F790;"></span>
-----------
<%
}
}
//遍历后2个
for (int i=fenJiePoint; i<dvList.size(); i++){
DicValue dv = dvList.get(i);
//---------黑叉-------
%>
<span id="<%=i%>" onclick="changeStage('<%=dv.getValue()%>','<%=i%>')" class="glyphicon glyphicon-remove mystage"
data-toggle="popover" data-placement="bottom"
data-content="资质审查" style="color: #000000;"></span>
-----------
<%
}
}
%>
<%-- 原本的动态图标
<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="资质审查" style="color: #90F790;"></span>
-----------
<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="需求分析" style="color: #90F790;"></span>
-----------
<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="价值建议" style="color: #90F790;"></span>
-----------
<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="确定决策者" style="color: #90F790;"></span>
-----------
<span class="glyphicon glyphicon-map-marker mystage" data-toggle="popover" data-placement="bottom" data-content="提案/报价" style="color: #90F790;"></span>
-----------
<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="谈判/复审"></span>
-----------
<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="成交"></span>
-----------
<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="丢失的线索"></span>
-----------
<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="因竞争丢失关闭"></span>
-----------
--%>
<span class="closingDate">${t.expectedDate}</span>
</div>
这里就是逻辑看起来比较繁琐一点，让人头疼。
如果是当前阶段是什么图标，就给他拼上什么对应的图标。
最后通过测试，是可以实现对应的功能的。
然后他的课里面还包括点击上面的图标可以变更阶段，还有eCharts表格的内容，我就没做了。这个写完，感觉写了好多代码，不过感觉SSM框架怎么搭，到后面又忘了，基本就是在最开始搭结构的时候才会记住，可能这也说明SSM框架真的很不错吧，确实能让我们只关注在代码的编写上，而不用去管其他的问题。
后面我可能要去学SpringBoot还有数据结构的内容了。
马上就快到农历的除夕了，好快啊，提前祝大家 除夕快乐 啊！！！
哈哈哈哈哈哈，要加油啊！
对了，后面学了新的内容，我也会继续记录的~~~~
标签：glyphicon,-----------,V07,--,对应,SSM,pMap,data,id 来源： https://blog.csdn.net/weixin_41362471/article/details/113435658
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。