叶签形式的表格制作
Posted jiajialeps
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了叶签形式的表格制作相关的知识，希望对你有一定的参考价值。
第一步：制作表格
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!");
}
}
}
以上是关于叶签形式的表格制作的主要内容，如果未能解决你的问题，请参考以下文章