dwz框架在网站群项目中的应用(4)—页面结构、数据交互篇

当我们学会了应用框架的规则使用各种控件和组件以后，如何用他们组织成一个区块进而组成一个页面并与后台交互呢？

本文将以“内容管理”页面为例介绍如何用框架的规则组织一个个区块和页面，并利用框架定义的Ajax将内容提交给后台进行交互。

<div class="pageHeader" style="height: 50px;">
    <form rel="pagerForm" onsubmit="return navTabSearch(this);" method="post">
    <div class="searchBar">
        //表单查询条件代码
    </div>
    </form>
</div>
<div class="pageContent">
    <div class="panelBar">
        //菜单栏
    </div>
    <table class="table" width="100%" layouth="138">
　　　　//内容显示区块
    </table>
<div class="panelBar">
　　　　//分页组件
    <div class="pages">

　　　　<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
       </select>
    </div>
    <div class="pagination" targettype="navTab" totalcount="<%=totalCount %>" numperpage="<%=numPerPage %>"
        pagenumshown="<%=numPerPage %>" currentpage="<%=pageNum %>">
    </div>
</div>
</div> 

上面代码是整个页面的一个架构，可以看到它是由几个不同功能的区块组成。

表单查询区块：此区块的功能是按条件查询数据，区块将查询条件以框架定义好的Ajax提交给后台带到反馈后将查询的数据显示在内容显示区块。Ajax 表单提交后自动调用默认回调函数, 操作成功或失败提示：

<form rel="pagerForm" onsubmit="return navTabSearch(this);" method="post"></form>

将查询条件放到form里面将整个form里面的数据提交到后台即可。

属性拓展

onsubmit:根据页面的形式调用已经定义好的回调方法。如果表单在navTab页面上使用navTabAjaxDone，表单在dialog页面上使用dialogAjaxDone，Ajax 表单提交后如果需要做一些其它处理也可以自定义一个回调函数xxxAjaxDone。

method：定义数据的提交方式为post

菜单栏区块：菜单栏区块只需要简单的与其他区别分离开来，所以只是用一个panel面板框起来即可。panel面板适用于所有只需简单与其他区块分离开来的区块。

内容展示区块：此区块是一个展示数据内容的区块，使用一个表格并应用table规则即可。

分页区块：此区块用来分页，具体的分页原来可以参见前一篇文章的介绍，此处需要注意的是当我们切换每页的显示数目时页面与后台的交互

　<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"></select>

此处用了一个onchange事件，应用已经定义的页码数目切换规则将当前显示数目调教到后台并更新页面。

 

 服务器端相应提示信息

DWZ框架默认的ajax表单提交都是返回json数据，告诉客户端操作是否成功，成功或失败提示信息，以及成功后的处理方式（刷新某个navTab或关闭某个navTab或navTab页面跳转）。

示例

this.ReturnResultAsAjaxDone(true, "文章置顶成功", "content", url, false);

在后台写完逻辑之后添加此方法，可以提示用户操作反馈信息。

json格式：

{

"statusCode":"200",

"message":"操作成功",

"navTabId":"",

"rel":"",

"callbackType":"closeCurrent",

"forwardUrl":""

}

 此方法为一个重载方法，参数可以根据不同的场景而确定。