p15693087
/
django
1
0
Fork 0
Code Issues Pull Requests 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'; 'use strict';
var SelectBox = { var SelectBox = {
cache: {}, cache: {},
@ -7,8 +7,10 @@
var node; var node;
SelectBox.cache[id] = []; SelectBox.cache[id] = [];
var cache = SelectBox.cache[id]; var cache = SelectBox.cache[id];
for (var i = 0, j = box.options.length; i < j; i++) { var boxOptions = box.options;
node = box.options[i]; 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}); cache.push({value: node.value, text: node.text, displayed: 1});
} }
}, },
@ -16,7 +18,8 @@
// Repopulate HTML select box from cache // Repopulate HTML select box from cache
var box = document.getElementById(id); var box = document.getElementById(id);
var node; 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]; var cache = SelectBox.cache[id];
for (var i = 0, j = cache.length; i < j; i++) { for (var i = 0, j = cache.length; i < j; i++) {
node = cache[i]; node = cache[i];
@ -24,9 +27,11 @@
var new_option = new Option(node.text, node.value, false, false); var new_option = new Option(node.text, node.value, false, false);
// Shows a tooltip when hovering over the option // Shows a tooltip when hovering over the option
new_option.setAttribute("title", node.text); 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) { filter: function(id, text) {
// Redisplay the HTML select box, displaying only the choices containing ALL // 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++) { for (var i = 0, j = cache.length; i < j; i++) {
node = cache[i]; node = cache[i];
node.displayed = 1; node.displayed = 1;
var node_text = node.text.toLowerCase();
var numTokens = tokens.length; var numTokens = tokens.length;
for (var k = 0; k < numTokens; k++) { for (var k = 0; k < numTokens; k++) {
token = tokens[k]; token = tokens[k];
if (node.text.toLowerCase().indexOf(token) === -1) { if (node_text.indexOf(token) === -1) {
node.displayed = 0; node.displayed = 0;
break; // Once the first token isn't found we're done
} }
} }
} }
@ -57,11 +64,7 @@
break; break;
} }
} }
var k = cache.length - 1; cache.splice(delete_index, 1);
for (i = delete_index; i < k; i++) {
cache[i] = cache[i + 1];
}
cache.length--;
}, },
add_to_cache: function(id, option) { add_to_cache: function(id, option) {
SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1}); SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1});
@ -82,11 +85,13 @@
var from_box = document.getElementById(from); var from_box = document.getElementById(from);
var option; var option;
var boxOptions = from_box.options; 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]; option = boxOptions[i];
if (option.selected && SelectBox.cache_contains(from, option.value)) { var option_value = option.value;
SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1}); if (option.selected && SelectBox.cache_contains(from, option_value)) {
SelectBox.delete_from_cache(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); SelectBox.redisplay(from);
@ -96,11 +101,13 @@
var from_box = document.getElementById(from); var from_box = document.getElementById(from);
var option; var option;
var boxOptions = from_box.options; 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]; option = boxOptions[i];
if (SelectBox.cache_contains(from, option.value)) { var option_value = option.value;
SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1}); if (SelectBox.cache_contains(from, option_value)) {
SelectBox.delete_from_cache(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); SelectBox.redisplay(from);
@ -126,10 +133,12 @@
}, },
select_all: function(id) { select_all: function(id) {
var box = document.getElementById(id); var box = document.getElementById(id);
for (var i = 0; i < box.options.length; i++) { var boxOptions = box.options;
box.options[i].selected = 'selected'; var boxOptionsLength = boxOptions.length;
for (var i = 0; i < boxOptionsLength; i++) {
boxOptions[i].selected = 'selected';
} }
} }
}; };
window.SelectBox = SelectBox; 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, '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, 'keyup', function(e) { SelectFilter.filter_key_up(e, field_id); });
addEvent(filter_input, 'keydown', function(e) { SelectFilter.filter_key_down(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(selector_div, 'change', function(e) {
addEvent(to_box, 'change', function(e) { SelectFilter.refresh_icons(field_id); }); if (e.target.tagName === 'SELECT') {
addEvent(from_box, 'dblclick', function() { SelectBox.move(field_id + '_from', field_id + '_to'); SelectFilter.refresh_icons(field_id); }); 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, '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'); }); addEvent(findForm(from_box), 'submit', function() { SelectBox.select_all(field_id + '_to'); });
SelectBox.init(field_id + '_from'); SelectBox.init(field_id + '_from');
SelectBox.init(field_id + '_to'); SelectBox.init(field_id + '_to');
@ -144,14 +155,26 @@ Requires jQuery, core.js, and SelectBox.js.
// Initial icon refresh // Initial icon refresh
SelectFilter.refresh_icons(field_id); 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) { refresh_icons: function(field_id) {
var from = $('#' + field_id + '_from'); var from = $('#' + field_id + '_from');
var to = $('#' + field_id + '_to'); 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 // Active if at least one item is selected
$('#' + field_id + '_add_link').toggleClass('active', is_from_selected); $('#' + field_id + '_add_link').toggleClass('active', SelectFilter.any_selected(from));
$('#' + field_id + '_remove_link').toggleClass('active', is_to_selected); $('#' + field_id + '_remove_link').toggleClass('active', SelectFilter.any_selected(to));
// Active if the corresponding box isn't empty // Active if the corresponding box isn't empty
$('#' + field_id + '_add_all_link').toggleClass('active', from.find('option').length > 0); $('#' + field_id + '_add_all_link').toggleClass('active', from.find('option').length > 0);
$('#' + field_id + '_remove_all_link').toggleClass('active', to.find('option').length > 0); $('#' + field_id + '_remove_all_link').toggleClass('active', to.find('option').length > 0);