版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40646143/article/details/87886023
实现的效果为
anglurJs的Controller改动如下
//判断字符是否为空的方法
function isEmpty(obj){
if(typeof obj == "undefined" || obj == null || obj == ""){
return true;
}else{
return false;
}
}
//判断字符长度是否为1
function strlen(str){
var len = 0;
for (var i=0; i<str.length; i++) {
var c = str.charCodeAt(i);
//单字节加1
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
len++;
}
else {
len+=2;
}
}
return len;
}
ng.controller('myController', function($scope,$controller, $http,brandService) {
//继承baseController
$controller('baseController',{$scope:$scope})
//定义保存数据的对象
$scope.branch = {};
//查询品牌列表
$scope.findAll = function() {
brandService.findAll().success(function(response) {
//响应返回结果集
$scope.list = response;
});
}
//分页
/* $scope.findPage = function(page, size) {
$http.get('../branch/findPage.do?page=' + page + '&size=' + size)
.success(function(response) {
$scope.list = response.date;//显示当前页数据
$scope.pageResultConf.totalItems = response.total;//显示总数据条数
});
} */
// process the form
$scope.processForm = function() {
if(isEmpty($scope.branch.name)){
$scope.errorName='品牌名称为空';
}else{
$scope.errorName='';
if(isEmpty($scope.branch.firstChar)){
$scope.errorSuperhero='品牌首字母为空';
}else{
$scope.errorSuperhero='';
if(strlen($scope.branch.firstChar) >1){
$scope.errorSuperhero='品牌的首字母错误,请重新输入';
}else{
$scope.errorSuperhero='';
//新增/修改
brandService.save($scope.branch).success(
function(response) {
if (response.success) {
//新增成功 刷新分页数据
$scope.loadList();
//关闭当前窗口
$('#editModal').modal("hide");
} else {
alert(response.message);
}
});
}
}
}
};
$scope.changeBrand=function(id){
brandService.changeBrand(id).success(
function(response){
$scope.branch=response;
}
)
}
//定义用于存放删除id的数组
$scope.selectIds=[];
//删除数组的元素
$scope.deleteBranch=function(){
if($scope.selectIds == false){
alert("请勾选你要删除的品牌");
}else{
if(confirm("你真的要删除"+$scope.selectIds+"品牌?")){
brandService.deleteBranch($scope.selectIds).success(
function(response){
if(!response.success){
//刷新分页数据
$scope.loadList();
//把数组设为空
$scope.selectIds=[];
}else{
alert(response.message)
}
}
)
}
}
}
//定义搜索对象
$scope.searchEmtity={};
//根据条件查询
$scope.search=function(page,size){
brandService.search(page,size,$scope.searchEmtity).success(
function(response){
$scope.list = response.date;//显示当前页数据
$scope.pageResultConf.totalItems = response.total;//显示总数据条数
}
)
}
});
页面的body为
<!-- /.box-body -->
<form ng-submit="processForm()" novalidate class="form-horizontal">
<!-- 编辑窗口 -->
<div class="modal fade"
id="editModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3 id="myModalLabel">品牌编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td><span style="color: red">*</span>品牌名称</td>
<td><input
class="form-control"
name="name"
placeholder="品牌名称"
error-message
ng-model="branch.name"
required>
<span style="color: red;" class="help-block" ng-show="errorName">{{ errorName }}</span>
</td>
</tr>
<tr>
<td><span style="color: red">*</span>首字母</td>
<td><input class="form-control"
name="firstChar"
error-message
placeholder="首字母"
ng-model="branch.firstChar"
required>
<span style="color: red;" class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-flash"></span> 保存
</button>
<button class="btn btn-default" data-dismiss="modal"
aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</form>