在前端的开发中,页面多了让人纠结,也不好组织,在LayUI中有几种解决办法,分步表单就是比较不错的选择,缺点也明显,所有的页面集中在一个页面中,代码量也大。

  在系统参数维护中,用户提出要一步步选择来维护,这样可以减少操作错误,我使用了LayUI的分步表单来完成。

  用户的维护操作在一个页面中。

  代码量有点大了,HTML部分将近180行,JavaScript代码将近500行,为了调试,我还是集中在一个HTML文件中。

  开始网页界面部分设计得有点复杂,300行,结果因为一个<DIV>少加了</DIV>结尾,界面部分总是不正常,被折腾了一下午,调试程序的时候,干脆精简了,去掉了好多的嵌套和其他元素,这样才顺利完成。

  通过分步表单,你可以集成很多的页面在一个页面中,完成比较多的功能。

操作界面:

分步表单jquery_javascript

分步表单jquery_分步表单jquery_02

 

分步表单jquery_分步表单jquery_03

分步表单jquery_分步表单jquery_04

 

 网页代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分步表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../js/lay-module/step-lay/step.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;border: 0px solid #d70008;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 760px;padding-top: 40px;border: 0px solid #d70008;">
                                    <div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px; border: 0px solid #d70008;">
										<input type="radio" class="layui-input" name="Dc04" id="D0" value="手工输入" title="手工输入" disabled="disabled">
                                    </div>
                                    <div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px; border: 0px solid #d70008;">
										<input type="radio" class="layui-input" name="Dc04" id="DA" value="Word文件" title="Word文件" checked="checked"  lay-filter="selectType">
                                    </div>
                                    <div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px;  border: 0px solid #d70008;">
										<input type="radio" class="layui-input" name="Dc04" id="DB" value="列表" title="列表"  lay-filter="selectType">
                                    </div>
                                    <div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px;  border: 0px solid #d70008;">
										<input type="radio" name="Dc04" id="DC" value="二选一" title="二选一"   lay-filter="selectType">
                                    </div>
                                    <div class="layui-form-item" style="margin: 0 auto;padding-left: 250px;padding-top: 30px;  border: 0px solid #d70008;">
										<input type="radio" name="Dc04" id="DE" value="长文本" title="长文本"   lay-filter="selectType">
                                    </div>
                                    <div class="layui-form-item" style="margin: 0 auto;padding-left: 0px;padding-top: 50px;  border: 0px solid #d70008;">
                                        <div class="layui-input-block" style="border: 0px solid #270008;text-align: center;left: 0px;margin-left: 0px;">
                                            <button class="layui-btn" lay-submit lay-filter="formStep1"> 下一步 </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
							
                            <div>
                                <form class="layui-form"  style="margin: 0 auto;max-width: 870px;padding-top: 0px;border: 0px solid #270008;">
                                    <div class="layui-form-item" style="border:0px solid #D11111;margin-top: 0px ;padding-top: 0px;top:0px;">
										<script type="text/html" id="toolbarDemo">
											<div style="position: absolute;left: 10px; top: 10px;  float: left;width: 800px;border: 0px solid #00FF00;">
												<label class="layui-form-label" style="font-size: 18px;color: #D70008; white-space:nowrap;text-align: center;" id="lbl_1">从列表中选择一个值</label>
											</div>																				
										</script>										
										<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="border: 0px solid #270008;text-align: center;left: 0px;margin-left: 0px;">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStepAdd">增加</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStepUpdate">修改</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStepDel">删除</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
							
                            <div>
									<form class="layui-form"  style="height: 519px; margin: 0 auto;max-width: 870px;padding-top: 0px;border:0px solid #5FB878;">
										<div class="layui-form-item" style="height: 419px; border: 0px solid #D11111;margin-top: 0px ;padding-top: 0px;top:0px;" id="frmWord">
												<div class="layui-form-item">
													<label class="layui-form-label required">样式类型</label>
													<div class="layui-input-inline">
														<input type="text" id="DcWord1" value="" class="layui-input" disabled="disabled">
													</div>
												</div>				
												<div class="layui-form-item">
													<label class="layui-form-label required">分类名称</label>
													<div class="layui-input-block">
														<input type="text" id="DcWord2"  value="" class="layui-input">
													</div>
												</div>				
												<div class="layui-form-item">
													<label class="layui-form-label">标识名称</label>
													<div class="layui-input-block">
														<input type="text" id="DcWord3"  value="" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item"  style="height: 39px;">
													<label class="layui-form-label">Word文件</label>
													<div class="layui-input-inline" style="width: 400px;">
														<input type="text" id="DcWord4"  value="" style="width: 400px;" class="layui-input" disabled="disabled">
													</div>
													<div class="layui-input-inline">
														<button type="button" class="layui-btn" style="height: 39px;" id="selectWord">选择Word文件</button>
														<input type='file' id='readFile' style="opacity: 0;">
													</div>		
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">文件后缀</label>
													<div class="layui-input-block">
														<input type="text" id="DcWord5"  value="" class="layui-input" disabled="disabled">
													</div>
												</div>																										
												<div class="layui-form-item">
													<label class="layui-form-label">排序号</label>
													<div class="layui-input-inline">
														<input type="number" id="DcWord6" value="" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">说明</label>
													<div class="layui-input-block">
														<input type="text" id="DcWord7" value="" class="layui-input">
													</div>
												</div>
										</div>
										
										<div class="layui-form-item" style="height: 449px; border: 0px solid #D11111;margin-top: 0px ;padding-top: 0px;top:0px;" id="frmLongText">
												<div class="layui-form-item">
													<label class="layui-form-label required">样式类型</label>
													<div class="layui-input-inline">
														<input type="text" id="DcLongText1" value="" class="layui-input" disabled="disabled">
													</div>
												</div>				
												<div class="layui-form-item">
													<label class="layui-form-label required">分类名称</label>
													<div class="layui-input-block">
														<input type="text" id="DcLongText2"  value="" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label required">标识名称</label>
													<div class="layui-input-block">
														<input type="text" id="DcLongText3"  value="" class="layui-input">
													</div>
												</div>																
												<div class="layui-form-item" style="height: 119px;">
													<label class="layui-form-label">具体值</label>
													<div class="layui-input-block" style="border: 0px solid #d70008;width: 700px;height: 119px;">
													  <textarea id="DcLongText4" placeholder="" class="layui-textarea" style="height: 117px;resize:none;"></textarea>
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">特别字符</label>
													<div class="layui-input-inline">
														<input type="text" id="DcLongText5" value="" class="layui-input">
													</div>
												</div>												
												<div class="layui-form-item">
													<label class="layui-form-label">排序号</label>
													<div class="layui-input-inline">
														<input type="number" id="DcLongText6" value="" class="layui-input">
													</div>
												</div>
												<div class="layui-form-item">
													<label class="layui-form-label">说明</label>
													<div class="layui-input-block">
														<input type="text" id="DcLongText7" value="" class="layui-input">
													</div>
												</div>
										</div>																																	
										<div class="layui-form-item" style="text-align: center;">
												<button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
												<button class="layui-btn" lay-submit lay-filter="formStepSave">保存</button>
										</div>
									</form>									
                            </div>
                        </div>
                    </div>
                    <div style="color: #666;">
                        <p>所有用户的输入都基于目前维护的样式数据。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
	var selectType='Word文件';
	var selectRow;//选择的行
	var OP='';
    layui.use([ 'form', 'step','table'], function () {
        var $ = layui.$;
        var form = layui.form;
        var step = layui.step;
		var table = layui.table;		
		//选择Word文件
		document.getElementById('selectWord').addEventListener('click',function(){
			$("#readFile").trigger("click");			
		});
		document.getElementById('readFile').addEventListener('change',function(){
			if(this.files.length===0){
				console.log('没有选择文件!');
				return;
			}		
			let reader=new FileReader();
			reader.onload=function (){
				// console.log(reader.result);
			}
			// reader.readAsText(this.files[0]);
			// console.log(this.files[0].size);
			// console.log(this.files[0].name);
			// document.getElementById('Dc05').
			sFilename=this.files[0].name.toLowerCase().split('.');
			fileExt=sFilename[1];
			// console.log(fileExt);
			document.getElementById('DcWord4').value=sFilename;
			document.getElementById('DcWord5').value=fileExt;
			// console.log(this.files[0].type);
		})			

		table.render({
			elem: '#currentTableId',
			// url: 'ZTBStyleTableFormStep.php',
			// method:'POST',
			// where:{"OP":"列表","selectType":selectType},	
			toolbar: '#toolbarDemo',
			defaultToolbar: [''],
			height:'523px',
			width:'600px',
			cols: [[
				{type: 'radio', width: 80, title: '选择'},
				{field: 'c01', width: 220, title: '样式类型', hide:true},
				{field: 'c02', width: 200, title: '分类名称'},
				{field: 'c03', width: 140, title: '标识名称'},
				{field: 'c04', width: 160, title: '具体值'},
				{field: 'c05', width: 160, title: '值类型', hide:true},
				{field: 'c06', width: 80, title: '排序号'},
				{field: 'c07', width: 260, title: '说明'}
			]],				
			limits: [10],
			limit: 10,
			page: true,
			even: true,
			skin: 'line',
			done: function (res, curr, count) {
			}
		});			
		
		function generateUpdateSql(strSql,sqlFieldName,sqlFieldType,elementId,srcValue){
				let sTemp;
				sTemp=document.getElementById(elementId).value.trim();
				if(sTemp != srcValue){
						if(strSql==''){
								switch(sqlFieldType){
										case 'STRING':
											strSql=" "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
											break;
										case 'DATE':
											strSql=" "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
											break;
										case 'NUMBER':
											strSql=" "+sqlFieldName+"="+document.getElementById(elementId).value;
											break;
										default:
											break;
								}							
						}else{
								switch(sqlFieldType){
										case 'STRING':
											strSql=strSql+", "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
											break;
										case 'DATE':
											strSql=strSql+", "+sqlFieldName+"='"+document.getElementById(elementId).value+"'";
											break;
										case 'NUMBER':
											strSql=strSql+", "+sqlFieldName+"="+document.getElementById(elementId).value;
											break;
										default:
											break;
								}							
						}
				}
				return strSql;
		}
		
		function checkDuplicateRecord(strTable,strWhere){
				let strFalse='';
				$.ajax({//检查数据库的相同记录是否存在
					url:'ZTBCommon.php',
					data:{
						"OP":"IsExist",
						"strTable":strTable,
						"strWhere":strWhere
						},
					type:'POST',
					datetype:'json',
					async:false,
					success:function (data) {
						if(data=='YES'){ 
							strFalse="该记录在数据库中已经存在!";
						}
					}
				});
				return strFalse;
		}

		function checkElementIsEmptyOrNull(ElementId){
			let sTemp='';
			sTemp=document.getElementById(ElementId).value.trim();						
			if( sTemp.trim()=='' || sTemp==null || sTemp==undefined){
					return '空';
			}else{
				return '';
			}			
		}
		
		function beforeSubmitWord(){
				let strFalse='';
				let sTemp='';
				sTemp=checkElementIsEmptyOrNull('DcWord2');
				if(sTemp=='空'){ strFalse="分类名称不能为空!"; }
				sTemp=checkElementIsEmptyOrNull('DcWord3');
				if(sTemp!=''){ strFalse=strFalse+"标识名称不能为空!"; }
				sTemp=checkElementIsEmptyOrNull('DcWord4');
				if(sTemp!=''){ strFalse=strFalse+"没有上传文件!"; }
				return strFalse;
		}

		function beforeSubmitLongText(){
				let strFalse='';
				let sTemp='';
				sTemp=checkElementIsEmptyOrNull('DcLongText2');
				if(sTemp=='空'){ strFalse="分类名称不能为空!"; }
				sTemp=checkElementIsEmptyOrNull('DcLongText3');
				if(sTemp=='空'){ strFalse="标识名称不能为空!"; }
				if(selectType!='列表'){
						sTemp=checkElementIsEmptyOrNull('DcLongText4');
						if(sTemp=='空'){ strFalse="请输入具体值!"; }
				}
				return strFalse;
		}
	
		function refreshTable(){
			table.render({
				elem: '#currentTableId',
				url: 'ZTBStyleTableFormStep.php',
				method:'POST',
				where:{"OP":"列表","selectType":selectType},	
				toolbar: '#toolbarDemo',
				defaultToolbar: [''],
				height:'523px',
				width:'600px',
				cols: [[
					{type: 'radio', width: 80, title: '选择'},
					{field: 'c01', width: 100, title: '样式类型', hide:true},
					{field: 'c02', width: 200, title: '分类名称'},
					{field: 'c03', width: 160, title: '标识名称'},
					{field: 'c04', width: 160, title: '具体值'},
					{field: 'c05', width: 160, title: '特殊符号', hide:true},
					{field: 'c06', width: 80, title: '排序号'},
					{field: 'c07', width: 120, title: '说明'}
				]],				
				limits: [10],
				limit: 10,
				page: true,
				even: true,
				skin: 'line',
				done: function (res, curr, count) {
						//标识不可操作的行
						for (let i=0;i<res.data.length;i++){
								if(res.data[i]['c02']==res.data[i]['c03']){
									$(".layui-table tr[data-index="+i+"] input[type='radio']").prop('disabled',true);
									$(".layui-table tr[data-index="+i+"] input[type='radio']").addClass('layui-btn-disabled');
									$(".layui-table tr[data-index="+i+"] input[type='radio']").next().css("cursor","not-allowed");
									$(".layui-table tr[data-index="+i+"] ").css("background-color","#E0E0E0");
									$(".layui-table tr[data-index="+i+"] ").css("color","#9f9696");
								}
						}					
				}
			});	
			document.getElementById("lbl_1").innerText=selectType;								
		}
						
        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '650px',
            stepItems: [{
                title: '选择样式类型'
            }, {
                title: '选择操作'
            }, {
                title: '完成维护'
            }]
        });

		form.on('radio(selectType)',function(data){		
			selectType=data['value'];
			refreshTable();
			return false;
		})

        form.on('submit(formStep1)', function (data) {
			refreshTable();
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStepAdd)', function (data) {//点击新增
			OP='新增'
			$('#frmWord').hide();
			$('#frmLongText').hide();
			if(selectType=='Word文件'){
					document.getElementById("DcWord1").value=selectType;
					document.getElementById("DcWord2").value='';
					document.getElementById("DcWord3").value='';
					document.getElementById("DcWord4").value='';
					document.getElementById("DcWord6").value='';
					document.getElementById("DcWord7").value='';
					$('#frmWord').show();				
			}
			if(selectType=='列表' || selectType=='二选一' || selectType=='长文本'){
					document.getElementById("DcLongText1").value=selectType;
					document.getElementById("DcLongText2").value='';
					document.getElementById("DcLongText3").value='';
					document.getElementById("DcLongText4").value='';
					document.getElementById("DcLongText5").value='';
					document.getElementById("DcLongText6").value='';
					document.getElementById("DcLongText7").value='';
					$('#frmLongText').show();								
			}
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStepUpdate)', function (data) {//点击修改
			OP='修改'
			$('#frmWord').hide();
			$('#frmLongText').hide();
			if(selectType=='Word文件'){
					document.getElementById("DcWord1").value=selectType;
					document.getElementById("DcWord2").value=selectRowObj['data']['c02'];
					document.getElementById("DcWord3").value=selectRowObj['data']['c03'];
					document.getElementById("DcWord4").value=selectRowObj['data']['c04'];
					document.getElementById("DcWord5").value=selectRowObj['data']['c05'];
					document.getElementById("DcWord6").value=selectRowObj['data']['c06'];
					document.getElementById("DcWord7").value=selectRowObj['data']['c07'];
					$('#frmWord').show();				
			}
			if(selectType=='列表' || selectType=='二选一' || selectType=='长文本'){
					document.getElementById("DcLongText1").value=selectType;
					document.getElementById("DcLongText2").value=selectRowObj['data']['c02'];
					document.getElementById("DcLongText3").value=selectRowObj['data']['c03'];
					document.getElementById("DcLongText4").value=selectRowObj['data']['c04'];
					document.getElementById("DcLongText5").value=selectRowObj['data']['c05'];
					document.getElementById("DcLongText6").value=selectRowObj['data']['c06'];
					document.getElementById("DcLongText7").value=selectRowObj['data']['c07'];
					$('#frmLongText').show();											
			}			
			step.next('#stepForm');
            return false;
        });

        form.on('submit(formStepDel)', function (data) {
            // 删除
			if(selectRowObj){
				layer.confirm('确定要删除这条记录吗?', function (index) {								
					$.ajax({
							url:'ZTBStyleTableFormStep.php',
							data:{
								  "OP":"删除",
								  "c01":selectRowObj['data']['c01'],
								  "c02":selectRowObj['data']['c02'],
								  "c03":selectRowObj['data']['c03']
								  },
							type:'POST',
							async:false,
							success:function (data) {
								console.log(data);
								if(data['data']=='OK'){	
									//刷新表格
									$(".layui-laypage-btn")[0].click();
								}else{
									layer.msg('删除记录失败!',{time:3000,icon:5});
								}
							},
							error:function(data){
								console.log("错误:"+data);
							}
					});							 					
				layer.close(index);													
				})									
			}
            return false;
        });

        form.on('submit(formStepSave)', function (data) {//点击保存
			var canContinue=true;
			var strFalse="";									            		
			
			strFalse=beforeSubmitWord();//检查是否可以提交
			if(strFalse==''){
					if(selectType=='Word文件'){					
							if(OP=='新增'){
									strFalse=checkDuplicateRecord('StyleTable',"c01='"+document.getElementById('DcWord1').value+"' and c02='"+document.getElementById('DcWord2').value+"' and c03='"+document.getElementById('DcWord3').value+"'")
									if(strFalse==''){//提交数据
											let wordFile = document.getElementById('readFile');
											//用FormData对象对表单数据进行封装
											const fd = new FormData();//FormData构造器接收的是一个form的DOM对象					
											fd.append("wordFile",wordFile.files[0]);//Word文件数据
											fd.append("c01",$('#DcWord1').val());//大类
											fd.append("c02",$('#DcWord2').val());//分类名称
											fd.append("c03",$('#DcWord3').val());//标识名称
											fd.append("c04",$('#Dc04').val());//文件名称
											fd.append("c05",$('#Dc05').val());//文件后缀
											fd.append("c06",$('#Dc06').val());//排序号
											fd.append("c07",$('#Dc07').val());//备注
											fd.append("selectType","WORD文件");
											fd.append("OP","新增");
											$.ajax({						
													url: 'ZTBStyleTableFormStep.php',
													type: "POST",
													data: fd,
													dataType: "JSON",
													async: true,
													processData: false,//设置为false,JQuery则不对数据进行序列化
													contentType: false,//设置为false,JQuery则不设Content-Type请求头
													beforeSend: function(xhr){},
													complete: function(xhr,status){},
													error: function(xhr,status,error){
														console.log(xhr);							
														console.log(status);							
														console.log("error:"+error);														
													},
													success: function(result){
														//回退
													}
											});
									}else{
											layer.msg(strFalse,{time:3000,icon:5});
									}																	
							}
							if(OP=='修改'){
									//判断数据是否更改
									let strUpdate='';
									let wordFile = document.getElementById('readFile');
									//用FormData对象对表单数据进行封装
									const fd = new FormData();//FormData构造器接收的是一个form的DOM对象					
									strUpdate=generateUpdateSql(strUpdate,'c02','STRING','DcWord2',selectRow['data']['c02']);
									strUpdate=generateUpdateSql(strUpdate,'c03','STRING','DcWord3',selectRow['data']['c03']);
									strUpdate=generateUpdateSql(strUpdate,'c04','STRING','DcWord4',selectRow['data']['c04']);
									strUpdate=generateUpdateSql(strUpdate,'c05','STRING','DcWord5',selectRow['data']['c05']);
									strUpdate=generateUpdateSql(strUpdate,'c06','STRING','DcWord6',selectRow['data']['c06']);
									strUpdate=generateUpdateSql(strUpdate,'c07','STRING','DcWord7',selectRow['data']['c07']);
									if(document.getElementById("DcWord4").value != selectRow['data']['c04']){
										fd.append("UpdateWordFile",'YES');//更新Word文件
										fd.append("wordFile",wordFile.files[0]);//Word文件数据
									}									
																											
									if(strUpdate !=''){
											fd.append("OP",'修改');
											fd.append("selectType",selectType);
											fd.append("strUpdate",strUpdate);
											fd.append("strWhere","c01='"+selectRow['data']['c01']+"' and c02='"+selectRow['data']['c02']+"' and c03='"+selectRow['data']['c03']+"'");																							
											$.ajax({						
													url: 'ZTBStyleTableFormStep.php',
													type: "POST",
													data: fd,
													dataType: "JSON",
													async: true,
													processData: false,//设置为false,JQuery则不对数据进行序列化
													contentType: false,//设置为false,JQuery则不设Content-Type请求头
													beforeSend: function(xhr){},
													complete: function(xhr,status){},
													error: function(xhr,status,error){
														console.log(xhr);							
														console.log(status);							
														console.log("error:"+error);														
													},
													success: function(result){
														//回退
													}
											});
									}else{
											layer.msg('没有需要更新的数据!',{time:3000,icon:5});
									}
							}
					}
					if(selectType=='列表' || selectType=='二选一' || selectType=='长文本'){
							if(OP=='新增'){
									strFalse=checkDuplicateRecord('StyleTable',"c01='"+document.getElementById('DcWord1').value+"' and c02='"+document.getElementById('DcWord2').value+"' and c03='"+document.getElementById('DcWord3').value+"'")
									if(strFalse==''){//提交数据								
											$.ajax({
													url:'ZTBStyleTable.php',
													data:{
														  "OP":"新增",
														  "selectType":selectType,											  
														  "c01":document.getElementById("Dc01").value,
														  "c02":document.getElementById("Dc02").value,
														  "c03":document.getElementById("Dc03").value,
														  "c04":document.getElementById("Dc04").value,
														  "c05":document.getElementById("Dc05").value,
														  "c06":document.getElementById("Dc06").value,
														  "c07":document.getElementById("Dc07").value,
														  "c08":'',
														  },
													type:'POST',
													async:true,
													success:function (JsonData) {
														if(JsonData['data']!='OK'){
															layer.msg('新增记录失败!',{time:3000,icon:5});											
														}
													}
											});
									}else{
											layer.msg(strFalse,{time:3000,icon:5});
									}
							}					
							if(OP='修改'){
									//判断数据是否更改
									var strUpdate='';
									strUpdate=generateUpdateSql(strUpdate,'c02','STRING','DcWord2',selectRow['data']['c02']);
									strUpdate=generateUpdateSql(strUpdate,'c03','STRING','DcWord3',selectRow['data']['c03']);
									strUpdate=generateUpdateSql(strUpdate,'c04','STRING','DcWord4',selectRow['data']['c04']);
									strUpdate=generateUpdateSql(strUpdate,'c05','STRING','DcWord5',selectRow['data']['c05']);
									strUpdate=generateUpdateSql(strUpdate,'c06','STRING','DcWord6',selectRow['data']['c06']);
									strUpdate=generateUpdateSql(strUpdate,'c07','STRING','DcWord7',selectRow['data']['c07']);
									if(strUpdate!=''){
											$.ajax({						
													url: 'ZTBStyleTableFormStep.php',
													type: "POST",
													data: {
														"strUpdate":strUpdate,
														"strWhere":"c01='"+selectRow['data']['c01']+"' and c02='"+selectRow['data']['c02']+"' and c03='"+selectRow['data']['c03']+"'"
													},
													dataType: "JSON",
													async: true,
													success: function(result){
														//回退
													}
											});										
									}else{
										layer.msg('没有需要更新的数据!',{time:3000,icon:5});
										
									}
							}
					}					
			}else{
					layer.msg(strFalse,{time:3000,icon:5});
			}
					
            return false;
        });
				
        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });		
        //监听表格单选框选择
        table.on('radio(currentTableFilter)', function (obj) {
			selectRowObj=obj;
        });			
    })
</script>
</body>
</html>