1.场景
很多时候需要用到把一个表单拆分成几步来提交的业务场景，比如我的上个项目，某航空公司的酒店地面服务管理系统。这个系统里面在录入酒店信息的时候需要录入一大堆属性，光酒店的属性就有50多个@.@，偏偏甲方的电脑分辨率很小，这时候就需要这么个东西，把已有的50多个属性分散到7步，每次只看到其中一步，把其他隐藏。当7步填写完以后一起提交。
2.算法
1.点击事件触发初始化一个dialog对话框，这个对话框有上一步和下一步两个按钮；
2.当前如果是第一步,隐藏上一步按钮;
3.如果当前是最后一步，下一步文字变为完成；
4.如果是最后一步，应触发提交事件：提交成功，关闭窗口并提示提交成功,提交失败应保持窗口并弹窗提交失败；
5.总步数的计算：在用户需要把表单内容使用
6.变量及方法总览
step:当前是第几步【全局变量】
total:总步数【全局变量】
$form:表单对象【全局变量】
$dialog:对话框对象【全局变量】
//初始化提交方法
function submitForm(){}
//初始化表单
$.fn.initDialog = function (formId,submitFn){
//formId：form表单的Id;
//submitFn:自定义表单提交的ajax逻辑,请提供返回值，成功返回true,失败返回false
//此时的$this选中的是外面的对话框
};
//上一步 点击事件
function prev(){}
//下一步 点击事件
function next(){}
//将下一个div.formItem填入对话框内，如果当前不是最后一步，则该方法需要被调用
function loadFormItem(){}
//重新渲染步骤按钮，每次点击后都需要重新渲染
function renderStepButton(step){
//step：当前是第几步
}
3.完整代码
/*
* @author yzh 20190626 23:11
* 伪分步提交
* 表单扔到dialog里，每次只显示一个formItem
* 需要放到一起显示的内容都用一个<div class="formItem"></div>包装起来
*/
let step = 0, total = 0;
let $form = null;
let $dialog = null;
//初始的提交方法
function submitForm (){
alert("未传入提交方法");
}
//初始化对话框，只显示第一个form,其它隐藏
$.fn.initDialog = function (formId,submitFn){
if(typeof submitFn == "function"){
submitForm = submitFn;
}
//初始化成第0步
step = 0;
//计算总步数
total = $form.find(".formItem").length;
$form = $("#"+formId);
if ($form === null){
console.log("initStepDialog 第1个参数出错,找不到该表单");
return ;
}
$dialog = $(this);
//隐藏所有div.formItem
$form.find(".formItem").hide();
//显示第一步
$form.find(".formItem").eq(0).show();
//把form装载到dialog
$form.appendTo($dialog).show();
//渲染按钮
renderStepButton(step);
};
//上一步 点击事件
function prev(){
if(step === 0){
return ;
}
if (step > 0) {
$form.find(".formItem").eq(step).hide();
step--;
$form.find(".formItem").eq(step).show();
}
if(step < 0 ){
step = 0;
}
loadFormItem();
}
//下一步 点击事件
function next(){
if (step === total) {
return ;
}
$form.find(".formItem").eq(step).hide();
step++;
$form.find(".formItem").eq(step).show();
loadFormItem();
}
//将下一个表单填入对话框内，如果已经完成最后一步，则关闭对话框
function loadFormItem(){
if(step <= total-1 ){
renderStepButton(step);
}else{
new Promise((resolve)=>{
resolve(submitForm());
}).then((value)=>{
if (value == undefined){
alert("我们需要你的提交方法里有返回值,成功请返回true,失败请返回false!");
}else if (value){
$dialog.dialog('close');
}else{
$form.find(".formItem").each(function(i,item){
$(item).hide();
});
step -- ;
$form.find(".formItem").eq(step).show();
}
})
}
}
//重新渲染步骤按钮
function renderStepButton(step){
if(step === 0){
$("#prev").hide();
$("#next").show().text("下一步");
$.parser.parse( $("#prev"));
$.parser.parse( $("#next"));
return ;
}
if(step === total-1) {
$("#prev").show();
$("#next").show().text("完成");
$.parser.parse( $("#prev"));
$.parser.parse( $("#next"));
return;
}
$("#prev").show().text("上一步");
$("#next").show().text("下一步");
$.parser.parse( $("#prev"));
$.parser.parse( $("#next"));
}
4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Complex Toolbar on Dialog - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<div style="width: 100%;height: 100%;" >
<div id="aaa" class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'表单分步骤提交',modal:true,closed:true,
buttons:[{
text:'上一步',
id:'prev',
handler:function(){
prev();
}
},{
text:'下一步',
id:'next',
handler:function(){
next();
}
}]">
<div data-options="fit:true" id="content"></div>
</div>
</div>
<div style="display: none;" id="hiddenForm">
<!--把每一步需要显示的内容用<div class="formItem"></div>包起来 -->
<div class="formItem">
姓名:<input name="name">
</div>
<div class="formItem">
密码：<input name="password">
</div>
<div class="formItem">
手机号：<input name="cellphone">
</div>
<div class="formItem">
邮箱：<input name="email">
</div>
</div>
<script type="text/javascript" src="step2.js?"></script>
<a href="javascript:void(0)" id="open" class="easyui-linkbutton">Open</a>
<a href="javascript:void(0)" id="close" class="easyui-linkbutton" >Close</a>
<script type="text/javascript">
function mySubmit(){
/*
* 这里ajax提交需要一个返回值,提交成功:true 提交失败:false
*
*/
$.ajax({
url:"aaaa",//示例中的url会提交失败并返回false，此时窗口不会关闭；请改成你自己的url
data:{"a":1},
type:'POST',
success:function(){
console.log("true");
return true;
},
error:function(){
console.log("false");
return false;
}
});
}
//打开对话框的点击事件
$("#open").click(function(){
$("#aaa").initDialog("hiddenForm",mySubmit);
$('#aaa').dialog('open');
});
//关闭对话框的点击事件
$("#close").click(function(){
$('#aaa').dialog('close');
});
//开始初始化对话框
$("#aaa").initDialog("hiddenForm",mySubmit);
</script>
</body>
</html>
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
