项目中用到了smartwizard,对用户的入网配置进行了分步操作
这个插件给的范例中除了提供上一步下一步之外, 还可以添加其他的按钮
我这边额外添加了两个按钮,分别是提交和关闭
点击提交按钮时,异步向后台提交数据,步骤配置代码如下:
$(‘#smartwizard‘).smartWizard({ selected: 0, theme: ‘dots‘, cycleStep: false, transitionEffect:‘fade‘, keyNavigation: false, showStepURLhash: false, toolbarSettings: {toolbarPosition: ‘bottom‘, toolbarExtraButtons: [btnFinish, btnCancel] }, lang : { next: ‘下一步‘, previous: ‘上一步‘ } });
btnFinish和btnCancel分别对应的就是上述的[提交]和[关闭] 按钮, 按钮对应的方法如下:
var btnFinish = $(‘<input type="button" id="btnFinish"></input>‘).addClass(‘btn btn-info‘).on(‘click‘, function(){ var mask; $.ajax({ type: "POST", url: ‘/xxx‘, data: {corpId: "123"}, dataType: ‘json‘, async: false, cache: false, beforeSend: function() { mask = layer.load(0, { shade: [0.7, ‘#393D49‘] }, { shadeClose: true }); //0代表加载的风格,支持0-2 }, success: function(data) { var jsonData = eval(data); if (jsonData.code == ‘10000‘) { layer.alert(‘配置成功‘, { icon: 1 }); $(‘#reportTable‘).bootstrapTable(‘refresh‘); } else { layer.alert(jsonData.msg, { icon: 2 }); } layer.close(configLayer); layer.close(mask); }, error: function(data) { alert("error"); $(‘#reportTable‘).bootstrapTable(‘refresh‘); } }) });
碰到的问题:
1. 点击提交按钮和关闭按钮后, 界面被刷新
根据https://bbs.csdn.net/topics/391852021中4楼的回答
将上面代码标红的地方修改为如下代码,问题虽好了,但是我明明有给设置value值呀.. 咋button就没名字了:最终显示效果是button有了,但是button中没有值了..
<input type="button" id="btnFinish" value="提交"></input>
解决办法是:在初始化smartWizard控件后给这两个button赋值(手动笑脸??)
我这边的分步操作的界面是放在模态框中的,当模态框打开成功后我就给两个button的value赋值
$(‘#btnFinish‘).val("提交"); $(‘#btnCancel‘).val("关闭");
原文地址:https://www.cnblogs.com/hans-z/p/10465813.html
时间: 2024-10-13 01:24:40