功能描述:
一个可以绑定 数据源的下拉框,点击查看按钮可以查看此数据,并可以进行修改
碰到的难点:
(1)选定的数据,怎么带给后台
(2)因为绑定的数据在另外一张表单,且本entity存储的是id,而显示的要是其Name
(3)添加、查看、修改都是同一个页面,如何分别是添加还是修改
(4)下拉框如何默认显示
过程:首先很快就将动态加载下拉框做了出来,并且实现了添加功能中的绑定数据源,然后显示的时候是默认显示的数据源Id,而不是name,然后我在添加功能的时候将name 处理好了,后面就是进行 修改 绑定的数据源那里出现问题,出现sourceId undefined错误,排查问题发现是,修改(查看)onclick事件,未将sourceId 带给controller。最后最后处理完这些,原以为bug已修复。因为之前,一直用的火狐浏览器进行测试,后面用谷歌、IE、360浏览器时,发现下拉框一次性加载不出来,要点击两次才能完全加载。后面改成 将 ajax 放在 ready()中才得以解决。
版本一代码:火狐浏览器
下拉框代码:
<c:if test="${not empty planExe.sourceId}">
<select id="select_otherDataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" onclick="bindOtherDataSource('${planExe.sourceId}')" >
<option selected="selected">${planExe.dataSourceName}</option>
</select>
</c:if>
<c:if test="${empty planExe.sourceId}">
<select id="select_dataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" onclick="bindDataSource()" >
</select>
</c:if>
</td>
Js代码:
添加部分:
clickCount =0;
//使数据源列表只被点击加载一次
function bindDataSource() {
if(clickCount <1){
clickCount++;
$.ajax({
method:"post",
url:"${ctx}/datavalid/dataSource/findDataSourceList",
dataType : "json",
success:function(list){
for(var i=0;i < list.length;i++){
$("#select_dataSourceList").append(" <option "+"value="+list[i].id +" "+ "title="+ list[i].orgName +">"+list[i].userName+"</option>");//动态加载下拉节点
}
}
});
}
}
Count =0;
//使数据源列表只被点击加载一次
function bindOtherDataSource(id) {
if(Count <1){
Count++;
$.ajax({
method:"post",
data:{"sourceId":id},
url:"${ctx}/datavalid/dataSource/findOtherDataSourceList",
dataType : "json",
success:function(list){
for(var i=0;i < list.length;i++){
$("#select_otherDataSourceList").append(" <option "+"value="+list[i].id +" "+ "title="+ list[i].orgName +">"+list[i].userName+"</option>");
}
}
});
}
}
注意红色部分,绿色部分是使点击事件只一次有效,不会重复动态添加数据
表单提交代码:
if(!$("#planId").val())
$("#inputForm").attr("action","${ctx}/datavalid/planExe/save?ids="+ids+"&sourceId="+$("#select_dataSourceList").val());
else
$("#inputForm").attr("action","${ctx}/datavalid/planExe/save?ids="+ids+"&sourceId="+$("#select_otherDataSourceList").val());
$("#inputForm").submit();
思路:我这里处理修改那部分的下拉框是将该数据源的id带到后台,然后返回除此id外的其他list集合,所以名称叫select_otherDataSourceList
谷歌浏览器版本:
简单很多,代码量也少了很多,上面的代码,我之前就是不好处理那个默认下拉框的问题,所以我才去访问后台得到除已经绑定(添加时绑定的)的数据源之外的list,但我下午写代码时,突然想到我为什么不将 那个默认的option 设成 hidden呢,这样不仅不用传id,而且可以将ajax代码放入 初始化函数 (ready()),两个onclike事件也可以共用同一个异步加载后台的代码,也解决了那个下拉框一次性不能加载的问题
下拉框代码:
<c:if test="${not empty planExe.sourceId}">
<select id="select_otherDataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" onclick="bindOtherDataSource()" >
<option selected="selected" hidden="true">${planExe.dataSourceName}</option>
</select>
</c:if>
<c:if test="${empty planExe.sourceId}">
<select id="select_dataSourceList" name="issued_sub_key_c" class="form-control required" style="width:50%;height:33px;" onclick="bindDataSource()" > </select> </c:if>
JS 代码:
function bindDataSource() {
}
function bindOtherDataSource() {
}
$(document).ready(function() {
//绑定数据源的数据加载
$.ajax({
method:"post",
url:"${ctx}/datavalid/dataSource/findDataSourceList",
dataType : "json",
success:function(list){
for(var i=0;i < list.length;i++){
if(!$("#planId").val())
$("#select_dataSourceList").append(" <option "+"value="+list[i].id +" "+ "title="+ list[i].orgName +">"+list[i].userName+"</option>");
else
$("#select_otherDataSourceList").append(" <option "+"value="+list[i].id +" "+ "title="+ list[i].orgName +">"+list[i].userName+"</option>");
}
}
});
}
表单提交的代码一样