angularJs实现增删改查示例2-JS文件

最新推荐文章于 2021-07-09 10:34:26 发布
最新推荐文章于 2021-07-09 10:34:26 发布
阅读量2.1k 收藏
点赞数
分类专栏： angularjs 文章标签： angularjs url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/long_life_road/article/details/55657427
版权
var _appConfig={
url:{
insertOrUpdateUrl:"../../../../../salePermission/saveSalePermission",
getDetail:"../../../../../salePermission/querySalePermission",
deleteUrl:"../../../../../salePermission/delSalesPermission",
queryUrl:"../../../../../salePermission/querySalesPermission",
analysisUrl:"../../../../../salePermission/updateSalePermission",
initCreateUrls:"../../../../../salePermission/initCreate",
updateUrls:"../../../../../salePermission/updateSalePermission"
},
name:'单据属性配置'
};


//分页工具条依赖ui.bootstrap模块。 【salesPers必须和html中ng-app=''的值保持一致】
var app = angular.module('salesPers',["ui.bootstrap"]); 
【 salesPersConroller 必须和html中 ng-controller=''的值保持一致 】
app.controller('salesPersConroller',function($scope,$http){

var customer=$scope.customer=_appConfig;

var vm = $scope.vm = {
condition:{},//变化的查询条件
oldCondition:{},//分页使用的查询条件
numPages:0,//总页数
total:0,
itemsPerPage: 10,//每页显示的记录条数
currentPage: 1,//当前页 
showPageButtonSize : 5,//分页栏显示的数字按钮的个数
items:[]//查询结果
};
//分页方法
vm.createPage=function(data){
vm.itemsPerPage=data.limit;
vm.numPages=parseInt(data.total/vm.itemsPerPage);
vm.currentPage=data.curPage;
vm.total=data.total;
vm.showPageButtonSize = (vm.numPages
vm.items = data.rows; //列表数据
};
//列表查询方法
vm.queryConfig= function (params){
if ($("#productId").val() != null && $("#productId").val() != "") {
params.productId = vm.productId;
}
if ($("#productPlanId").val() != null && $("#productPlanId").val() != "") {
params.productPlanId = vm.productPlanId;
}
//列表查询请求
$http.post(customer.url.queryUrl,params).success(function(data, status, headers, config){
if(data.error){
alert(data.message);
return ;
}
vm.productList=data.productList; //下拉初始化数据
vm.productLists=eval_r(data.productLists); //下拉初始化数据
vm.planjson=eval_r(data.planjson); //下拉初始化数据
vm.updateInfo.salesCode=data.saleCode;
vm.createPage(data.result); //列表查询初始化数据（分页）
setTimeout(function(){
   parent.initHeight();
},300);
     })  
};
//列表查询页面初始化方法
vm.initConfig =function(){
//在多窗口操作的页面中，允许父窗口传入参数
var condition=window.dialogArguments;
//调用列表查询方法
vm.queryConfig({"curPage":vm.currentPage,"size":vm.itemsPerPage,"condition":condition});
};
//新增界面初始化方法
vm.initCreate =function(){
var createpar={};
//初始化新增请求
$http.post(customer.url.initCreateUrls,createpar).success(function(data, status, headers, config){
if(data.error){
alert(data.message);
return ;
}
//下拉数据初始化
vm.productLists=eval_r(data.productJson);
vm.planjson=eval_r(data.planJson);
//模糊查询数据初始化
vm.salesManJson=data.salesManJson;
vm.channelCodeJson=data.channelCodeJson;
vm.deptList=data.deptJsons;
  })
.error(function(data, status, headers, config){
      alert("error");
     });
};
//新增、修改界面 标签模糊查询选中后，调用的方法，将例如【0000-全部】这样的数据，截取出0000入库，全部展示给客户看。
vm.οnblur=function(){
var str=$("#authorizedArea").val();
if(str.indexOf("-")>0){
var strs= new Array(); //定义一数组 
strs=str.split("-"); 

dialog.data.authorizedArea=strs[0];
dialog.data.authorizedAreaName=strs[1]; 
 
vm.updateInfo.authorizedArea=strs[0];
vm.updateInfo.authorizedAreaName=strs[1]; 
}  
}; 
//新增、修改界面标签模糊查询选中后，调用的方法，将例如【0000-全部】这样的数据，截取出0000入库，全部展示给客户看。
vm.onblurs=function(){
var str=$("#channelName").val();
if(str.indexOf("-")>0){
var strs= new Array(); //定义一数组 
strs=str.split("-"); 

dialog.data.channelCode=strs[0];
dialog.data.channelCodeName=strs[1]; 

vm.updateInfo.channelCode=strs[0];
vm.updateInfo.channelCodeName=strs[1]; 
}  
}; 
//新增、修改界面标签模糊查询选中后，调用的方法，将例如【0000-全部】这样的数据，截取出0000入库，全部展示给客户看。
vm.onblursForSale=function(){
var str=$("#saleName").val();
if(str.indexOf("-")>0){
var strs= new Array(); //定义一数组 
strs=str.split("-"); 

dialog.data.salesCode=strs[0];
dialog.data.salesName=strs[1]; 

vm.updateInfo.salesCode=strs[0];
vm.updateInfo.salesName=strs[1]; 
}  
}; 
//新增与修改界面 选中产品后根据产品找产品下面的方案（级联下拉）
vm.initPlan=function(){
var planParam={};
if ($("#productId").val()!= null && $("#productId").val()!= "") {
var proId=dialog.data.productId;
if(proId != null && proId != ""){
planParam.productId =dialog.data.productId;
}else{
planParam.productId =vm.updateInfo.productId;
}
}
$http.post(customer.url.initCreateUrls,planParam).success(function(data, status, headers, config){
if(data.error){
alert(data.message);
return ;
}
vm.productLists=eval_r(data.productJson);
vm.planjson=eval_r(data.planJson);
})
.error(function(data, status, headers, config){
alert("error");
});
};


//修改页面初始化
vm.updateInfo = {};
vm.initData =function (){
var url = location.search;  //获取url中"?"符后的字串 
var theRequest = new Object(); 
var id;
var falg;

if (url.indexOf("?") != -1) { 
var str = url.substr(1); 
strs = str.split("&"); 
id=strs[0].split("=")[1];
falg=strs[1].split("=")[1];
if(falg != '1'){
//falg为1是修改，不为1是预览，如果是预览，则要隐藏保存按钮
document.getElementByIdx_x_x_x_x_x("updateInfos").style.display = "none";
document.getElementByIdx_x_x_x_x_x("productId").disabled=true;
document.getElementByIdx_x_x_x_x_x("productPlanId").disabled=true;
document.getElementByIdx_x_x_x_x_x("authorizedArea").disabled=true;
document.getElementByIdx_x_x_x_x_x("saleName").disabled=true;
document.getElementByIdx_x_x_x_x_x("channelName").disabled=true;
}
dialog.item={"id":id};
$http.post(customer.url.getDetail,dialog.item).success(function(data, status, headers, config){
vm.updateInfo = data.info;
vm.productLists = eval_r(data.productJson);
vm.planjson = eval_r(data.planJson);
vm.salesManJson=data.salesManJson;
vm.updateInfo.salesName=data.saleName;
vm.updateInfo.authorizedAreaName=data.authorizedAreaName;
vm.deptList=data.deptJsons;
vm.channelCodeJson=data.channelList;
vm.updateInfo.channelCodeName=data.channelName;
     }).error(function(data, status, headers, config){
      alert("error");
     });
} 
};
//换页按钮
vm.pageChanged= function(){
   var params={"curPage":vm.currentPage,"size":vm.itemsPerPage,"condition":vm.oldCondition};
vm.queryConfig(params); //查询
};
//点击查询按钮
vm.clickQuery= function(){
   var params={"curPage":1,"size":vm.itemsPerPage,"condition":vm.condition};
   vm.oldCondition=angular.copy(vm.condition);
vm.queryConfig(params);
};
//修改界面初始化查询条件【方案】
vm.initPlanForUpdate=function(){
var params2={};
if ($("#productId").val()!= null && $("#productId").val()!= "") {
params2.productId =vm.updateInfo.productId;
}
$http.post(customer.url.initCreateUrls,params2).success(function(data, status, headers, config){
if(data.error){
alert(data.message);
return ;
}
vm.productLists=eval_r(data.productJson);
vm.planjson=eval_r(data.planJson);
})
.error(function(data, status, headers, config){
alert("error");
});
};
//删除方法
vm.deleteConfig= function (){
var id=$('input[name="ids"]:checked').val(); //获取单选框被选中的值
if(id==null || id==""){
alert("请选择数据！");
return;
}
dialog.item.id=id;
       
var confirm = window.confirm("确认删除？"); 
if (!confirm) { 
return;
} 
$http.post(customer.url.deleteUrl,dialog.item).success(function(data, status, headers, config){
if(data.error){
alert(data.message);
return ;
}
//删除选择的
var del=0;

angular.forEach(vm.items, function(item,i) {
if(item.$checked){
vm.items.splice(i-del++,1);
}
});
  }).error(function(data, status, headers, config){
      alert("error");
  });
};
//复选框全选按钮【全部选中】
vm.checkAll = function(checked) {
     angular.forEach(vm.items, function(item) {
         item.$checked = checked;
     });
};
//获取复选框被选中的项
  vm.selection = function() {
   var items=[];
   var index=0;
   angular.forEach(vm.items, function(item,i) {
      if(item.$checked){
      items[index++]=item;
      }
   });
   return items;
   };
   
 
  //修改功能【点击修改按钮跳转至修改界面】
  vm.update=function(obj){
   var id=$('input[name="ids"]:checked').val(); //获取被选中行的id
   if(id==null || id==""){
alert("请选择数据！");
return;
     }
//加载修改页面，带参
    document.location.href=
"/micro-plat/backend/views/micro/pages/salesPermissions/salesPermissions_update.html? id="+id+"&falg="+obj;
   };
 //修改功能【修改页面点击保存按钮后】
  vm.updateInfos = function () {
//
   var salename = $("#saleName").val();
   if(salename ==null || salename == ""){
   vm.updateInfo.salesCode = "";
   }
 
if(vm.updateInfo == null){
alert("BOSTYPE不能为空");
return;
}
if(vm.updateInfo.productId == null || vm.updateInfo.productId ==""){
alert("请选择产品！");
return;
}
if(vm.updateInfo.authorizedArea == "" && vm.updateInfo.salesCode == "" && vm.updateInfo.channelCode == ""){
alert("出单机构、业务员、渠道不能同时为空！");
return;
}
var confirm = window.confirm("确认提交？"); 
if (!confirm) { 
return;
} 
$http.post(customer.url.updateUrls,vm.updateInfo) .success(function(data, status, headers, config){
var params={"curPage":vm.currentPage,"size":vm.itemsPerPage,"condition":vm.oldCondition};
vm.queryConfig(params);
alert("操作成功");
vm.updateInfo = null;
//修改成功，跳转至列表查询界面
document.location.href=
"/micro-plat/backend/views/micro/pages/salesPermissions/salesPermissions.html";
})
.error (function(data, status, headers, config){
alert("操作失败");
});
};

 //对话框
var dialog=$scope.dialog={
show_error : false,
show_type : 2,
title:'新增'+customer.name,
btn:'新增',
item: {}//新增或更新
};
//新增【新增页面，点击保存按钮后】
dialog.data = {};
dialog.insertOrUpdate = function () {
//
  var salename = $("#saleName").val();
  if(salename ==null || salename == ""){
   dialog.data.salesCode = "";
   }
  var channelName = $("#channelName").val();
  if(channelName == null || channelName == ""){
   dialog.data.channelCode = "";
   }
 
   var authorizedArea = $("#authorizedArea").val();
   if(authorizedArea == null || authorizedArea == ""){
   dialog.data.authorizedArea = "";
   }
//非空校验
if(dialog.data == null){
alert("BOSTYPE不能为空");
return;
}
if(dialog.data.productId == null || dialog.data.productId ==""){
alert("请选择产品！");
return;
}
if(dialog.data.authorizedArea == "" && dialog.data.salesCode == "" && dialog.data.channelCode == ""){
alert("出单机构、业务员、渠道不能同时为空！");
return;
}
var confirm = window.confirm("确定提交？"); 
if (!confirm) { 
return;
} 
$http.post(customer.url.insertOrUpdateUrl,dialog.data) .success (function(data, status, headers, config){
var params={"curPage":vm.currentPage,"size":vm.itemsPerPage,"condition":vm.oldCondition};
vm.queryConfig(params);
alert("操作成功");
dialog.data = null;
//新增成功，跳转至列表查询界面
document.location.href=
"/micro-plat/backend/views/micro/pages/salesPermissions/salesPermissions.html";
})
.error(function(data, status, headers, config){
alert("操作失败");
});
};

})



//controller之外的
.directive("maxByte", function ($injector) {
var getBytes=$injector.get("getBytes");
      return {
            restrict: 'A',
            require: "ngModel",
            link: function (scope, element, attr, ctrl) {
                 if (ctrl) {
                       var customValidator = function (value) {
                       var total=attr.maxByte?attr.maxByte:0;
                              var validity = getBytes(value) <= total;
                              ctrl.$setValidity("maxByte", validity);
                              return validity ? value : undefined;
                        };
                        ctrl.$formatters.push(customValidator);
                        ctrl.$parsers.push(customValidator);
                  }
            }
      };
})
.directive("minByte", function ($injector) {
var getBytes=$injector.get("getBytes");
      return {
            restrict: 'A',
            require: "ngModel",
            link: function (scope, element, attr, ctrl) {
                 if (ctrl) {
                       var customValidator = function (value) {
                     var total=attr.minByte?attr.minByte:0;
                              var validity = getBytes(value) >= total;
                              ctrl.$setValidity("minByte", validity);
                              return validity ? value : undefined;
                        };
                        ctrl.$formatters.push(customValidator);
                        ctrl.$parsers.push(customValidator);
                  }
            }
      };
});

Long_life_road
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS实现表格的增删改查（仅限前端）
12-11
用AngularJS实现对表格的增删改查（仅限前端），具体代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/h
laravel数据库——使用on duplicate key update
szuaudi的博客
04-17 3322
laravel数据库——使用on duplicate key updateinsertOrUpdate方法使用方法一条记录多条记录$value参数代码详解 在laravel数据库的查询构造器中，insert方法可以进行批量插入，7 insertOrUpdate方法 在数据库模型Model类中添加如下代码： /** * insert or update a record * ...
laravel的批量插入或更新
孤独的梦1012
08-12 9460
laravel的批量插入或更新 在项目中常常有些需求是需要将大量的数据导入库中，如果库中不存在该条数据插入，存在则更新，典型应用场景：更新报表数据，有这些报表的数据归因时间长达28天，也就是28内的数据都会更新，每天还会产生新的数据，这时就需要对新的数据插入，老数据进行更新。在laravel中有批量插入，批量更新的方法，也有对单条数据的插入或更新方法，却没有对批量数据的插入或更新的方法。 需求...
laravel insert on update upsert插入如果触发唯一索引就更新
阳水平的博客
07-09 2288
在使用laravel插入的时候,有时候会出现重复插入的情况,因此,就想着能不能运行不存在就插入,存在就去更新指定字段的操作,本身laravel是有这么个操作方法的(updateOrInsert),但是一次只能处理一条数据,比较慢,我想的是批量执行. 下面这个包可以让我们执行insertIgnore,insertOnupdate等sql语句,5.8以前的laravel框架都可以用**,5.8以后laravel**就自带这个功能了. composer require staudenmeir/laravel-up
laravel updateOrCreate与updateOrInsert 的区别
我只是个小学生 能力有限 一直抱着学习的态度
10-23 3368
updateOrCreate() 和 updateOrInsert() 两个方法都是用来保存数据的时候方便操作“ 存在即更新，反之则创建 ”的 updateOrCreate 方法使用的是 Eloquent ORM 操作的数据库（支持自动添加创建和更新时间） updateOrInsert 方法使用的是查询构造器（不可以自动添加创建和更新时间） updateOrCreate 返回值是\Illuminate\Database\Eloquent\Model, updateOrInsert 返回的是 bool。可以看
Springboot+hibernate实现简单的增删改查示例
08-27
今天小编就为大家分享一篇Springboot+hibernate实现简单的增删改查示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Java对XML文件增删改查操作示例
08-26
主要介绍了Java对XML文件增删改查操作,结合完整实例形式分析了java针对xml格式数据的常见读写、增删改查等操作技巧,需要的朋友可以参考下
JS实现数组的增删改查操作示例
10-18
主要介绍了JS实现数组的增删改查操作,结合实例形式分析了javascript针对数组的追加、获取、删除、添加、修改等常见操作技巧与相关注意事项,需要的朋友可以参考下
ASP.NET下MVC最简单数据库增删改查示例
07-11
ASP.NET MVC最简单数据库增删改查示例。数据库采用EF连接。 数据源配置： 1、使用DB目录下的BookDB.sql到SQL数据库中生成数据库BookDB 2、打开代码Models\Book.edmx文件，对任一表右键单击，选择从数据库更新模型。
Android连接MySQL数据库并进行增删改查操作示例讲解
08-18
主要介绍了Android 连接MySQL数据库并进行增删改查操作示例讲解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
angularjs 实现增删改查
01-28
angularjs 实现mysql数据库的增删改查demo 后台使用java
angular+bootstrap 列表增删查改
09-22
利用angular+bootstrap 列表最精简增删查改（附加过滤），纯原始html，下载就能用，可嵌入各种架构语言，增删查改按钮提供对应操作的信息，方便开发！！！
angular增删改查
07-23
本项目采用了angular技术实现了简单的品牌列表页面的增删查改
用AngularJS做的静态的增删改查
10-24
用AngularJS做的静态的增删改查，对于初学者很有帮助的！
angularJs实现学生信息的增删改查以及翻页
01-23
angularJs实现学生信息的增删改查以及翻页，界面优美，
angularJS简易增删改查
梵韵
03-30 629
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, u
AngularJs实现增,删,改,查(全)
baipenggui_bo
12-18 3298
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <...
AngularJs增删改查
L59_1的博客
12-18 671
AngularJs的增删改查,排序,全选全不选,批量删除<script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("myApp",[]); app.
laravel on duplicate key update
qiuziqiqi的博客
07-22 1090
在实际应用中，经常碰到导入数据的功能，当导入的数据不存在时则进行添加，有修改时则进行更新， 在刚碰到的时候，第一反应是将其实现分为两块，分别是判断增加，判断更新，后来发现在mysql中有 ON DUPLICATE KEY UPDATE一步就可以完成，感觉实在是太方便了， 该语句是基于唯一索引或主键使用，比如一个字段a被加上了unique index，并且表中已经存在了一条记录值为1， 下面两个语句会有相同的效果： INSERT INTO table (a,b,c) VALUES (...
layui增删改查示例
最新发布
01-12
Layui是一款轻量级的前端UI框架，针对网页的常见交互操作提供了丰富的组件和API。...通过引入Layui的核心文件和样式表，并使用它提供的表格和表单组件，我们可以通过少量的代码实现一个简单的增删改查示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值