1html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新增保养标准</title>
</head>
<body>
<form class="form-horizontal" id="addform" > <!--method="POST" action="$!{request.getContextPath()}/maintain_standard/add.htm"-->
<div class="form-group">
<label class="form-lable control-label">标准名称</label>
<div class="form-line">
<input class="form-control" type="text" id="name" name="name" placeholder="请输入标准名称" />
</div>
</div>
<div class="form-group">
<label class="form-lable control-label">设备类型</label>
<div class="form-line has-feedback">
<input class="form-control" type="text" id="deviceType" name="deviceType" placeholder="请选择设备类型"/>
<span class="glyphicon glyphicon-arrordown form-control-feedback"></span>
</div>
</div>
<div class="form-group">
<label class="form-lable control-label">类型细化</label>
<div class="form-line has-feedback">
<input disabled="disabled" class="form-control" type="text" id="deviceTypeDetail" name="deviceTypeDetail" placeholder="请选择类型细化"/>
<span class="glyphicon glyphicon-arrordown form-control-feedback"></span>
</div>
</div>
<div class="form-group">
<label class="form-lable control-label">保养类型</label>
<div class="form-line has-feedback">
<input class="form-control" type="text" id="maintainType" name="maintainType" placeholder="请选择保养类型"/>
<span class="glyphicon glyphicon-arrordown form-control-feedback"></span>
</div>
</div>
<div calss="from-group">
<a href="javascript:void(0)" class="" style="margin-left:50px" id="addMainContent" >添加保养内容+</a> <a href="javascript:void(0)" class="" style="float:right;margin-right:14px;margin-left:20px">导入</a><a href="javascript:void(0)" class="" style="float:right">导出</a>
</div>
<div class="show_addMainContent" id="show_addMainContent" >
<table class="table showContentTable" id="showaddMainContentTable">
<thead>
<tr>
<th>序号</th>
<th>保养内容</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--操作按钮-->
<div class="text-center" style="display:none">
<button type="button" id="save" class="btn btn-success" >保存</button>
<input type="hidden" id="isOk" value="sure"/>
</div>
</form>
<!--添加保养内容-->
<div class="modal fade" id="myModal">
<!-- 窗口的声明-->
<div class="modal-dialog">
<!--内容的声明-->
<div class="modal-content">
<!--关闭按钮-->
<button type="button" class="close" data-dismiss="modal" ><span>×</span></button>
<div class="modal-header">添加保养内容</div>
<div class="modal-body">
<div class="gorm-group">
<textarea rows="6" style="resize:none" class="form-control" placeholder="添加保养内容" id="myModal_content"/></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="myModal_sure" >确定</button>
</div>
</div>
</div>
</div>
<!--添加保养内容子项-->
<div class="modal fade" id="myModalChild">
<!-- 窗口的声明-->
<div class="modal-dialog">
<!--内容的声明-->
<div class="modal-content">
<!--关闭按钮-->
<button type="button" class="close" data-dismiss="modal" ><span>×</span></button>
<div class="modal-header">添加保养内容子项</div>
<div class="modal-body">
<div class="gorm-group">
<label>类型</label>
<select class="form-control" id="myModalChild_type">
<option selected>单选</option>
<option>多选</option>
<option>输入框</option>
<option>单选输入框</option>
<option>多选输入框</option>
</select>
</div>
<div class="gorm-group" id="myModalChild_parent_name">
<label>名称一</label><span style="color:red">*</span>
<input type="text" class="form-control" id="myModalChild_name"/>
</div>
<div class="form-group has-feedback">
<label>隐患等级</label>
<input type="text" class="form-control " placeholder="请选择隐患等级" id="drop_down" />
<input type="text" class="form-control " placeholder="隐患等级ID" id="drop_down_1" />
<span class="glyphicon glyphicon-arrordown form-control-feedback"></span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="myModalChild_creat" type="button">创建</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="$!{request.getContextPath()}/res/js/maintainstandard/add.js"></script>
</body>
</html>
2js
//var maintainstandard_count=0;//记录保养内容的条数
var thismaintainstandard_count=0;
var deviceTypeValue;//保存设备类型的值
$(function(){
deviceTypeValue=$("#deviceType").val();
$("#deviceType").cursor(getPublicDeviceType(),"deviceType");//设备类型
$("#maintainType").cursor(getPublicMaintenanceTypes(),"maintainType");//保养类型
//监听设备文本的值是否发生了变化 发生变化就重新获取类型细化
setInterval(function(event){
if(deviceTypeValue !=$("#deviceType").val()){
$("#deviceTypeDetail").cursor(getPublicTypeElaboration($("#deviceType").val()),"deviceTypeDetail");//类型细化
deviceTypeValue=$("#deviceType").val();
$("#deviceTypeDetail").removeAttr("disabled");
}
},100);
$("#drop_down").cursor(getPublicLevel(),"drop_down");//隐患等级
var allTalbeTrIndex;
var isAclickEnableChild=true;//添加保养内容子项是否可用
//添加保养内容事件
$("#addMainContent").click(function(){
$("#myModal .modal-header").html("添加保养内容");
$("#myModal").modal("show");
});
//创建保养内容
$("#myModal_sure").click(function(){
var value=$.trim($("#myModal_content").val());
if(!value){alert("保养名称禁止为空！");return;}
if($("#myModal .modal-header").html()=="编辑保养内容"){
$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").children("td:eq(1)").text(value);
$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").children("td:eq(2)").children("input").val(value);//将修改的值保存到input中
}
else{
$("#showaddMainContentTable").append("<tr><td></td> <td>"+value+"</td> <td><input type='hidden' value='"+value+"' id='content' name='content'/> <button type='button' class='btn btn-info btn-xs editChild' ><i class='fa fa-edit'></i> 编辑</button> <button type='button' class='btn btn-info btn-xs deleteChild'><i class='fa fa-trash'></i> 删除</button> <button type='button' class='btn btn-info btn-xs addChild'><i class='fa fa-plus'></i> <span>添加子项</span></button></td></tr>");
}
$("#myModal").modal("hide");//
$("#showaddMainContentTable").show();//显示隐藏的table层
$("#myModal_content").val("");
tableSort();
});
//删除保养内容
$("#showaddMainContentTable").on("click",".deleteChild",function(){
allTalbeTrIndex=$(this).parent().parent().index();//保存点击的行的索引
$(this).parent().parent().remove();
var tableLength=$("#showaddMainContentTable tbody tr").length;
for(var i=(allTalbeTrIndex);i<=tableLength;i++){
//window.confirm($("#showaddMainContentTable tbody tr:eq("+i+")").children("td:eq(0)").children("input").length+"-i-"+i+"--"+$("#showaddMainContentTable tbody tr").length);
if($("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").children("td:eq(0)").children("input").length==1){
$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").remove();
}else{
break;
}
}
tableSort();//重新排序
});
//重新排序保养内容
function tableSort(){
var isChild=0;
for(var i=1;i<=$("#showaddMainContentTable tbody tr").length;i++){
if($("#showaddMainContentTable tbody tr:eq("+(i-1)+")").children("td:eq(0)").children("input").length==1){//如果是选项的话
isChild++;
}
else{
$("#showaddMainContentTable tbody tr:eq("+(i-1)+")").children("td:eq(0)").text(i-isChild);
}
}
}
//删除保养内容子项
$("#showaddMainContentTable").on("click",".deleteChild_child",function(){//
allTalbeTrIndex=$(this).parent().parent().index();//保存点击的行的索引
$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").remove();
});
//编辑保养内容
$("#showaddMainContentTable").on("click",".editChild",function(){
allTalbeTrIndex=$(this).parent().parent().index();//保存点击的行的索引
$("#myModal_content").val($(this).parent().siblings("td:eq(1)").text());//获取保养内容
$("#myModal .modal-header").html("编辑保养内容");//修改标题
$("#myModal").modal("show");
});
//添加保养内容子项
$("#showaddMainContentTable").on("click",".addChild",function(){
allTalbeTrIndex=$(this).parent().parent().index();//保存点击的行的索引
var selectOp="";
if($("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex+1)+")").children("td:eq(0)").children("input").val()=="no"){// 有子项
var thisType=$("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex+1)+")").children("td:eq(1)").children("input:eq(0)").attr("type");
switch(thisType){
case "radio":selectOp="<option>单选</option><option>单选输入框</option>" ;break;
case "checkbox":selectOp="<option>多选</option><option>多选输入框</option>" ;break;
case "text": selectOp="<option>输入框</option>";break;
}
}else{
selectOp="<option>单选</option><option>多选</option><option>输入框</option><option>单选输入框</option><option>多选输入框</option>";
}
$("#myModalChild_type").empty();
$("#myModalChild_type").html(selectOp);
$("#myModalChild").modal("show");
});
//创建保养内容子项
$("#myModalChild_creat").click(function(){
var thisTableLength=$("#showaddMainContentTable tbody tr").legnth;//获取table的tr长度
var content=$.trim($("#myModalChild_name").val());//名称
var myModalChild_typeValue=$("#myModalChild_type option:selected").text();//获取复选框的值
if(!content&&myModalChild_typeValue!="输入框"){alert("名称禁止为空！");return;}
var type=$("#myModalChild_type option:selected").text();//类型
var html="",htmlAll="";
var htmlBtn="<button type='button' class='btn btn-info btn-xs deleteChild_child'><i class='fa fa-trash'></i> 删除</button><br/>"
switch(type){
case "单选": html="<input type='radio' name='"+allTalbeTrIndex+"' value='"+$("#drop_down_1").val()+"' checked id='name'/>"+content+"<br/>"; break;
case "多选": html="<input type='checkbox' name='' value='"+content+"'/>"+content+"<br/>"; break;
case "输入框": html="<input class='form-control'type='text' /><br/>"; break;
case "单选输入框": html="<input type='radio' name='"+allTalbeTrIndex+"' value='"+$("#drop_down_1").val()+"' checked/>"+content+"<input type='text' class='form-control' /><br/>"; break;
case "多选输入框": html="<input type='checkbox' name='name' value='"+content+"'/>"+content+"<input type='text' class='form-control' /><br/>"; break;
}
if($("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex+1)+")").length==0){//没有子项
htmlAll="<tr><td><input type='hidden' value='no'/> </td> <td>"+html+"</td> <td>"+htmlBtn+"</td></tr>";
$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").after(htmlAll);
}else{
if($("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex+1)+")").children("td:eq(0)").children("input").val()=="no"){// 有子项
htmlAll="<tr><td><input type='hidden' value='no'/></td> <td>"+html+"</td> <td>"+htmlBtn+"</td></tr>";
$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").after(htmlAll);
}else{
htmlAll="<tr><td><input type='hidden' value='no'/></td> <td>"+html+"</td> <td>"+htmlBtn+"</td></tr>";
$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").after(htmlAll);
}
}
$("#myModalChild").modal("hide");
$("#save").removeAttr("disabled");//保存按钮可用
isAclickEnableChild=true;//创建保养内容子项不可用
$("#myModalChild_name").val("");
//$("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex)+")").children("td:eq(2)").children("button:eq(2)").children("span").text("编辑子项");//添加子项变为编辑子项
});
//添加子项复选框
$("#myModalChild_type").change(function(){
var myModalChild_typeValue=$("#myModalChild_type option:selected").text();//
if(myModalChild_typeValue=="输入框"){
$("#myModalChild_parent_name").hide();
}else{
$("#myModalChild_parent_name").show();
}
});
//保存
$("#save").click(function(){
var tableData2=new Array();//
//遍历table获取保养内容选项
var thisCount=0,thisContents=true;
$("#isOk").val(thisContents);//保存是否执行保存的状态
var tableTrLength=$("#showaddMainContentTable tbody tr").length;
var tableCycle=0;
//重写
for(var i=0;i<tableTrLength;i++){
var tableData1={};
if($("#showaddMainContentTable tbody tr:eq("+i+")").children("td:eq(0)").children("input").length==1){//如果是选项的话
window.confirm("请完善保养内容");
}//如果是标题
else{
if($("#showaddMainContentTable tbody tr:eq("+(i+1)+")").children("td:eq(0)").children("input").length<1){//如果是标题没有选项就提示
window.confirm("请完善选项");thisContents=false;$("#isOk").val(thisContents);return;
}
else{
tableData1.content=$("#showaddMainContentTable tbody tr:eq("+i+")").children("td:eq(1)").text();//保存保养内容
tableData1.maintainStandardItem2s=new Array();
for(var j=(i+1);j<tableTrLength;j++){
//判断类型
if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").attr("type")=="radio"){
//判断是单选 还是单选输入框
if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").length==1){//单选
tableData1.maintainStandardItem2s.push({"name":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").text(),"unsafeId":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input[type=radio]:eq(0)").val(),"resultType":"1"})
}else{//单选 输入框
tableData1.maintainStandardItem2s.push({"name":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").text(),"unsafeId":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input[type=radio]:eq(0)").val(),"resultType":"4"})
}
}else if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").attr("type")=="checkbox"){//复选框
//判断是多选 还是多选输入框
if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").length==1){//单选
tableData1.maintainStandardItem2s.push({"name":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input[type=checkbox]:eq(0)").val(),"resultType":"2"})
}else{//多选 输入框
tableData1.maintainStandardItem2s.push({"name":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input[type=radio]:eq(0)").val(),"resultType":"5"})
}
}else if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").attr("type")=="text"){//输入框
tableData1.maintainStandardItem2s.push({"resultType":"3"})
}
if($("#showaddMainContentTable tbody tr:eq("+(j+1)+")").children("td:eq(0)").children("input").length==1){//如果他的下一个还是组选项子选项的话
continue;
} else{
tableData2.push(tableData1);
i=j;
break;
}
}
}
}
}
$.each(tableData2,function(key,value){
if(value.maintainStandardItem2s[0].resultType.length>0){
$.each(value.maintainStandardItem2s,function(key1,value1){
window.confirm(value.content+"--"+value1.name+"--"+value1.resultType);
})
}else{
window.confirm(value.content);
}
})
var thisData={
"name":$("#name").val(),//标准名称
"deviceType":$("#deviceType").val(),//设备类型
"deviceTypeDetail":$("#deviceTypeDetail").val(),//类型细化
"maintainType":$("#maintainType").val(),//保养类型
"maintainStandardItem1s":tableData2,
}
$.ajax({
type: "post",
url: "../maintain_standard/add.htm",
dataType : 'json',
contentType:'application/json',
data:JSON.stringify(thisData),
async:false,
success: function(res){
window.confirm(res.msg);
},
error: function(res){
console.log(res);
alert("操作失败");
}
});
});
})