angularjs表格ng-table使用备忘录
项目中用到angularjs的表格ng-table,功能相当强大,像搜索、排序、checkbox、分页、每页表格显示数目等都有。API,demo什么的也只能参考官网了。这里做个备忘,哪天肯定还会用到。
HTML:
<!DOCTYPEhtml> <html> <metacharset="utf-8"/> <head> <scriptdata-require="angular.js@*"data-semver="1.2.0-rc3-nonmin"src="angular.js"></script> <scriptdata-require="ng-table@*"data-semver="0.3.0"src="ngTable.js"></script> <linkdata-require="ng-table@*"data-semver="0.3.0"rel="stylesheet"href="http://bazalt-cms.com/assets/ng-table/0.3.2/ng-table.css"/> <linkdata-require="bootstrap-css@*"data-semver="3.0.0"rel="stylesheet"href="bootstrap.min.css"/> <linkrel="stylesheet"href="style.css"/> <scriptsrc="script.js"></script> </head> <bodyng-app="main"ng-controller="DemoCtrl"> <p><strong>Page:</strong>{{tableParams.page()}} <p><strong>Countperpage:</strong>{{tableParams.count()}} <p>Filter:<inputclass="form-control"type="text"ng-model="filter.$"/></p> <tableng-table="tableParams"show-filter="true"class="table"> <trng-repeat="userin$data"ng-class="{'emphasis':user.money>500}"> <tdwidth="30"style="text-align:left"header="'ng-table/headers/checkbox.html'"> <inputtype="checkbox"ng-model="checkboxes.items[user.organizationId]"/> </td> <tddata-title="'编号'"sortable="'organizationId'"> {{user.organizationId}} </td> <tddata-title="'名称'"sortable="'name'"> {{user.name}} </td> </tr> </table> <scripttype="text/ng-template"id="ng-table/headers/checkbox.html"> <inputtype="checkbox"ng-model="checkboxes.checked"id="select_all"name="filter-checkbox"value=""/> </script> </body> </html>
js:
varapp=angular.module('main',['ngTable']). controller('DemoCtrl',function($scope,ngTableParams,NameService){ vardata=NameService.data; $scope.tableParams=newngTableParams( { page:1,//showfirstpage count:10,//countperpage sorting:{name:'asc'} }, { total:0,//lengthofdata getData:function($defer,params){ NameService.getData($defer,params,$scope.filter); } }); $scope.$watch("filter.$",function(){ $scope.tableParams.reload(); }); }); app.service("NameService",function($http,$filter){ functionfilterData(data,filter){ return$filter('filter')(data,filter); } functionorderData(data,params){ returnparams.sorting()?$filter('orderBy')(data,params.orderBy()):filteredData; } functionsliceData(data,params){ returndata.slice((params.page()-1)*params.count(),params.page()*params.count()) } functiontransformData(data,filter,params){ returnsliceData(orderData(filterData(data,filter),params),params); } varservice={ cachedData:[], getData:function($defer,params,filter){ if(service.cachedData.length>0){ console.log("usingcacheddata") varfilteredData=filterData(service.cachedData,filter); vartransformedData=sliceData(orderData(filteredData,params),params); params.total(filteredData.length) $defer.resolve(transformedData); } else{ console.log("fetchingdata") $http.get("data.json").success(function(resp) { angular.copy(resp,service.cachedData) params.total(resp.length) varfilteredData=$filter('filter')(resp,filter); vartransformedData=transformData(resp,filter,params) $defer.resolve(transformedData); }); } } }; returnservice; });
json数据:
[{ "hidden":1, "launchImage":"2015_4_9_12_bb7e0a446ed74ae7ad0a3554a54183bc_1298477763", "name":"张三", "orgId":1498031949070997504, "organizationId":"1498031949070997504" },{ "hidden":1, "launchImage":"http://7s1rmc.com1.z0.glb.clouddn.com/2015_4_9_12_0ab5b02cf1df4ac49a7376b820816307_2127491219|39e202124ac90ec531009b0edbbbe0ba", "name":"李四", "orgId":1498046360909250560, "organizationId":"1498046360909250560" }]
以上就是本文的全部内容,希望对大家的学习有所帮助。