p31829507
/
django
mirror of https://github.com/django/django.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed #26561 -- Improved admin's JavaScript SelectBox performance on large lists.

This commit is contained in:
David Sanders 2016-04-29 18:26:09 -07:00 committed by Tim Graham
parent 72ea289ab7
commit fb68674ea4
2 changed files with 62 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
django/contrib/admin/static/admin/js/SelectBox.js
View File

@ -1,4 +1,4 @@
(function() {
(function($) {
'use strict';
var SelectBox = {
cache: {},
@ -7,8 +7,10 @@
var node;
SelectBox.cache[id] = [];
var cache = SelectBox.cache[id];
for (var i = 0, j = box.options.length; i < j; i++) {
node = box.options[i];
var boxOptions = box.options;
var boxOptionsLength = boxOptions.length;
for (var i = 0, j = boxOptionsLength; i < j; i++) {
node = boxOptions[i];
cache.push({value: node.value, text: node.text, displayed: 1});
}
},
@ -16,7 +18,8 @@
// Repopulate HTML select box from cache
var box = document.getElementById(id);
var node;
box.options.length = 0; // clear all options
$(box).empty(); // clear all options
var new_options = box.outerHTML.slice(0, -9); // grab just the opening tag
var cache = SelectBox.cache[id];
for (var i = 0, j = cache.length; i < j; i++) {
node = cache[i];
@ -24,9 +27,11 @@
var new_option = new Option(node.text, node.value, false, false);
// Shows a tooltip when hovering over the option
new_option.setAttribute("title", node.text);
box.options[box.options.length] = new_option;
new_options += new_option.outerHTML;
}
}
new_options += '</select>';
box.outerHTML = new_options;
},
filter: function(id, text) {
// Redisplay the HTML select box, displaying only the choices containing ALL
@ -37,11 +42,13 @@
for (var i = 0, j = cache.length; i < j; i++) {
node = cache[i];
node.displayed = 1;
var node_text = node.text.toLowerCase();
var numTokens = tokens.length;
for (var k = 0; k < numTokens; k++) {
token = tokens[k];
if (node.text.toLowerCase().indexOf(token) === -1) {
if (node_text.indexOf(token) === -1) {
node.displayed = 0;
break; // Once the first token isn't found we're done
}
}
}
@ -57,11 +64,7 @@
break;
}
}
var k = cache.length - 1;
for (i = delete_index; i < k; i++) {
cache[i] = cache[i + 1];
}
cache.length--;
cache.splice(delete_index, 1);
},
add_to_cache: function(id, option) {
SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1});
@ -82,11 +85,13 @@
var from_box = document.getElementById(from);
var option;
var boxOptions = from_box.options;
for (var i = 0, j = boxOptions.length; i < j; i++) {
var boxOptionsLength = boxOptions.length;
for (var i = 0, j = boxOptionsLength; i < j; i++) {
option = boxOptions[i];
if (option.selected && SelectBox.cache_contains(from, option.value)) {
SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1});
SelectBox.delete_from_cache(from, option.value);
var option_value = option.value;
if (option.selected && SelectBox.cache_contains(from, option_value)) {
SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
SelectBox.delete_from_cache(from, option_value);
}
}
SelectBox.redisplay(from);
@ -96,11 +101,13 @@
var from_box = document.getElementById(from);
var option;
var boxOptions = from_box.options;
for (var i = 0, j = boxOptions.length; i < j; i++) {
var boxOptionsLength = boxOptions.length;
for (var i = 0, j = boxOptionsLength; i < j; i++) {
option = boxOptions[i];
if (SelectBox.cache_contains(from, option.value)) {
SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1});
SelectBox.delete_from_cache(from, option.value);
var option_value = option.value;
if (SelectBox.cache_contains(from, option_value)) {
SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
SelectBox.delete_from_cache(from, option_value);
}
}
SelectBox.redisplay(from);
@ -126,10 +133,12 @@
},
select_all: function(id) {
var box = document.getElementById(id);
for (var i = 0; i < box.options.length; i++) {
box.options[i].selected = 'selected';
var boxOptions = box.options;
var boxOptionsLength = boxOptions.length;
for (var i = 0; i < boxOptionsLength; i++) {
boxOptions[i].selected = 'selected';
}
}
};
window.SelectBox = SelectBox;
})();
})(django.jQuery);

39
django/contrib/admin/static/admin/js/SelectFilter2.js
View File

@ -118,10 +118,21 @@ Requires jQuery, core.js, and SelectBox.js.
addEvent(filter_input, 'keypress', function(e) { SelectFilter.filter_key_press(e, field_id); });
addEvent(filter_input, 'keyup', function(e) { SelectFilter.filter_key_up(e, field_id); });
addEvent(filter_input, 'keydown', function(e) { SelectFilter.filter_key_down(e, field_id); });
addEvent(from_box, 'change', function(e) { SelectFilter.refresh_icons(field_id); });
addEvent(to_box, 'change', function(e) { SelectFilter.refresh_icons(field_id); });
addEvent(from_box, 'dblclick', function() { SelectBox.move(field_id + '_from', field_id + '_to'); SelectFilter.refresh_icons(field_id); });
addEvent(to_box, 'dblclick', function() { SelectBox.move(field_id + '_to', field_id + '_from'); SelectFilter.refresh_icons(field_id); });
addEvent(selector_div, 'change', function(e) {
if (e.target.tagName === 'SELECT') {
SelectFilter.refresh_icons(field_id);
}
});
addEvent(selector_div, 'dblclick', function(e) {
if (e.target.tagName === 'OPTION') {
if (e.target.closest('select').id === field_id + '_to') {
SelectBox.move(field_id + '_to', field_id + '_from');
} else {
SelectBox.move(field_id + '_from', field_id + '_to');
}
SelectFilter.refresh_icons(field_id);
}
});
addEvent(findForm(from_box), 'submit', function() { SelectBox.select_all(field_id + '_to'); });
SelectBox.init(field_id + '_from');
SelectBox.init(field_id + '_to');
@ -144,14 +155,26 @@ Requires jQuery, core.js, and SelectBox.js.
// Initial icon refresh
SelectFilter.refresh_icons(field_id);
},
any_selected: function(field) {
var any_selected = false;
try {
// Temporarily add the required attribute and check validity.
// This is much faster in WebKit browsers than the fallback.
field.attr('required', 'required');
any_selected = field.is(':valid');
field.removeAttr('required');
} catch (e) {
// Browsers that don't support :valid (IE < 10)
any_selected = field.find('option:selected').length > 0;
}
return any_selected;
},
refresh_icons: function(field_id) {
var from = $('#' + field_id + '_from');
var to = $('#' + field_id + '_to');
var is_from_selected = from.find('option:selected').length > 0;
var is_to_selected = to.find('option:selected').length > 0;
// Active if at least one item is selected
$('#' + field_id + '_add_link').toggleClass('active', is_from_selected);
$('#' + field_id + '_remove_link').toggleClass('active', is_to_selected);
$('#' + field_id + '_add_link').toggleClass('active', SelectFilter.any_selected(from));
$('#' + field_id + '_remove_link').toggleClass('active', SelectFilter.any_selected(to));
// Active if the corresponding box isn't empty
$('#' + field_id + '_add_all_link').toggleClass('active', from.find('option').length > 0);
$('#' + field_id + '_remove_all_link').toggleClass('active', to.find('option').length > 0);