全选批量删除 添加 查询
来源:互联网 发布:知乎日报 搜索 编辑:程序博客网 时间:2024/06/05 13:08
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 导入外部js、css --> <script src="js/jquery-3.2.1.min.js"type="text/javascript"charset="utf-8"></script> <script src="js/angular.min.js"type="text/javascript"charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <style type="text/css"> fieldset { padding: .35em .625em .75em; margin: 0 2px; border: 1px solid silver } legend { padding: .5em; border: 0; width: auto } </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> 姓名查询条件:<input type="text" id="name" /> <select id="paixu" ng-options="x for x in orders" ng-model="selected" ng-init="selected=orders[0]" ng-change="change()"> </select> <br> 用户列表 <br> <table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped table-hover"> <tr style="background: #999999;"> <td><inputtype="checkbox"id="quan"ng-click="quan()" /></td> <td>姓名</td> <td>年龄</td> <td>拼音</td> <td>职位</td> <td>操作</td> </tr> <tr ng-repeat="person in persons"> <td><inputtype="checkbox"class="myCb" /></td> <td>{{person.name}}</td> <td>{{person.age}}</td> <td>{{person.pinyin}}</td> <td>{{person.zhiwei}}</td> <td><ahref="#"ng-click="dele($index)">删除</a></td> </tr> </table> <input type="button" id="piliang" value="批量删除" ng-click="deleAll()" /> <input type="button" id="cha" value="查询" ng-click="cha()" /> <input type="button" id="add" value="添加用户" ng-click="show()" /> <form id="f"> <fieldset id=""> <legend>添加用户信息</legend> 姓名:<input type="text" name="name1" id="name1" /><br> 年龄: <input type="text" name="age" id="age" /><br> 拼音: <input type="text" name="pinyin" id="pinyin" /><br> 职位: <input type="text" name="zhiwei" id="zhiwei" /><br> <input type="button" value="保存" ng-click="save()" /> </fieldset> </form> <!-- 逻辑代码 --> <script type="text/javascript"> //默认下面添加页面隐藏 $("#f").hide(); var m = angular.module("myApp", []); m.controller("myCtrl", function($scope) { //初始化数据 $scope.persons = [{ "name": "张三", "age": 20, "pinyin": "zhangsan", "zhiwei": "总经理" }, { "name": "李四", "age": 25, "pinyin": "lisi", "zhiwei": "副经理" }, { "name": "王五", "age": 22, "pinyin": "wangwu", "zhiwei": "工程师" }]; //----------查询----------- $scope.cha = function() { //取值 var name = $("#name").val(); // alert(name) //判断 if (name == "") { alert("请输入姓名"); return; } //敏感词 if (name.indexOf("奥") != -1) { alert("有敏感词"); return; } var newPersons = []; //是否含有 for (var i = 0; i < $scope.persons.length; i++) { var p = $scope.persons[i]; if (p.name == name) { newPersons.push(p); } } //之后判断新的数组是否是为空 if (newPersons.length == 0) { alert("没有匹配项"); return; } $scope.persons = newPersons; } //---------查询结束------- //初始化下拉 $scope.orders = ["按年龄正序排列", "按年龄倒序排列"]; //change事件 $scope.change = function() { var pai = $("#paixu").val(); alert("dd" + pai) if (pai == "string:按年龄正序排列") { $scope.persons.sort(function(a, b) { if (a.age > b.age) { return 1; } else if (a.age < b.age) { return -1; } return 0; }); } else { $scope.persons.sort(function(a, b) { if (a.age > b.age) { return -1; } else if (a.age < b.age) { return 1; } return 0; }); } } //显示动画 $scope.show = function() { $("#f").show(1000); } //save $scope.save = function() { //验证年龄 var age = $("#age").val(); var b = isNaN(age); if (b == true) { //如果不是一个数字就是 true alert("年龄格式不正确") return } //添加 var name12 = $("#name1").val(); var age = $("#age").val(); var pinyin = $("#pinyin").val(); var zhiwei = $("#zhiwei").val(); var pe = { "name": name12, "age": age, "pinyin": pinyin, "zhiwei": zhiwei }; //创建person对象 $scope.persons.push(pe); //消失 $("#f").hide(); } //删除 $scope.dele = function($index) { var c = confirm("是否确认删除?"); if (c == true) { $scope.persons.splice($index, 1); } } //批量删除 $scope.deleAll = function() { var b = confirm("是否确认删除?"); if (b == true) { //获取选中的复选框 var cbs = $("input[type=checkbox][class=myCb]:checked"); //遍历,删除复选框所在行 for (var i = 0; i < cbs.length; i++) { //取出每个复选框 var cb = cbs[i]; //删除所在行 var tr = cb.parentNode.parentNode; tr.remove(); } } } var flag = false; $scope.quan = function() { var cbs = $("input[type=checkbox]"); if (flag == false) { for (var i = 0; i < cbs.length; i++) { var cb = cbs[i]; cb.checked = true; } flag = true; } else { for (var i = 0; i < cbs.length; i++) { var cb = cbs[i]; cb.checked = false; } flag = false; } } }) </script> </body> </html>
阅读全文
0 0
- 全选批量删除 添加 查询
- 删除 添加 全选 批量删除
- qisan__lianxi2查询排序全选删除批量删除
- AngularJS 查询、全选、反选、全部删除、批量删除、添加、修改
- 添加,删除,全选,批量,的数据
- AngularJs(全选.全不选.批量删除.添加)
- jQuery实现添加,批量删除,全选
- Mybatis批量查询,批量添加,批量删除
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- GridView批量删除 GridView添加主键 全选记录 确认删除
- 用户表的添加/删除/全选/反选/批量删除
- jQuery添加删除,全选反选,批量删除
- jQuery(删除,添加,批量删除,全选,全不选)案例
- AngularJS查询.排序.表头排序.全选.删除.批量删除
- 增加+删除+批量删除+修改+查询+排序+全选
- 路由添加、修改、批量&全部删除&全选反选
- angular 输入添加,全选,批量删除表格数据
- AngularJs实现添加,批量删除,全选,反选等功能
- VS2013 c++调用python程序
- angularjs实现模糊查询添加程序
- c语言作业(二)
- 面向对象银行管理系统JAVA代码
- 做机械臂导航时遇到的问题2:solidworks用sw_urdf插件生成urdf文件包后,需要修改的部分
- 全选批量删除 添加 查询
- 机器学习&&深度学习
- 【ORA】ORA-4031错误分析和解决办法
- su、sudo、sudo su、sudo -i的用法和区别
- Java基础
- 集群cluster篇-----2.HAProxy服务器 、 Keepalived热备 、 Keepalived+LVS
- OpenAI_gym的官网案例
- js自定义格式化日期
- 百度新歌榜+mvp+简单购物车