葉簽形式的表格制作
阿新 • • 發佈：2018-12-23
.post 沒有 area require ref 前臺 pro tabs isn
第一步：制作表格
var data = ${empty data ? "‘‘" : data};
var kpiTabData = data["kpiTabData"];
var kpiObjectList = data["kpiObjectList"];
var row3 = ‘<tr name="data_row">‘;
row3 += ‘<td name="row_checkbox" height="26px" style="text-align:center"><a class="icon-remove" title="Delete" style="cursor:pointer;"></a><input name="id" type="hidden" value="" /><input name="sno" type="hidden" value="" /></td>‘;
row3 += ‘<td name="level"><input type="text" value="" /></td>‘;
row3 += ‘<td name="M-1"><input type="text" value="" /></td>‘;
row3 += ‘<td name="remark" class="bg_green" style="width:200px;"><textarea class="bg_green" style="width:100%;border:0px solid" maxlength="500"></textarea></td>‘;
row3 += ‘</tr>‘;
第二步：遍歷list，將數據傳入表格中
if(kpiObjectList){
addKpiListRows();
}else{
addRow3(1,1,projectCode);
}
function addKpiListRows(){
if(kpiObjectList.length > 0){
for(var k=0;k<kpiTabData.length;k++){
for(var i=0;i<kpiObjectList.length;i++){
var rowobj = $(row3);
$(rowobj).attr("id","row_"+ i);
$(rowobj).find("td[name=‘row_checkbox‘]").find("input[name=‘sno‘]").val(kpiObjectList[i]["sort"]);
$(rowobj).find("td[name=‘row_checkbox‘]").find("input[name=‘id‘]").val(kpiObjectList[i]["id"]);
$(rowobj).find("td[name=‘level‘]").find("input").val(kpiObjectList[i]["kpiIndName"]);
$(rowobj).find("td[name=‘M-1‘]").find("input").val(kpiObjectList[i]["kpiIndRequire"]);
$(rowobj).find("td[name=‘remark‘]").children("textarea").val(kpiObjectList[i]["remarks"]);
if(kpiObjectList[i]["kpiIndTypeValue"]==kpiTabData[k]["value"]){ // 判斷語句十分關鍵 會從這個判斷語句找到相應的葉簽將數據放上去
$("#kpi"+kpiTabData[k]["value"]).append($(rowobj)); //將數據添加到相應的標簽上
}
}
}
}else{
addRow3(1,1,projectCode);
}
}
第三步：制作活體葉簽
<div class="page_step2">
<div class="page_con">
<h1>
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse"
data-href="collapsekpi" href="#collapsekpi"> <i
class="icon-chevron-right"></i> <span class="projectCss">合同要求KPI/KQI</span>
</a>
</div>
</h1>
<div style="height:10px;">
</div>
<！--- //葉簽制作 -->
<div id="collapsekpi" class="panel-collapse collapse">
<ul id="myTab" class="nav nav-tabs">
<c:forEach items="${kpiTabList}" var="item" varStatus="status">
<li><a href="#tab${item.value}" data-toggle="tab">${item.label}</a></li>
</c:forEach>
</ul>
<div id="myTabContent" class="tab-content">
<！---遍歷list將葉簽放在表頭位置，實現活（葉簽）樣式 -->
<c:forEach items="${kpiTabList}" var="item" varStatus="status">
<div class="tab-pane fade" id="tab${item.value}">
<！---將table的id的名稱附上活的id值 便於對應相應的表格，便於js遍歷處的數據放在相應得table表格上 -->
<table id="kpi${item.value}" width="100%" cellpadding="0"
cellspacing="0">
<tr class="tb_tt">
<td style="width: 80px;">操作</td>
<td>KPI 指標名稱<font color="red">*</font></td>
<td>指標要求<font color="red">*</font></td>
<td>計算公式描述<font color="red">*</font></td>
</tr>
</table>
<！---將其設置成按鈕的格式，點擊的時候執行mytable(str)函數，將當前遍歷的值傳入函數，便於找到相應的表格，將空白欄添加進去-->
<a href="#javascript:;" id="kpi_add${item.value}"
name="kpi_add${item.value}" style="display: inline-block;"
class="btn_add" type="button"
onclick="mytable(${item.value});"></a>
</div>
</c:forEach>
</div>
<script>
$(function () {
$(‘#myTab li:eq(0) a‘).tab(‘show‘);
});
</script>
</div>
</div>
</div>
add按鈕請求的方法 將添加的表格放在相應的列表中
function mytable(str,projectCode){
var lastRow = $("#kpi"+str+" tr").length; //最後一行的長度
var sno = $("#kpi"+str+" tr:last").find("td[name=‘row_checkbox‘]").find("input[name=‘sno‘]").val()*1+1;
var row3 = ‘<tr name="data_row">‘;
row3 += ‘<td name="row_checkbox" height="26px" style="text-align:center"><a class="icon-remove" title="Delete" style="cursor:pointer;"></a><input name="id" type="hidden" value="" /><input name="sno" type="hidden" value="" /></td>‘;
row3 += ‘<td name="level"><input type="text" value="" /></td>‘;
row3 += ‘<td name="M-1"><input type="text" value="" /></td>‘;
row3 += ‘<td name="remark" class="bg_green" style="width:200px;"><textarea class="bg_green" style="width:100%;border:0px solid" maxlength="500"></textarea></td>‘;
row3 += ‘</tr>‘;
var objRow = $(row3);
if(isNaN(sno)){ //當有些遍歷出來的標簽其下面沒有數據的時，添加新數據第一條的sno將會是NaN這個值，傳入後端遍歷將會出錯，必須判斷很重要這一步。
sno=1;
}
objRow.find("td[name=‘row_checkbox‘]").find("input[name=‘sno‘]").val(sno);
$("#kpi"+str).append(objRow);
}
第四步：存入數據傳入後臺
//註意的是定義變量的時候一定要註意作用域，不然很多都是無效的引入，到處是undefined
var data = ${empty data ? "‘‘" : data};
var kpiTabData = data["kpiTabData"];
var kpiData =[];
for(var p=0;p<kpiTabData.length;p++){
$("#kpi"+kpiTabData[p]["value"]).find("tr[name=‘data_row‘]").each(function(index,elment){
var obj = {};
obj.id = $(elment).find("td[name=‘row_checkbox‘]").find("input[name=‘id‘]").val();
obj.sort = $(elment).find("td[name=‘row_checkbox‘]").find("input[name=‘sno‘]").val();
obj.projectBasicId = projectId;
//將對應的kpiTabData[p]["label"]放進去，因為前臺的kpiIndType是隱藏的，但是數據庫中需要值
obj.kpiIndType = kpiTabData[p]["label"];
obj.kpiIndName = $(elment).find("td[name=‘level‘]").find("input").val();
obj.kpiIndRequire = $(elment).find("td[name=‘M-1‘]").find("input").val();
obj.remarks = $(elment).find("td[name=‘remark‘]").children("textarea").val();
kpiData.push(obj);
if($(elment).find("td[name=‘level‘]").find("input").val() == ‘‘) {
oo = $(elment).find("td[name=‘level‘]").find("input");
oox = "請輸入KPI指標名稱！";
isnext = true;
return false;
}
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=‘remark‘]").children("textarea").val() == ‘‘) {
oo = $(elment).find("td[name=‘remark‘]").children("textarea");
oox = "請輸入計算公式描述！";
isnext = true;
return false;
}*/
});
}
kpiData = JSON.stringify(kpiData);
// window.alert("kpiDatas%%%%%"+kpiDatas);
if(isnext && kpiData != "[]"){
alert(oox);
oo.focus();
return false;
}
$.post("${ctx}/delivery/platform/saveContractInfoData",{projectId:"${projectInfo.id}",manageData:manageData,serviceData:serviceData,slaData:slaData,kpiData:kpiData},function(result){
if(result=="success"){
if(resultType == ‘2‘){
alert("Save data success!");
window.location.reload();
}
}else if(result == "fail"){
if(resultType == ‘2‘){
alert("Save data fail!");
}
}
});
}else{
if(resultType == ‘2‘){
alert("Please select a project!");
}
}
}
葉簽形式的表格制作