apex页面
<apex:page extensions="MemberExtension" standardController="Member__c">
<!-- 1.引入angular js 的包 --> <apex:includeScript value="{!$Resource.angularjs}" /><!-- 当只有一个jar包时这样导入 --> <apex:includeScript value="{!URLFOR($Resource.jqueryjs,'jquery.js')}" /> <apex:includeScript value="{!URLFOR($Resource.jqueryjs,'jquery-ui.min.js')}" /> <apex:stylesheet value="{!URLFOR($Resource.jqueryjs,'jquery-ui.min.css')}" /> <!-- <apex:includeScript value="{!URLFOR($Resource.datatable,'datatables.js')}" /> <apex:stylesheet value="{!URLFOR($Resource.datatable,'datatables.css')}" /> --><style>
.tr td:hover { background-color: #F5F5F5; }table.dataintable {
margin-top:15px; border-collapse:collapse; border:1px solid #aaa; width:100%; }table.dataintable th {
/*vertical-align:baseline;*/ font-weight:300; font-size:14px; padding:5px 15px 5px 6px; background-color:skyblue; border:1px solid skyblue; text-align:center; color:#fff; }table.dataintable td {
/*vertical-align:text-top;*/ padding:6px 15px 6px 6px; border:1px solid #aaa; text-align:center; }table.dataintable tr {
background-color:#fff; } .showBorder { border:0px !important; } input{ text-align: center; } </style> <!-- 2.声明angular js管理的模块 --> <div ng-app="myApp" ng-controller="myController" ng-init="getPage1()" class="ng-cloak"> <apex:sectionHeader title="会员" subtitle="管理会员"> <apex:pageBlock > <!-- <h2>管理会员：</h2><br/> --> <p> 搜索：<input type="text" placeholder="请输入关键字" ng-model="test"/> <!-- <input type="button" ng-click="add()" value="添加" /> --> <input type="button" ng-click="addRow()" value="添加"/> </p> <table id="tb" class="dataintable" > <thead> <tr> <th><b>操作</b></th> <th><b>登录用户名</b></th> <th><b>电子邮箱</b></th> <th><b>联系电话</b></th> </tr> </thead> <tbody> <tr ng-repeat="x in members | filter:test" class="tr" ng-show="!x.isShowRow"> <input type="hidden" value="{ {x.Id}}" /> <td align="center" valign="middle"> <div ng-show="!x.isNew"> <input type="button" ng-click="update($index)" value="修改|保存" /> <input type="button" ng-click="del($index,x.Id)" value="删除" /> <input type="button" ng-show="!x.IsDisable__c" ng-click="restore($index,x.Id)" value="取消" /> </div> <div ng-show="x.isNew"> <input type="button" value="保存" ng-click="newSaveMember($index)" /> <input type="button" value="重置" ng-click="newResetMember($index)" /> <input type="button" value="取消" ng-click="newCacelMember($index)" /> </div> </td> <td> <div class="requiredBlock"></div> <input type="text" ng-readonly="x.IsDisable__c" ng-model="x.Username__c" ng-class="{'showBorder':x.IsDisable__c}" /> </td> <td > <input align="center" type="text" ng-readonly="x.IsDisable__c" ng-model="x.Email__c" ng-class="{'showBorder':x.IsDisable__c}" /> </td> <td > <input align="center" type="text" ng-readonly="x.IsDisable__c" ng-model="x.Phone__c" ng-class="{'showBorder':x.IsDisable__c}" /> </td> </tr> </tbody> </table> <center> <div> <label>共</label><span ng-bind="page.pnum"></span><label>条记录 分</label><span ng-bind="page.totalPage"></span><label>页 当前第</label><span ng-bind="page.pno"></span><label>页</label> <input type="button" ng-click="goPage2()" ng-disabled="page.pno == 1" value="首页" /> <input type="button" ng-click="goPage3()" ng-disabled="page.pno == 1" value="上一页" /> <input type="button" ng-click="goPage4()" ng-disabled="page.pno == page.totalPage" value="下一页" /> <input type="button" ng-click="goPage5()" ng-disabled="page.pno == page.totalPage" value="末页" /> <input type="text" style="width:20px" ng-model="jumpNum"/> <input type="button" ng-click="jump()" value="跳转"/> </div> </center></apex:pageBlock>
</apex:sectionHeader> <!-- 分页 --> <div id="changePages" name="changepages"></div> </div> <!-- 3.初始化angular js//在页面加载的同时初始化 --> <script> var myApp = angular.module("myApp",[]); myApp.controller("myController",function($scope){ $scope.members = {!memberListJson}; $scope.memData = {"Username__c":null,"Email__c":null,"Phone__c":null}; var str = JSON.stringify($scope.members); $scope.jumpNum = null;//跳转的页码 $scope.page = {"pno":1,"psize":5,"totalPage":null,"pnum":null};//设置分页的默认参数，pno:当前页，psize:显示的条数,totalPage:总页数，pnum:总条数/*
点击跳转按钮时，判断页码是否符合要求及跳转 */ $scope.jump = function () { var totalPage = $scope.page.totalPage; var jumpNum = $scope.jumpNum; alert(jumpNum); if(jumpNum < 1 || jumpNum > totalPage){ alert("你输入的页码有误,请重新输入！"); $scope.jumpNum = null; }else{ $scope.page.pno = jumpNum; } } /* 添加会员时取消 */ $scope.newCacelMember = function(index){ $scope.members.splice(index,1); }/*
添加会员时重置 */ $scope.newResetMember = function(index){ var memberData = {"Username__c":null,"Email__c":null,"Phone__c":null,"IsDisable__c":false,"isNew":true}; $scope.members[index] = memberData; }/*
添加会员时保存 */ $scope.newSaveMember = function(index){ var memData1 = $scope.members[index]; memData1.IsDisable__c = true; var memDataJson = JSON.stringify(memData1);//转换为json格式的字符串 MemberExtension.addMember(memDataJson,function(results,event){ if(results != null){ $scope.$apply(function(){ $scope.members[index] = results; $scope.members[index].isNew = false; }); alert("添加成功！") }else{ alert("添加失败！"); } }); }/*
表格点击添加后，表格添加一行 */ $scope.addRow = function () { var memberData = {"Username__c":null,"Email__c":null,"Phone__c":null,"IsDisable__c":false,"isNew":true};//大括号里面是用逗号连接，不是用分号 $scope.members.push(memberData); }/*
表格点击修改后取消 */ $scope.restore = function (index,mId) { if(index >= 0){ if($scope.members[index].IsDisable__c == false){ $scope.members[index].IsDisable__c = !$scope.members[index].IsDisable__c; MemberExtension.restoreMember(mId,function(results,event){ $scope.$apply(function(){ $scope.members[index] = results; }); }); }}
} /* 表格的更新 */ $scope.update = function (index) { if(index >= 0){ $scope.members[index].IsDisable__c = !$scope.members[index].IsDisable__c; if($scope.members[index].IsDisable__c == true){ var memData = JSON.stringify($scope.members[index]);MemberExtension.updateMember(memData,function(results,event){
if(results == "Success"){ alert("更新成功"); }else{ alert("更新失败"); } }); } }}
/*
表格的删除 */ $scope.del = function (index,mId) { console.log('index:'+index); if(index >= 0){ if(confirm("是否删除")){ //利用异步的形式访问后台 MemberExtension.deleteMember(mId,function(results,event){ //利用回调函数来接收后台的值 console.log("results:"+results); if(results == "Success"){ //立即执行渲染页面的渲染 $scope.$apply(function(){ $scope.members.splice(index,1);//第一个参数从哪个索引开始删除，第二个删除多少行数据 }); alert("删除成功！") // console.log('$scope.members: ' + $scope.members); }else{ alert("删除失败！"); } }); } } }/*
保存数据到后台 */ $scope.saveMember = function (memData) { memData.IsDisable__c = true; var memDataJson = JSON.stringify(memData);//转换为json格式的字符串 MemberExtension.addMember(memDataJson,function(results,event){ if(results != null){ $scope.$apply(function(){ $scope.members.push(results); $scope.isShow = false; $scope.memData = {"Username__c":null,"Email__c":null,"Phone__c":null}; }); alert("添加成功！") }else{ alert("添加失败！"); } }); }/*
分页 */ function goPage1() { var num = $scope.members.length;//记录总数 $scope.page.pnum = num; var pageSize = $scope.page.psize;//一页显示pageSize条记录 var currentPage = $scope.page.pno;//当前页 //计算总页数 if(num / pageSize > parseInt(num / pageSize)){ $scope.page.totalPage = parseInt(num / pageSize) + 1; } else { $scope.page.totalPage = parseInt(num / pageSize); }//获取当前页第一条、最后一条记录的行号
var startRow = (currentPage - 1) * pageSize; var endRow = currentPage * pageSize -1; endRow = (endRow > num) ? num : endRow; //修改table中当前页对应的行的属性为显示，非本页的记录为隐藏 for(var i = 0;i < num; i++){ if( i < startRow || i > endRow){ $scope.members[i].isShowRow = true; }else{ $scope.members[i].isShowRow = false; } } }$scope.$watch('page.pno', function(){
goPage1(); });//首页
$scope.goPage2 = function() { $scope.page.pno = 1; }//上一页
$scope.goPage3 = function() { $scope.page.pno = $scope.page.pno - 1; }//下一页
$scope.goPage4 = function() { $scope.page.pno = parseInt($scope.page.pno) + 1; }//末页
$scope.goPage5 = function() { $scope.page.pno = $scope.page.totalPage; } }); </script></apex:page>
apex类
Global with sharing class MemberExtension {
public Boolean isNew{get;set;} public String memberListJson{get;set;} public String jsonData{get;set;}public MemberExtension(ApexPages.StandardController con) {
isNew = false; List<Member__c> memberList = [SELECT Id,Username__c,Email__c,Phone__c,IsDisable__c FROM Member__c]; System.debug(LoggingLevel.INFO, '*** 会员列表: ' + memberList); memberListJson = JSON.serialize(memberList); }//在后台需要采用远程调用的方法
@RemoteAction //删除会员 Global static String deleteMember(String mId) {//前后台传值都是使用String System.debug(LoggingLevel.INFO, '***会员id : ' + mId); Member__c m = [SELECT Id,Name FROM Member__c WHERE Id =: mId]; delete m; return 'Success'; }@RemoteAction
//添加会员 Global static Member__c addMember(String memDataJson){ System.debug(LoggingLevel.INFO, '*** memDataJson: ' + memDataJson); Member__c m = (Member__c)JSON.deserialize(memDataJson, Member__c.class);//是根据名称来反序列化的，如果不一样，会没有值 System.debug(LoggingLevel.INFO, '*** m: ' + m); insert m; return m; }@RemoteAction
//更新会员 Global static String updateMember(String memberData){ System.debug(LoggingLevel.INFO, '*** memberData: ' + memberData); Member__c mem = (Member__c)JSON.deserialize(memberData, Member__c.class); System.debug(LoggingLevel.INFO, '*** : mem' + mem); update mem; return 'Success'; }@RemoteAction
//取消编辑会员 Global static Member__c restoreMember(String mId){ System.debug(LoggingLevel.INFO, '*** mId: ' + mId); Member__c m = [SELECT Id,Name,Username__c,Email__c,Phone__c,IsDisable__c FROM Member__c WHERE Id =: mId]; System.debug(LoggingLevel.INFO, '*** m: ' + m); return m; }}页面图
