（salesforce相关）AngularJs实现表格的增删改查

最新推荐文章于 2021-02-25 11:29:29 发布

weixin_33691700

最新推荐文章于 2021-02-25 11:29:29 发布

阅读量105

点赞数

原文链接：http://www.cnblogs.com/LJUY/p/8350436.html

版权

apex页面

<apex:page extensions="MemberExtension" standardController="Member__c">

<apex:includeScript value="{!$Resource.angularjs}" />
<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')}" />

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>

<div ng-app="myApp" ng-controller="myController" ng-init="getPage1()" class="ng-cloak">
<apex:sectionHeader title="会员" subtitle="管理会员">
<apex:pageBlock >

<p>
搜索：<input type="text" placeholder="请输入关键字" ng-model="test"/>

<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>

<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;
}
}

页面图

转载于:https://www.cnblogs.com/LJUY/p/8350436.html

weixin_33691700

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（salesforce相关）AngularJs实现表格的增删改查

apex页面<apex:page extensions="MemberExtension" standardController="Member__c">  <apex:includeScript value="{!$Resource.angularjs}" /><!-- 当只有一个jar包时这样导入...
复制链接

扫一扫