前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示。数据展示一般包含三部分: 数据列头 数据行 分页统计信息,分页导航 技术依赖项:基于angularjs ...
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示。数据展示一般包含三部分:
技术依赖项:基于angularjs的MVVM模式,后台是spring mvc。
第三方组件的特点就是功能多,但有些看起来很高级的功能我们基本上都不用,比如在线表格数据的编辑,嵌套表格等。我们必须的功能只有这些:排序,数据展示,分页,如果能支持angular model更新更好。所以我决定结合html table,angularjs来完成上面的需求。 数据加载:
由于我们的数据动态查询方案的存在,决定了大部分页面前后台交互的模式是相同的,所以采用angular service来提供一个listService供列表页使用。主要是分页大小的选择框,以及定义了一些可配置的参数,比如执行查询的请求地址,由于我们的动态查询以表单提交,所以是将整个表单参数序列化之后再加上分页相关信息然后提交到后端查询。
angular.module('app.service', ['app.constant']) .service('$listService', function () { var $scopeLocal = {}; var pageSizeList = [{ "text": "10", "value": "10" }, { "text": "20", "value": "20" }]; var defaultOptions = { beforeSend: function () { }, callback: function ($scope, data) { }, error: function () { }, pageSize: pageSizeList[0].value, searchFormId: "searchForm", }; this.init = function ($scope, option) { var options = $.extend({}, defaultOptions, option); $scopeLocal = $scope; $scopeLocal.pageSizeList = pageSizeList; $scopeLocal.pageRequest = { "pageNum": 1, "pageSize": options.pageSize }; $scopeLocal.pageRequest.getResponse = function (orderBy) { var requestData = $("#" + options.searchFormId + "").serialize(); var url = options.listUrl + "?" + requestData + "&pageNum=" + $scopeLocal.pageRequest.pageNum + "&pageSize=" + $scopeLocal.pageRequest.pageSize; if(angular.isDefined($scopeLocal.pageRequest.orderBy)&&$scopeLocal.pageRequest.orderBy!=""){ url+="&orderBy="+$scopeLocal.pageRequest.orderBy; } $.ajax({ type: "POST", url: url, dataType: 'json', async: false, beforeSend: options.beforeSend, error: options.error, success: function (data) { $scopeLocal.pageResponse = data; $scopeLocal.content = data.list; options.callback($scopeLocal, data); } }); }; this.get = function () { $scopeLocal.pageRequest.getResponse(); }; }; })
html中只需要在列头指定排序字段即可实现排序功能:sort-name,值是需要排序的字段:
<th class="col-md-1" sort-name ="id">编号</th><th class="col-md-4" sort-name ="name">名称</th>
数据行数据的model更新 以避免通过二次请求或者刷新页面来重新加载数据。比如行数据中有状态一栏,操作列会根据状态值动态显示启用或者停用按钮,当用户点击启用按钮操作成功后,当前数据行的状态栏数据需要动态更新,且不需要请求后台也不需要刷新页面,我们可以非常容易的通用ng-bind来让其自动更新: 操作列绑定事件:
<td> <a href="javascript:void(0)" data-toggle="modal" ng-click="edit(item.id)" data-original-title="编辑"> <span class="label label-primary">编辑</span> </a> <a href="javascript:void(0)" ng-show="item.status=='0'" ng-click="enabled(item)"> <span class="label label-primary">启用</span> </a> <a href="javascript:void(0)" ng-show="item.status=='1'" ng-click="enabled(item)"> <span class="label label-primary">禁用</span> </a> </td>
原标题:通过angularjs的directive以及service来实现的列表页加载排序分页
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。