使用Angularjs
优点:
构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
![](http://dl.iteye.com/upload/attachment/0083/7308/04e4cb3a-48d6-3cbe-9029-577c76bcb6ea.jpg)
![](http://dl.iteye.com/upload/attachment/0083/7310/5fc1529e-8b04-39a4-bc99-2ab1c91c8e92.jpg)
![](http://dl.iteye.com/upload/attachment/0083/7312/ed823146-bf30-334a-9677-062662cbeeab.jpg)
![](http://dl.iteye.com/upload/attachment/0083/7314/69974773-4120-3eea-a9b9-299f1f160add.jpg)
![](http://dl.iteye.com/upload/attachment/0083/7316/22ca1380-4df3-3748-89e8-9e199e2d9c84.jpg)
var AppController = function($scope) { /** 显示列表 **/ $scope.AppList = []; $scope.getAppPageList = function(page, size, noDigest) { DAO.getAppPageList(function(service){ $scope.AppList = service.appList; $scope.$digest(); // 刷新显示数据 }, {page: page, size: size}); }; $scope.AddAppPanelShow = false; // 显示弹出框 $scope.getAppPageList(1, 12, 'digest'); // 初始化显示列表 /** 显示添加页面 **/ $scope.showAppPanel = function() { $scope.AddAppModel = {}; $scope.AddAppPanelShow = true; }; /** 添加App **/ $scope.addAppAction = function() { var strArr = []; for(var key in $scope.AddAppModel) strArr.push(key + ' : "' + $scope.AddAppModel[key] + '"'); $scope.AddAppPanelShow = false; // alert(strArr.join(',')); }; /** 显示修改App **/ $scope.updateApp = function(app) { $scope.AddAppModel = app; $scope.AddAppPanelShow = true; }; } /** DAO 数据请求 **/ var DAO = { getAppPageList : function(cb, condition) { Util.getJsonP('appServlect/getAppPageList.js?callback=funCall', cb, null, condition); } }; var Util = { /** 获取http数据请求 **/ getHttpData : function(url, cb, errorcb, data, type) { $.ajax({ url : url, type : type, data : data, timeout:30000, success : function(redata, s) { cb.call(this, redata); }, error : function() { alert('请求失败!'); if(errorcb != null) errorcb.call(this); } }); }, /** jsonp **/ getJsonP : function(url, cb, errorcb, params) { funCall = cb; $.jsonp({ url : url}); } }; var funCall = function() {};