js学习笔记
学习js总结：
第一步引入头:
<%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>Scope Management</title> <meta name="decorator" content="default" /> </head> <body> </body> </html>
第二步引入js+样式：
<%@include file="/WEB-INF/views/include/delivery.jsp"%>
<style>
input {
100px;;
}
#management_object td[name^='M-'] {
background: #e8ffdc;
}
#management_object tr[name='data_row']:nth-child(odd) td[name='row_checkbox'],
tr[name='data_row']:nth-child(odd) td[name='rolaName'], tr[name='data_row']:nth-child(odd) td[name='rolaName'] select,
tr[name='data_row']:nth-child(odd) td[name='location'], tr[name='data_row']:nth-child(odd) td[name='location'] select,
tr[name='data_row']:nth-child(odd) td[name='level'], tr[name='data_row']:nth-child(odd) td[name='level'] select
{
background: #EEEEEE;
}
#sla td[name^='M-'] {
background: #e8ffdc;
}
#sla tr[name='data_row']:nth-child(odd) td[name='row_checkbox'], tr[name='data_row']:nth-child(odd) td[name='rolaName'],
tr[name='data_row']:nth-child(odd) td[name='rolaName'] select, tr[name='data_row']:nth-child(odd) td[name='location'],
tr[name='data_row']:nth-child(odd) td[name='location'] select, tr[name='data_row']:nth-child(odd) td[name='level'],
tr[name='data_row']:nth-child(odd) td[name='level'] select {
background: #EEEEEE;
}
#kpi td[name^='M-'] {
background: #e8ffdc;
}
#kpi tr[name='data_row']:nth-child(odd) td[name='row_checkbox'], tr[name='data_row']:nth-child(odd) td[name='rolaName'],
tr[name='data_row']:nth-child(odd) td[name='rolaName'] select, tr[name='data_row']:nth-child(odd) td[name='location'],
tr[name='data_row']:nth-child(odd) td[name='location'] select, tr[name='data_row']:nth-child(odd) td[name='level'],
tr[name='data_row']:nth-child(odd) td[name='level'] select {
background: #EEEEEE;
}
.navTop {
position: fixed;
top: 0;
bottom: 0;
100%;
height: 40px;
z-index: 1010;
background-color: #fff
}
.icon-remove {
color: #000;
text-decoration-color: #000;
}
.error {
background-color: #FF0000;
}
.bg_blue {
background: #ddf2ff;
}
.bg_green {
background: #e8ffdc;
}
.bg_red {
background: #ffdddd;
}
</style>
第三步编写js代码
<script type="text/javascript">
1.取出后台传回来的数据（data是一个map集合list存入了map的方式存储的两个表的数据）
$(document).ready(function(){ //加载完毕且页面完全加载（包括图像）时发生 ready 事件
var data = ${empty data ? "''" : data};//如果有值就取值没有值就给个空字符串
var opptyPointInfoList = data["opptyPointInfoList"];//取出data中的opptyPointInfoList集合存入opptyPointInfoList
var opptyPointTraceList=data["opptyPointTraceList"];//取出data中的opptyPointTraceList集合存入opptyPointTraceList
2.创建行和列
var row2 = '<tr name="data_row">'; //创建一个字符串 “ row += ”：将下面的字符串拼接 也就形成一个一行中的个列组合成的表格、
//在页面中设置一个X形状的字符 并且将数据的Id存入row_checkbox中便于后期获取
row2 += '<td name="row_checkbox" height="26px" style="text-align:center"><a class="icon-remove" title="Delete" style="cursor:pointer;"></a></a><input name="id" type="hidden" value="" /></td>';
row2 += '<td name="rolaName"></td>';
row2 += '<td name="M-1"><input type="text" value="" style="98%"/></td>';//为输入框类型 输入框占用表格中的98%的空间
row2 += '<td name="M-2"><input type="text" value="" style="98%"/></td>';
row2 += '<td name="M-3"><input type="text" readonly="readonly" class="Wdate" style="100px;" value="" onclick="WdatePicker({dateFmt:\'yyyy-MM-dd\'});" /></td>';
row2 += '<td name="M-4"><input type="text" value="" style="98%"/></td>';
row2 += '<td name="M-5"><input type="text" value="" style="98%"/></td>';
row2 += '<td name="M-6"><input type="text" value="" style="98%"/></td>';
row2 += '<td name="M-7"><input type="text" value="" style="98%"/></td>';
row2 += '<td name="M-8"><input type="text" value="" style="98%"/></td>';
row2 += '</tr>';
3.编写增加行的方法
function addRow2(rowno,projectCode,codeSelect){ //添加行时执行的方法
var objRow = $(row2);
objRow.find("td[name='rowno']").text(rowno);
objRow.find("td[name='rolaName']").text(projectCode);
// objRow.find("td[name='M-1']").append(codeSelect); 设置元素进去 （为选择框时使用）
$("#sla").append(objRow);
}
3.编写选择框选择元素的方法
function getSelect(name,items,key,value,changeFunctionName){ //选择框取出选择元素的函数 这个函数是挺牛的
var select = $("<select></select>");
if(name){
select.attr("name",name);
}
if(changeFunctionName){
select.attr("onchange",changeFunctionName+"()");
}
var emptyOption = $("<option></option>").val("").text("---select---");
select.append(emptyOption);
for(itemKey in items){
var option = $("<option></option>").val(items[itemKey][value]).text(items[itemKey][key]);
select.append(option);
}
return select;
}
4.定义并赋值变量
var projectCode = "${projectInfo.aProjectCode} - ${projectInfo.aCodeName}"; //js中可以将字符串拼接起来
var codeSelect = getSelect("",opptyPointInfoList,"opptyPointCode","id") //调用getSelect函数注意传入的值
5.遍历取出来的list并将原始精准的存进去
if(opptyPointTraceList){ //判断语句 如果为非空 返回ture 为啥不用"=="号做判断呢？
addOpptyPointTraceListRows();
}else{
addRow2(1,projectCode,codeSelect);
}
function addOpptyPointTraceListRows(){ //从后台数据取出值放在表中的发达
if(opptyPointTraceList.length > 0){
for(var i=0;i<opptyPointTraceList.length;i++){
var rowobj = $(row2); //注意着里面的元素为“row2” 不要将元素写错这一点很重要
// $(rowobj).attr("id","row_"+ i);
$(rowobj).find("td[name='row_checkbox']").find("input[name='id']").val(opptyPointTraceList[i]["id"]);
$(rowobj).find("td[name='rolaName']").text(projectCode);
// var mSelect = getSelect("",opptyPointInfoList,"opptyPointCode","id"); 当表单中有选择类型的元素 （选择类型的元素是从另外一张表中得来的）
// mSelect.val(opptyPointTraceList[i]["opptyPiontInfoId"]); 取到另外一个表中的id值存进去
// $(rowobj).find("td[name='M-1']").append(mSelect); 展示的是opptyPointCode的val值 这一块值得研究
$(rowobj).find("td[name='M-1']").find("input").val(opptyPointTraceList[i]["opptyPointCode"]);
$(rowobj).find("td[name='M-2']").find("input").val(opptyPointTraceList[i]["actionDescription"]);
$(rowobj).find("td[name='M-3']").find("input").val(opptyPointTraceList[i]["changeTime"]);
$(rowobj).find("td[name='M-4']").find("input").val(opptyPointTraceList[i]["changeTrackPerson"]);
$(rowobj).find("td[name='M-5']").find("input").val(opptyPointTraceList[i]["nextPlan"]);
$(rowobj).find("td[name='M-6']").find("input").val(opptyPointTraceList[i]["help"]);
$(rowobj).find("td[name='M-7']").find("input").val(opptyPointTraceList[i]["helpObject"]);
$(rowobj).find("td[name='id']").find("input").val(opptyPointTraceList[i]["id"]).hide();
$("#sla").append($(rowobj));
}
}else{
addRow2(1,projectCode,codeSelect);
}
}
6.添加点击触发时间
$("body").on("click","#sla_add",function(){
//行号从第2行开始,newRowNo=lastRow;
var lastRow = $("#management_object tr").length;
var codeSelect = getSelect("",opptyPointInfoList,"opptyPointCode","id") //新增元素的时候可以将选择框新增过去不然新增的时候没有选择框
addRow2(lastRow,projectCode,codeSelect);
// if(lastRow==additionalResourceList.length){
//$("#transition_resource_add").hide();
// }
});
</script>
第四步编写HTML
1.添加头部链接
<div class="navTop">
<ul class="nav nav-tabs">
<li><a
href="${ctx}/delivery/platform/contractInfo?id=${projectInfo.id}">合同信息</a></li>
<li><a
href="${ctx}/delivery/platform/businessInfo?id=${projectInfo.id}">经营信息</a></li>
<li><a
href="${ctx}/delivery/platform/qualityInfo?id=${projectInfo.id}">质量信息</a></li>
<li><a
href="${ctx}/delivery/platform/hrInfo?id=${projectInfo.id}">人力资源信息</a></li>
<li class="active"><a
href="${ctx}/delivery/platform/opportunityPointInfo?id=${projectInfo.id}">机会点信息</a></li>
<li><a
href="${ctx}/delivery/platform/caseStudiesInfo?id=${projectInfo.id}">案例分享</a></li>
</ul>
</div>
2.添加表格
<form:form id="inputForm" modelAttribute="projectInfo" action="${ctx}/ito/output/platform/transitionFte" method="post" class="form-horizontal" cssStyle="margin:0;">
<form:hidden path="id" />
<div class="con" style="">
<div class="tab_con">
<div class="page_step2">
<div class="page_con">
<h1>AOS机会点端到端跟踪记录</h1>
<table id="sla" width="100%" cellpadding="0" cellspacing="0"> <!-- id：这个很重要 会用这个id找打具体哪个表中的元素将此表中的数据取出 -->
<tr class="tb_tt">
<td style=" 80px;">S.NO</td>
<td>项目编码</td>
<td>机会点编码<font color="red">*</font></td>
<td>行动描述<font color="red">*</font></td> <!-- <font color="red">*</font> 必选框给一个红色星号给予提醒-->
<td>变更时间<font color="red">*</font></td>
<td>变更跟踪责任人<font color="red">*</td>
<td>下一步计划<font color="red">*</td>
<td>求助</td>
<td>求助对象</td>
<td>附件</td>
</tr>
</table>
<div></div>
</div>
</div>
<a href="#javascript:;" id="sla_add" style="display: inline-block;"
class="btn_add"></a>
<div style="height: 20px;"></div>
</div>
<div style="text-align: center; text-align: center; 99%; ">
<input id="btnSave" onclick="" style="display: inline;" class="btn btn-primary btn_next" type="button" value="Save" />
</div>
</div>
</form:form>
3.jsp
<script type="text/javascript">
$("#btnSave").click(function(){
save(0,2);
});
function save(type,resultType){ //存储方法 将表格中的数据放入对应属性的实体类中 并封装成list集合提交给后端
var projectId = "${projectInfo.id}";
var oo;
var oox;
var isnext = false;
var kpiData =[]; //创建数组 使用的是数组直接量（Array Literal）创建数组等同于 var kpiData = new Array(); （使用array函数创建）
$("#sla").find("tr[name='data_row']").each(function(index,elment){ //语法：$(selector).each(function(index,element))
var obj = {}; //创建对象
obj.id = $(elment).find("td[name='row_checkbox']").find("input").val();
obj.projectBasicId = projectId;
// obj.opptyPiontInfoId = $(elment).find("td[name='M-1']").find("select").val();
// obj.opptyPointCode = $(elment).find("td[name='M-1']").find("select :selected").text();
obj.opptyPointCode = $(elment).find("td[name='M-1']").find("input").val();
obj.actionDescription = $(elment).find("td[name='M-2']").find("input").val();
obj.changeTime = $(elment).find("td[name='M-3']").find("input").val();
obj.changeTrackPerson = $(elment).find("td[name='M-4']").find("input").val();
obj.nextPlan = $(elment).find("td[name='M-5']").find("input").val();
obj.help = $(elment).find("td[name='M-6']").find("input").val();
obj.helpObject = $(elment).find("td[name='M-7']").find("input").val();
kpiData.push(obj); //将对象加入到数组中 （方法有别）与Java Java中的数组是set Map是put 不要混淆
if($(elment).find("td[name='M-1']").find("input").val() == '') {//判断提示语句
oo = $(elment).find("td[name='M-1']").find("input");
oox = "请输入机会点编码!";
isnext = true;
return false;
}
if($(elment).find("td[name='M-2']").find("input").val() == '') {
oo = $(elment).find("td[name='M-2']").find("input");
oox = "请输入行动描述描述!";
isnext = true;
return false;
}
if($(elment).find("td[name='M-3']").find("input").val() == '') {
oo = $(elment).find("td[name='M-3']").find("input");
oox = "请输入变更时间!";
isnext = true;
return false;
}
if($(elment).find("td[name='M-4']").find("input").val() == '') {
oo = $(elment).find("td[name='M-4']").find("input");
oox = "请输入变更跟踪责任人!";
isnext = true;
return false;
}
if($(elment).find("td[name='M-5']").find("input").val() == '') {
oo = $(elment).find("td[name='M-5']").find("input");
oox = "请输入下一步计划!";
isnext = true;
return false;
}
});
kpiData = JSON.stringify(kpiData); //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串
// window.alert(kpiData);
if(isnext && kpiData != "[]") { //判断集合是否有存在必填的元素未填现象
alert(oox);
oo.focus();
return false;
}
//将两个json字符串传递给后端
$.post("${ctx}/delivery/platform/saveOpptyPointInfoList",{projectId:"${projectInfo.id}",dataJson:manageData,traceData:kpiData,},function(result){
if(result=="success"){
if(resultType == '2'){
alert("Save data success!");
}
}
});
}else{
if(resultType == '2'){
alert("Please select a project!");
}
}
}
</script>