变脸式应用 / 分页列表框架(三)
2017-02-16 16:19
134 查看
显示多个列表
本节学习导航栏加多个列表这一常见模式。[任务]
在示例应用时,订单列表页便按照订单状态,分成“待服务”和“已完成”两栏,分别对应一个列表。
我们将练习页面orders2也改造成支持分栏的样式。
首先,我们熟悉下后端列表查询的接口。
筋斗云后端接口支持业务查询协议,可以使用cond参数才指定查询条件:
取待服务订单:callSvr(“Ordr.query”, {cond: “status=’CR’”});
取已完成/已取消订单:callSvr(“Ordr.query”, {cond: “status=’RE’ or status=’CA’”});
我们现在使用的是在
mockdata.js中定义的模拟接口,已经模拟了上面两个调用。
我们在页面中增加导航栏及列表:(page/orders2.html)
<div mui-initfn="initPageOrders2" mui-script="orders2.js"> <div class="hd"> ... <div class="mui-navbar"> <a href="javascript:;" mui-linkto="#lst1">待服务</a> <a href="javascript:;" mui-linkto="#lst2">已完成</a> </div> </div> <div class="bd"> <div id="lst1" class="weui_cells weui_cells_access"></div> <div id="lst2" class="weui_cells weui_cells_access"></div> </div> ... </div>
框架提供导航栏组件,以CSS类”mui-navbar”标识,通过属性”mui-linkto”分别指向本页中的两个列表,点击时可自动切换。
我们把导航栏放在hd中,让整个bd作为列表容器。这是一种很方便的做法,如果把导航栏放在bd中,还要一个div作为列表容器,且要计算它的合适高度。
初始化列表做些修改,指定新的navRef, listRef,用onGetQueryParam来指定查询条件:(page/orders2.js)
var listItf = initPageList(jpage, { ... navRef: ".mui-navbar", listRef: "#lst1,#lst2", onGetQueryParam: function (jlst, queryParam) { queryParam.ac = "Ordr.query"; var id = jlst.attr("id"); if (id == "lst1") { queryParam.cond = "status='CR')"; } else if (id == "lst2") { queryParam.cond = "status='RE' OR status='CA'"; } }, ... });
相关文章推荐
- 变脸式应用 / 分页列表框架(四)
- 变脸式应用 / 分页列表框架(二)
- 变脸式应用 / 分页列表框架
- 基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
- ThinkPHP 3.1 框架--分页搜索的应用
- 一个web应用的诞生(11)--列表分页
- 简单的SSM框架应用的分页技术
- (转)基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- 《Java高手真经_应用框架卷_Java_Web核心框架》所用软件、使用版本、下载地址列表:
- 利用VUE框架,实现列表分页功能
- 基于MVC+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
- 幸福框架:待实现的基础应用列表
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- mybatis 框架 的应用之二(批量添加、实现分页查询)
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- 用户列表基本页面搭建(框架流程、分页)
- tp框架之分页与第三方类的应用
- SSM框架 用ajax实现模糊查询分页和列表
- 基于Metronic的Bootstrap开发框架经验总结 --列表分页处理和插件JSTree的使用
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用