SpringMVC+Bootstrap项目，应用细节记录
一、效果图
二、实现（知识点）
1、前端（html+CSS+js(jQuery)+bootstrap）
a、浏览器标签页显示标题：
<head> <title>资方信息配置</title></head>
b、form表单提交
1 <form action="../../gateway/FundInfo/save.cdo" method="post" id="addFundForm" style="float:right" target="frame1" onsubmit="return addFundForm();"> 2 <span style="margin-left: 15px;">资金方名称: <input type="text" id="strFundName" name="strFundName" style="margin-left: 5px;"/></span> 3 <span style="margin-left: 15px;">FundCode【nBorrowMode】: <input id="nFundId" type="number" name="nFundId" style="margin-left: 5px;"/></span> 4 <input id="addFund_btn" class="fundSubmit_btn" type="submit" value="添加" style="margin-left: 5px;" /> 5 </form>
调用js中的 addFundForm() 方法，将数据提交给后台：
View Code
c、select下拉列表（主要，从【默认赋值】、【选项变动，传值】两个点介绍）
<select id="fundSelect" class="baffleParamTypeType" name="baffleParamTypeType"> <option value="number">***</option> </select>
js部分
1 (function () { 2 $(document).ready(function () { 3 // 读取网页地址 4 var thisURL = document.URL; 5 nFundId = GetArgsFromHref(thisURL,"nFundId"); 6 if(nFundId == null || nFundId == "") 7 { 8 nFundId = 0; 9 } 10 11 // 页面初始化 12 initFund(nFundId); 13 14 /** 加载 loadFund 表格数据 **/ 15 // loadFund(nFundId); // 后面再详细介绍 16 17 // 下拉列表选项变动 18 $('#fundSelect').change(function () 19 { 20 var fundEle = $(this).children('option:selected'); 21 nFundId = fundEle.val();//这就是selected的值 22 strFundName = fundEle.text(); 23 /** 加载 loadFund 表格数据**/ 24 // loadFund(nFundId); // 后面再详细介绍 25 }); 26 }); 27 28 })(); 29 30 var nFundId = 0; 31 var strFundName = ""; 32 33 /** 页面初始化 **/ 34 function initFund(nFundId) 35 { 36 var fundSelect = $("#fundSelect"); 37 fundSelect.empty(); 38 39 // 获取资金方 40 $.ajax({ 41 type: "get", 42 url: "../../gateway/FundInfo/getFundAll.cdo", 43 // data: {strJson: JSON.stringify("")}, 44 success: function (data, status) { 45 var jsonObj = JSON.parse(data) 46 var fundLength = jsonObj.length; 47 var flag = false; 48 for (var i = 0; i < fundLength; i++) { 49 var fund = jsonObj[i]; 50 var selEle = fund.nFundId; 51 var option = ""; 52 if(nFundId == selEle) 53 { 54 option = $("<option selected = \"selected\">").text(fund.strFundName).val(fund.nFundId); 55 nFundId = selEle; 56 strFundName = fund.strFundName; 57 flag = true; 58 }else{ 59 option = $("<option>").text(fund.strFundName).val(fund.nFundId); 60 } 61 62 fundSelect.append(option); 63 } 64 if(!flag) 65 { 66 nFundId = jsonObj[0].nFundId; 67 strFundName = jsonObj[0].strFundName; 68 } 69 70 }, 71 error: function () { 72 alert("查询失败"); 73 return; 74 }, 75 complete: function () { 76 return; 77 } 78 }); 79 }
d、
e、
f、
g、
h、
i、
j、
k、
l、
m、
n、
2、后端（Spring MVC）
a、
b、
c、
d、
e、
f、
g、
h、
i、
j、
k、
l、
m、
n、