DWZ实践——Dialog到NavTab的跳转

2019独角兽企业重金招聘Python工程师标准>>>

1.场景

在左侧菜单栏中点击某一链接，弹出对话框，对话框中需要用户选择某一信息(select)，点击下一步，关闭对话框，然后跳转到一个navtab。

2.版本

1.4.3

3.解决方案

1)对话框如何跳转到navtab？

对话框跳转到navTab，一开始我一直纠结在<button>如何跳转到navTab,后来仔细一想，DWZ只有对超链接(<a href......>)进行扩展，所以我们需要用超链接来实现，当然DWZ已经为超链接定义了按钮样式：

<a class="button" href="" target="navTab" rel="测试"><span>下一步</span></a>

2)跳转时如何取得select中选择的值然后再跳转？

跳转时要携带select中已经选择的值，我最先想到的是通过js来实现，比如：

<a class="button" href="javascript:void(0)"  onClick="show()"></a>

测试后发现，这样会打乱DWZ的默认行为，我们不能添加onclick事件，跳转路径必须在href中。于是我选用DWZ原生的方式操作，首先添加一个隐藏域，当select发生变化时，给隐藏域设值，隐藏域需要包含rel属性：

<input type="hidden" id="sys_hidden" rel="sys_hidden"/>

然后我们在超链接中直接取值即可：

<a class="button" href="jw/saveSysCourse?sys={sys_hidden}"

3)如何在跳转后关闭dialog？

跳转后关闭此dialog，如果是传统的使用dialog很好办，只需要在返回的json数据中设置下关闭属性即可。但是现在我需要做跳转，没有json数据。这个时候我首先想到超链接的callback属性，但是细细读文档发现callback是ajax的回调函数，这里不是异步的。我只好在新的NavTab中添加关闭dialog的js：

$.pdialog.close("select_xi");

关闭dialog的方法在DWZ的文档里有详细说明，select_xi是dialog的id。

转载于:https://my.oschina.net/xishuixixia/blog/117977