angularjs表格增强版增删改查排序敏感字和敏感字替换#（商品）
来源：互联网 发布：怎样在淘宝网购物 编辑：程序博客网 时间：2024/05/19 02:25
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .even_cls { background-color: #fff; } .odd_cls { background-color: #999; } table { border-collapse: collapse; } td, th { width: 200px; border: 1px solid gainsboro; text-align: center; padding: 20px; } button { width: 100px; height: 40px; background: orange; color: white; border: 0px; border-radius: 5px; } .search { background: ghostwhite; border: 1px solid gainsboro; border-radius: 5px; width: 1450px; height: 50px; line-height: 50px; margin-bottom: 10px; } .search input { width: 200px; height: 30px; color: #999; border-radius: 5px; margin-left: 20px; border: 1px solid gainsboro; } .search button { float: right; margin-top: 5px; margin-right: 10px; background: red; } .active { color: red; } </style> <script src="angular.js"></script> <script> var falg=false; var data = [{"id": 1234, "name": 'ipad', "price": 3400, "count": 10}, {"id": 1244, "name": 'aphone', "price": 6400, "count": 100}, {"id": 1334, "name": 'mypad', "price": 4400, "count": 20}, {"id": 8234, "name": 'zpad', "price": 8400, "count": 130}, ]; var myapp = angular.module("myapp", []); myapp.controller("myCtrl", function ($scope) { $scope.ycxiugai=false; $scope.yctianjia=false; $scope.chaxun=function(){ if($scope.search=="习近平"){ alert("敏感字") } } /**排污*/ $scope.px1=function(){ alert($scope.paixu); if($scope.paixu==2){ falg=true; }else{ falg=false; } data.sort(function(a,b){ if(falg){ return a.count< b.count?1:-1; }else{ return a.count>b.count?1:-1; } }); } $scope.tianjia=function(){ $scope.yctianjia=true; } $scope.xiugai=function(index){ var jihe=$scope.data[index]; $scope.x_id=jihe.id, $scope.x_name="", $scope.x_price="", $scope.x_count="", $scope.ycxiugai=true; $scope.index=index; } $scope.data = data; //设置页面默认显示 data.sort(function(a,b){ if(falg){ return a.count< b.count?1:-1; }else{ return a.count>b.count?1:-1; } }); $scope.show = true; //设置checkbox默认不选中 $scope.chk = false; $scope.xuanz = false; $scope.check = function (val) { /*判断是否选中，然后控制下方的是否选中*/ if (val) { $scope.xuanz = true; } else { $scope.xuanz = false; } } $scope.search; /*删除按钮*/ $scope.remove = function (index) { /*判断是否确认删除*/ var b = confirm("确认删除"); if (b) { $scope.data.splice(index, 1); } } $scope.del = function () { /*判断是否确认删除*/ if ($scope.xuanz || $scope.checkD) { var b = confirm("确认删除"); if (b) { //删除所有商品信息 if ($scope.chk) { $scope.data.splice(0, $scope.data.length); //让商品信息管理页面为空白界面 $scope.show = false; } else { for (var i = $scope.xuan1.length - 1; i >= 0; i--) { console.log($scope.xuan1[i]); for (var j = 0; j < $scope.data.length; j++) { console.log($scope.data[j].id == $scope.xuan1[i]); if ($scope.data[j].id == $scope.xuan1[i]) { $scope.data.splice(j, 1); } } } } } } else { alert("先进行选中要删除的商品信息"); } } $scope.checkD=false; $scope.xuan1=[]; $scope.xuan=function(xuan1,id){ console.log(id); $scope.checkD=xuan1; if(xuan1){ $scope.xuan1.push(id); } } /**删除全部*/ $scope.shanchu=function(){ var b = confirm("确认删除"); if(b){ $scope.data.splice(0, $scope.data.length); //让商品信息管理页面为空白界面 $scope.show = false; } } /**添加*/ $scope.tianjiaan=function(){ if ($scope.t_id == undefined || $scope.t_id == "") { alert("id不能为空！"); return; } if ($scope.t_name == undefined || $scope.t_name == "") { alert("name不能为空！"); return; } if ($scope.t_price == undefined || $scope.t_price == "") { alert("price不能为空！"); return; } if ($scope.t_count == undefined || $scope.t_count == "") { alert("count不能为空！"); return; } if (!/^\d+$/.test($scope.t_id)) { alert("id必须是整数！"); return; } if (!/^\d+$/.test($scope.t_price)) { alert("价格必须是整数！"); return; } if (!/^\d+$/.test($scope.t_count)) { alert("数量必须是整数！"); return; } $scope.t_name=$scope.t_name.replace(/习近平/g,"###"); $scope.data.push({ id:$scope.t_id, name:$scope.t_name, price:$scope.t_price, count:$scope.t_count }); alert($scope.t_name) data.sort(function(a,b){ if(falg){ return a.count< b.count?1:-1; }else{ return a.count>b.count?1:-1; } }); $scope.t_id="", $scope.t_name="", $scope.t_price="", $scope.t_count="" $scope.yctianjia=false; } /**排序*/ $scope.px=function(){ if($scope.paixu==2){ falg=true; }else{ falg=false; } data.sort(function(a,b){ if(falg){ return a.count> b.count?1:-1; }else{ return a.count<b.count?1:-1; } }); } $scope.xiugaian=function(){ if ($scope.x_id == undefined || $scope.x_id == "") { alert("id不能为空！"); return; } if ($scope.x_name == undefined || $scope.x_name == "") { alert("name不能为空！"); return; } if ($scope.x_price == undefined || $scope.x_price == "") { alert("price不能为空！"); return; } if ($scope.x_count == undefined || $scope.x_count == "") { alert("count不能为空！"); return; } if (!/^\d+$/.test($scope.x_id)) { alert("id必须是整数！"); return; } if (!/^\d+$/.test($scope.x_price)) { alert("价格必须是整数！"); return; } if (!/^\d+$/.test($scope.x_count)) { alert("数量必须是整数！"); return; } $scope.x_name=$scope.x_name.replace(/习近平/g,"###"); $scope.ycxiugai=false; $scope.data[$scope.index].name=$scope.x_name; $scope.data[$scope.index].price=$scope.x_price; $scope.data[$scope.index].count=$scope.x_count; data.sort(function(a,b){ if(falg){ return a.count< b.count?1:-1; }else{ return a.count>b.count?1:-1; } }); } $scope.checkD = false; $scope.xuan1 = []; $scope.xuan = function (xuanl, id) { console.log(id); $scope.checkD = xuanl; if (xuanl) { $scope.xuan1.push(id); } } //判断的功能,默认是名字排序 }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><div class="search"> <input type="text" placeholder="输入关键字…" ng-model="search" ng-change="chaxun()"> <span style="color: red">敏感字：习近平</span> <select ng-model="paixu" ng-change="px1()"> <option value="">库存正序</option> <option value="2">库存倒序</option> </select> <button ng-click="del()">批量删除</button> <button ng-click="tianjia()">添加</button> <button ng-click="shanchu()">删除全部</button></div><!--用来遍历对象并渲染到页面中--><table ng-show="show"> <thead> <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th> <th ng-click="sort1('id')" ng-class="{active:active=='id'}">商品编号</th> <th ng-click="sort1('name')" ng-class="{active:active=='name'}">商品名称</th> <th ng-click="sort1('price')" ng-class="{active:active=='price'}">商品价格</th> <th ng-click="sort1('count')" ng-class="{active:active=='count'}">商品库存</th> <th>数据删除</th> <th>数据修改</th> </thead> <tbody> <!--实现模糊查询--> <tr ng-repeat="item in data| filter:search" ng-class="{even_cls: !$even, odd_cls: !$odd}"> <td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td> <td>{{item.id}}</td> <td> {{item.name}}</td> <!--商品价格前面加“￥”--> <td>{{item.price | currency:"￥"}}</td> <td>{{item.count}}</td> <td> <button ng-click="remove($index)">删除</button> </td> <td> <button ng-click="xiugai($index)">修改</button> </td> </tr> </tbody></table><div ng-show="ycxiugai"> <p>修改商品</p> <p>商品编号：<input type="text" ng-model="x_id"/></p> <p>商品名称：<input type="text" ng-model="x_name"/></p> <p>商品价格：<input type="text" ng-model="x_price"/></p> <p>商品库存：<input type="text" ng-model="x_count"/></p> <p> <button ng-click="xiugaian($index)">修改</button> </p></div><div ng-show="yctianjia"> <p>添加商品</p> <p>商品编号：<input type="text" ng-model="t_id"/></p> <p>商品名称：<input type="text" ng-model="t_name" id="tian_name"/></p> <p>商品价格：<input type="text" ng-model="t_price"/></p> <p>商品库存：<input type="text" ng-model="t_count"/></p> <p> <button ng-click="tianjiaan($index)">添加</button> </p></div></body></html>阅读全文
0 0
- angularjs表格增强版增删改查排序敏感字和敏感字替换#（商品）
- 表单 增删改查+敏感字
- angularjs的表格的增删改查（关于商品）
- 表格增、查、排序 敏感字、颜色 完美
- AngularJS+查询+敏感字+排序+添加
- AngularJS+查询+敏感字+排序+添加
- 商品增删改查排序
- （angularjs+jQuery）商品表（增删改查）+表单判断+各种排序方式
- angularjs商品列表(增删改查)
- 完整三国增删改查，条件查询条件排序，敏感字符“习近平“
- angularjs-增删改查+排序
- AngularJS表格的增删改查和其他操作
- 表格 增删改查排序
- angularjs表格的增删改查
- angularJS表格的增删改查
- angularjs 表格的增删改查
- angularjs表格表单增删改查
- AngularJS操作表格的增删改查
- 马云：要是哭有用我每天哭
- Java工程师为何如此火爆？
- Math
- 访问网络的Json和图片
- 仿微信和QQ多图合并框架实现
- angularjs表格增强版增删改查排序敏感字和敏感字替换#（商品）
- Java字母加数字组合比较大小
- 底部栏加Fragment
- 快速排序
- Git提交代码到远程仓库
- effective C++ 学习笔记——4 设计与声明
- JS函数传递字符串（字符串转义）
- 字节流解析Json
- ViewPager和小圆点联动
