添加删除全选反选删除排序

来源：互联网发布：java 静态泛型编辑：程序博客网时间：2024/05/16 08:46

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
</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="sel" ng-init="sel=orders[0]" ng-change="change()">

</select><br />
<span>用户列表</span><br />
<table border="1" cellspacing="1" cellpadding="1" class="table-striped table-hover">
<tr style="background: #999999;">
<td><input type="checkbox" ng-click="quan()" /></td>
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<tbody>
<tr ng-repeat="p in persons">
<td><input type="checkbox" class="myCb" /></td>
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.pin}}</td>
<td>{{p.zw}}</td>
<td><a href="#" ng-click="dele($index)">删除</button>

</td>

</tr>
</tbody>
</table>
<button ng-click="select()">查询 </button><button ng-click="add()">添加用户</button><button ng-click="piliang()">批量删除</button>
<fieldset>
<legend>用户信息展示</legend>
<table border="1" cellspacing="1" cellpadding="1" ng-show="show">

<tr>
<td>姓名</td>
<td><input type="text" ng-model="name" id="name1" /></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" ng-model="age" id="age1" /></td>
</tr>
<tr>
<td>拼音</td>
<td><input type="text" ng-model="pin" /></td>
</tr>
<tr>
<td>职位</td>
<td><input type="text" ng-model="zw" /></td>
</tr>
<tr>
<td colspan="2"><button ng-click="push()">添加</button></td>
</tr>
</table>

</fieldset>

<script type="text/javascript">

var m = angular.module("myApp", []);
m.controller("myCtrl", function($scope) {
$scope.persons = [{
"name": "张三",
"age": 20,
"pin": "zhangsan",
"zw": "总经理"
}, {
"name": "李四",
"age": 25,
"pin": "lisi",
"zw": "副经理"
}, {
"name": "王五",
"age": 22,
"pin": "wangwu",
"zw": "工程师"
}];
var newPerson = [];
$scope.select = function() {
var name = $("#name").val();
if (name == "") {
alert("姓名不能为空")
return;
}
if (name.indexOf("枪") != -1) {
alert("有敏感词");
return;
}

for (var i = 0; i < $scope.persons.length; i++) {
var r = $scope.persons[i];
if (r.name == name) {
newPerson.push(r);
}
}
if (newPerson.length == 0) {
alert("没有匹配项");
return;
}
$scope.persons = newPerson;
};
//排序
$scope.orders = ["按年龄正序", "按年龄倒序"];
$scope.change = function() {
var pai = $("#paixu").val();
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 = false;
$scope.add = function() {
$scope.show = true;
}
$scope.push = function() {
var age1 = $("#age1").val();
var b = isNaN(age1);
if (b == true) {
alert("年龄格式不正确");
}
$scope.persons.push({name:$scope.name,age:$scope.age});

}
//删除
$scope.dele=function(index){
if(confirm("确定要删除吗?")){

$scope.persons.splice(index,1);
}
}
//批量
$scope.piliang=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

添加删除 全选 反选 删除 排序

添加删除全选反选删除排序