Skip to content
This repository was archived by the owner on Dec 3, 2025. It is now read-only.

Commit 35dbee7

Browse files
laiweilaiwei
committed
Merge pull request #14 from skyeydemon/dev
checkbox均支持shift多选
2 parents 2a10b08 + 9373993 commit 35dbee7

File tree

6 files changed

+265
-10
lines changed

6 files changed

+265
-10
lines changed

‎rrd/static/js/angular-multi-check.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
* angular-multi-check
3+
* http://schlogen.github.io/angular-multi-check/
4+
5+
* Version: 1.0 - 2014-24-11
6+
* License: Apache
7+
*/
8+
angular.module('angular-multi-check', [])
9+
.directive('multiCheckGroup', function() {
10+
return {
11+
scope: {},
12+
controller: function($scope) {
13+
this.getElements = function() {
14+
var dataMultiCheck = Array.prototype.slice.call($scope.element[0].querySelectorAll('[data-multi-check]'), 0);
15+
var multiCheck = Array.prototype.slice.call($scope.element[0].querySelectorAll('[multi-check]'), 0);
16+
17+
return multiCheck.concat(dataMultiCheck);
18+
};
19+
this.lastChecked = null;
20+
},
21+
link: function(scope, element) {
22+
scope.element = element;
23+
}
24+
};
25+
})
26+
.directive('multiCheck', function() {
27+
return {
28+
require: ['^ngModel', '^multiCheckGroup'],
29+
restrict: 'A',
30+
link: function(scope, el, attrs, controllers) {
31+
var groupCtrl = controllers[1];
32+
33+
el.bind('click', function(event) {
34+
var last = groupCtrl.lastChecked;
35+
if (last && event.shiftKey) {
36+
var chkboxes = groupCtrl.getElements(),
37+
start = chkboxes.indexOf(event.target),
38+
end = chkboxes.indexOf(last),
39+
checked = last.checked;
40+
41+
angular.forEach(chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1), function(box) {
42+
var model = angular.element(box).data('$ngModelController');
43+
model.$setViewValue(checked);
44+
model.$render();
45+
});
46+
}
47+
groupCtrl.lastChecked = event.target;
48+
});
49+
50+
}
51+
};
52+
});

‎rrd/static/js/big_ng.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
angular.module('app', ['app.util'])
2+
angular.module('app', ['app.util','angular-multi-check'])
33
.config(function($interpolateProvider) {
44
$interpolateProvider.startSymbol('[[');
55
$interpolateProvider.endSymbol(']]');

‎rrd/static/js/jquery.shiftcheckbox.js‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/* ShiftCheckbox jQuery plugin
2+
*
3+
* Copyright (C) 2011-2012 James Nylen
4+
*
5+
* Released under MIT license
6+
* For details see:
7+
* https://github.com/nylen/shiftcheckbox
8+
*
9+
* Requires jQuery v1.7 or higher.
10+
*/
11+
12+
(function($) {
13+
var ns = '.shiftcheckbox';
14+
15+
$.fn.shiftcheckbox = function(opts) {
16+
opts = $.extend({
17+
checkboxSelector : null,
18+
selectAll : null,
19+
onChange : null,
20+
ignoreClick : null
21+
}, opts);
22+
23+
if (typeof opts.onChange != 'function') {
24+
opts.onChange = function(checked) { };
25+
}
26+
27+
$.fn.scb_changeChecked = function(opts, checked) {
28+
this.prop('checked', checked);
29+
opts.onChange.call(this, checked);
30+
return this;
31+
}
32+
33+
var $containers,
34+
$checkboxes,
35+
$containersSelectAll,
36+
$checkboxesSelectAll,
37+
$otherSelectAll,
38+
$containersAll,
39+
$checkboxesAll;
40+
41+
if (opts.selectAll) {
42+
// We need to set up a "select all" control
43+
$containersSelectAll = $(opts.selectAll);
44+
if ($containersSelectAll && !$containersSelectAll.length) {
45+
$containersSelectAll = false;
46+
}
47+
}
48+
49+
if ($containersSelectAll) {
50+
$checkboxesSelectAll = $containersSelectAll
51+
.filter(':checkbox')
52+
.add($containersSelectAll.find(':checkbox'));
53+
54+
$containersSelectAll = $containersSelectAll.not(':checkbox');
55+
$otherSelectAll = $containersSelectAll.filter(function() {
56+
return !$(this).find($checkboxesSelectAll).length;
57+
});
58+
$containersSelectAll = $containersSelectAll.filter(function() {
59+
return !!$(this).find($checkboxesSelectAll).length;
60+
}).each(function() {
61+
$(this).data('childCheckbox', $(this).find($checkboxesSelectAll)[0]);
62+
});
63+
}
64+
65+
if (opts.checkboxSelector) {
66+
67+
// checkboxSelector means that the elements we need to attach handlers to
68+
// ($containers) are not actually checkboxes but contain them instead
69+
70+
$containersAll = this.filter(function() {
71+
return !!$(this).find(opts.checkboxSelector).filter(':checkbox').length;
72+
}).each(function() {
73+
$(this).data('childCheckbox', $(this).find(opts.checkboxSelector).filter(':checkbox')[0]);
74+
}).add($containersSelectAll);
75+
76+
$checkboxesAll = $containersAll.map(function() {
77+
return $(this).data('childCheckbox');
78+
});
79+
80+
} else {
81+
82+
$checkboxesAll = this.filter(':checkbox');
83+
84+
}
85+
86+
if ($checkboxesSelectAll && !$checkboxesSelectAll.length) {
87+
$checkboxesSelectAll = false;
88+
} else {
89+
$checkboxesAll = $checkboxesAll.add($checkboxesSelectAll);
90+
}
91+
92+
if ($otherSelectAll && !$otherSelectAll.length) {
93+
$otherSelectAll = false;
94+
}
95+
96+
if ($containersAll) {
97+
$containers = $containersAll.not($containersSelectAll);
98+
}
99+
$checkboxes = $checkboxesAll.not($checkboxesSelectAll);
100+
101+
if (!$checkboxes.length) {
102+
return;
103+
}
104+
105+
var lastIndex = -1;
106+
107+
var checkboxClicked = function(e) {
108+
var checked = !!$(this).prop('checked');
109+
110+
var curIndex = $checkboxes.index(this);
111+
if (curIndex < 0) {
112+
if ($checkboxesSelectAll.filter(this).length) {
113+
$checkboxesAll.scb_changeChecked(opts, checked);
114+
}
115+
return;
116+
}
117+
118+
if (e.shiftKey && lastIndex != -1) {
119+
var di = (curIndex > lastIndex ? 1 : -1);
120+
for (var i = lastIndex; i != curIndex; i += di) {
121+
$checkboxes.eq(i).scb_changeChecked(opts, checked);
122+
}
123+
}
124+
125+
if ($checkboxesSelectAll) {
126+
if (checked && !$checkboxes.not(':checked').length) {
127+
$checkboxesSelectAll.scb_changeChecked(opts, true);
128+
} else if (!checked) {
129+
$checkboxesSelectAll.scb_changeChecked(opts, false);
130+
}
131+
}
132+
133+
lastIndex = curIndex;
134+
};
135+
136+
if ($checkboxesSelectAll) {
137+
$checkboxesSelectAll
138+
.prop('checked', !$checkboxes.not(':checked').length)
139+
.filter(function() {
140+
return !$containersAll.find(this).length;
141+
}).on('click' + ns, checkboxClicked);
142+
}
143+
144+
if ($otherSelectAll) {
145+
$otherSelectAll.on('click' + ns, function() {
146+
var checked;
147+
if ($checkboxesSelectAll) {
148+
checked = !!$checkboxesSelectAll.eq(0).prop('checked');
149+
} else {
150+
checked = !!$checkboxes.eq(0).prop('checked');
151+
}
152+
$checkboxesAll.scb_changeChecked(opts, !checked);
153+
});
154+
}
155+
156+
if (opts.checkboxSelector) {
157+
$containersAll.on('click' + ns, function(e) {
158+
if ($(e.target).closest(opts.ignoreClick).length) {
159+
return;
160+
}
161+
var $checkbox = $($(this).data('childCheckbox'));
162+
$checkbox.not(e.target).each(function() {
163+
var checked = !$checkbox.prop('checked');
164+
$(this).scb_changeChecked(opts, checked);
165+
});
166+
167+
$checkbox[0].focus();
168+
checkboxClicked.call($checkbox, e);
169+
170+
// If the user clicked on a label inside the row that points to the
171+
// current row's checkbox, cancel the event.
172+
var $label = $(e.target).closest('label');
173+
var labelFor = $label.attr('for');
174+
if (labelFor && labelFor == $checkbox.attr('id')) {
175+
if ($label.find($checkbox).length) {
176+
// Special case: The label contains the checkbox.
177+
if ($checkbox[0] != e.target) {
178+
return false;
179+
}
180+
} else {
181+
return false;
182+
}
183+
}
184+
}).on('mousedown' + ns, function(e) {
185+
if (e.shiftKey) {
186+
// Prevent selecting text by Shift+click
187+
return false;
188+
}
189+
});
190+
} else {
191+
$checkboxes.on('click' + ns, checkboxClicked);
192+
}
193+
194+
return this;
195+
};
196+
})(jQuery);

‎rrd/static/js/xperf.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ function fn_list_endpoints()
1919
for (var hidx in hosts) {
2020
var h = hosts[hidx];
2121
var line_html = '<tr>'
22-
+ '<td><input type="checkbox" data-fullname="'+ h +'"></input></td>'
22+
+ '<td><input type="checkbox" class="input shiftCheckbox" data-fullname="'+ h +'"></input></td>'
2323
+ '<td>' + h + '</td>'
2424
+ '</tr>';
2525
tbody_hosts.append($(line_html));
26+
tbody_hosts.find('.shiftCheckbox').shiftcheckbox();
2627
}
2728
fn_check_all_hosts();
2829
}).error(function(req, ret, errorThrown){
@@ -65,12 +66,13 @@ function fn_list_counters(){
6566
display_counter_type = "原始值";
6667
}
6768
var line_html = '<tr>'
68-
+ '<td><input type="checkbox" data-fullkey="'+c[0]+'"></input></td>'
69+
+ '<td><input type="checkbox" class="input shiftCheckbox" data-fullkey="'+c[0]+'"></input></td>'
6970
+ '<td><a href="javascript:void(0);" onclick="fn_show_chart(\'' + c[0] + '\')" >' + c[0] + '</a></td>'
7071
+ '<td>'+ display_counter_type +'</td>'
7172
+ '<td>'+ c[2] +'s</td>'
7273
+ '</tr>'
7374
tbody_items.append($(line_html));
75+
tbody_items.find('.shiftCheckbox').shiftcheckbox();
7476
}
7577
}else{
7678
alert("搜索失败：" + ret.msg);

‎rrd/templates/chart/big_ng.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<script src="{{url_for('static', filename='js/underscore.js')}}"></script>
3434
<script src="/static/js/util_ng.js?_v=0.0.4"></script>
3535
<script src="/static/js/big_ng.js?_v=0.0.4"></script>
36+
<script src="/static/js/angular-multi-check.js"></script>
3637
{%endblock%}
3738

3839
{%block body_head%}
@@ -118,9 +119,9 @@
118119
type="search" placeholder="输入字符过滤, 回车刷新..">
119120
</div>
120121
</div>
121-
<ul class="list-unstyled" style="font-family: 'verdana', 'Microsoft YaHei', 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono';">
122+
<ul multi-check-group class="list-unstyled" style="font-family: 'verdana', 'Microsoft YaHei', 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono';">
122123
<li ng-repeat="s in vm.data | filter: { label:vm.query }">
123-
<input id="" type="checkbox" style="margin-right:5px;" ng-model="s.check" value="[[ s.label ]]">[[ s.label ]]
124+
<input id="" type="checkbox" style="margin-right:5px;" multi-check ng-model="s.check" value="[[ s.label ]]">[[ s.label ]]
124125
</li>
125126
</ul>
126127
</div>

‎rrd/templates/index.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,14 @@
66
{% block more_head %}
77
{{super()}}
88

9+
<script src="/static/js/jquery.shiftcheckbox.js" type= "text/javascript" ></script>
910
<script src="/static/js/xperf.js?_v=0.1.0"></script>
1011
<script>
1112

1213
$(function(){
14+
$(document).ready (function() {
15+
$('.shiftCheckbox').shiftcheckbox();
16+
});
1317
$("#check_all_endpoints").bind("click", fn_check_all_hosts);
1418
$("#check_all_counters").bind("click", fn_check_all_items);
1519
$("#endpoint-search").keydown(function(event){
@@ -97,7 +101,7 @@
97101
</form>
98102
<form class="form-inline" role="form">
99103
<div class="form-group">
100-
<button type="button" id="btn-search-endpoints" class="btn btn-default btn-sm" onclick="fn_list_endpoints();return false;">全局搜索</button>
104+
<button type="button" id="btn-search-endpoints" class="btn btn-default btn-sm btn-success" onclick="fn_list_endpoints();return false;">全局搜索</button>
101105
<select class="form-control input-sm" id="endpoint-limit" onchange="fn_list_endpoints();return false;">
102106
<option value="50"> Limit 50</option>
103107
<option value="100">Limit 100</option>
@@ -109,14 +113,14 @@
109113
<form class="form-inline" role="form">
110114
<div class="form-group">
111115
<input id="endpoint-filter" type="text" class="form-control input-sm">
112-
<button class="btn btn-default btn-sm" onclick="filter_endpoint();return false;">快速过滤</button>
116+
<button class="btn btn-default btn-sm btn-info" onclick="filter_endpoint();return false;">快速过滤</button>
113117
</div>
114118
</form>
115119

116120
</div>
117121

118122
<table class="table table-striped">
119-
<thead> <tr>
123+
<thead> <tr> <p class="help-block"><span class="text-warning">支持shift多选</span></p>
120124
<th width="30px" colspan=2><input type="checkbox" id="check_all_endpoints"></th>
121125
<th><button class="btn btn-link btn-xs pull-right" onclick="fn_list_counters();return false;">刷新counter列表</button></th>
122126
</tr></thead>
@@ -151,7 +155,7 @@
151155
</form>
152156

153157
<form class="form-inline" role="form">
154-
<button class="btn btn-default btn-sm" onclick="fn_list_counters();return false;">搜索</button>
158+
<button class="btn btn-default btn-sm btn-success" onclick="fn_list_counters();return false;">搜索</button>
155159
<div class="form-group">
156160
<select class="form-control input-sm" id="counter-limit" onchange="fn_list_counters();return false;">
157161
<option value="50"> Limit 50</option>
@@ -161,7 +165,7 @@
161165
</div>
162166
<div class="form-group">
163167
<input id="counter-filter" type="text" class="form-control input-sm">
164-
<button class="btn btn-default btn-sm" onclick="filter_counter();return false;">快速过滤</button>
168+
<button class="btn btn-default btn-sm btn-info" onclick="filter_counter();return false;">快速过滤</button>
165169
</div>
166170

167171
<div class="dropdown form-group pull-right">

0 commit comments

Comments
 (0)