framework/assets/yii.gridView.js
/**
* Yii GridView widget.
*
* This is the JavaScript widget used by the yii\grid\GridView widget.
*
* @link https://www.yiiframework.com/
* @copyright Copyright (c) 2008 Yii Software LLC
* @license https://www.yiiframework.com/license/
* @author Qiang Xue <qiang.xue@gmail.com>
* @since 2.0
*/
(function ($) {
$.fn.yiiGridView = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist in jQuery.yiiGridView');
return false;
}
};
var defaults = {
filterUrl: undefined,
filterSelector: undefined,
filterOnFocusOut: true
};
var gridData = {};
var gridEvents = {
/**
* beforeFilter event is triggered before filtering the grid.
* The signature of the event handler should be:
* function (event)
* where
* - event: an Event object.
*
* If the handler returns a boolean false, it will stop filter form submission after this event. As
* a result, afterFilter event will not be triggered.
*/
beforeFilter: 'beforeFilter',
/**
* afterFilter event is triggered after filtering the grid and filtered results are fetched.
* The signature of the event handler should be:
* function (event)
* where
* - event: an Event object.
*/
afterFilter: 'afterFilter'
};
/**
* Used for storing active event handlers and removing them later.
* The structure of single event handler is:
*
* {
* gridViewId: {
* type: {
* event: '...',
* selector: '...'
* }
* }
* }
*
* Used types:
*
* - filter, used for filtering grid with elements found by filterSelector
* - checkRow, used for checking single row
* - checkAllRows, used for checking all rows with according "Check all" checkbox
*
* event is the name of event, for example: 'change.yiiGridView'
* selector is a jQuery selector for finding elements
*
* @type {{}}
*/
var gridEventHandlers = {};
var methods = {
init: function (options) {
return this.each(function () {
var $e = $(this);
var settings = $.extend({}, defaults, options || {});
var id = $e.attr('id');
if (gridData[id] === undefined) {
gridData[id] = {};
}
gridData[id] = $.extend(gridData[id], {settings: settings});
var filterEvents = 'change.yiiGridView keydown.yiiGridView';
var enterPressed = false;
initEventHandler($e, 'filter', filterEvents, settings.filterSelector, function (event) {
if (event.type === 'keydown') {
if (event.keyCode !== 13) {
return; // only react to enter key
} else {
enterPressed = true;
}
} else {
// prevent processing for both keydown and change events
if (enterPressed) {
enterPressed = false;
return;
}
}
if (!settings.filterOnFocusOut && event.type !== 'keydown') {
return false;
}
methods.applyFilter.apply($e);
return false;
});
});
},
applyFilter: function () {
var $grid = $(this);
var settings = gridData[$grid.attr('id')].settings;
var data = {};
$.each($(settings.filterSelector).serializeArray(), function () {
if (!(this.name in data)) {
data[this.name] = [];
}
data[this.name].push(this.value);
});
var namesInFilter = Object.keys(data);
$.each(yii.getQueryParams(settings.filterUrl), function (name, value) {
if (namesInFilter.indexOf(name) === -1 && namesInFilter.indexOf(name.replace(/\[\d*\]$/, '')) === -1) {
if (!$.isArray(value)) {
value = [value];
}
if (!(name in data)) {
data[name] = value;
} else {
$.each(value, function (i, val) {
if ($.inArray(val, data[name])) {
data[name].push(val);
}
});
}
}
});
var pos = settings.filterUrl.indexOf('?');
var url = pos < 0 ? settings.filterUrl : settings.filterUrl.substring(0, pos);
var hashPos = settings.filterUrl.indexOf('#');
if (pos >= 0 && hashPos >= 0) {
url += settings.filterUrl.substring(hashPos);
}
$grid.find('form.gridview-filter-form').remove();
var $form = $('<form/>', {
action: url,
method: 'get',
'class': 'gridview-filter-form',
style: 'display:none',
'data-pjax': ''
}).appendTo($grid);
$.each(data, function (name, values) {
$.each(values, function (index, value) {
$form.append($('<input/>').attr({type: 'hidden', name: name, value: value}));
});
});
var event = $.Event(gridEvents.beforeFilter);
$grid.trigger(event);
if (event.result === false) {
return;
}
$form.submit();
$grid.trigger(gridEvents.afterFilter);
},
setSelectionColumn: function (options) {
var $grid = $(this);
var id = $(this).attr('id');
if (gridData[id] === undefined) {
gridData[id] = {};
}
gridData[id].selectionColumn = options.name;
if (!options.multiple || !options.checkAll) {
return;
}
var checkAllInput = "input[name='" + options.checkAll + "']";
var inputs = (options['class'] ? "input." + options['class'] : "input[name='" + options.name + "']") + ":enabled";
initEventHandler($grid, 'checkAllRows', 'click.yiiGridView', "#" + id + " " + checkAllInput, function () {
$grid.find(inputs + (this.checked ? ":not(:checked)" : ":checked")).prop('checked', this.checked).change();
});
var handler = function () {
var all = $grid.find(inputs).length == $grid.find(inputs + ":checked").length;
$grid.find(checkAllInput + (all ? ":not(:checked)" : ":checked")).prop('checked', all).change();
};
initEventHandler($grid, 'checkRow', 'click.yiiGridView', "#" + id + " " + inputs, handler);
if ($grid.find(inputs).length) {
handler(); // Ensure "check all" checkbox is checked on page load if all data row checkboxes are initially checked.
}
},
getSelectedRows: function () {
var $grid = $(this);
var data = gridData[$grid.attr('id')];
var keys = [];
if (data.selectionColumn) {
$grid.find("input[name='" + data.selectionColumn + "']:checked").each(function () {
keys.push($(this).parent().closest('tr').data('key'));
});
}
return keys;
},
destroy: function () {
var events = ['.yiiGridView', gridEvents.beforeFilter, gridEvents.afterFilter].join(' ');
this.off(events);
var id = $(this).attr('id');
$.each(gridEventHandlers[id], function (type, data) {
$(document).off(data.event, data.selector);
});
delete gridData[id];
return this;
},
data: function () {
var id = $(this).attr('id');
return gridData[id];
}
};
/**
* Used for attaching event handler and prevent of duplicating them. With each call previously attached handler of
* the same type is removed even selector was changed.
* @param {jQuery} $gridView According jQuery grid view element
* @param {string} type Type of the event which acts like a key
* @param {string} event Event name, for example 'change.yiiGridView'
* @param {string} selector jQuery selector
* @param {function} callback The actual function to be executed with this event
*/
function initEventHandler($gridView, type, event, selector, callback)
{
var id = $gridView.attr('id');
var prevHandler = gridEventHandlers[id];
if (prevHandler !== undefined && prevHandler[type] !== undefined) {
var data = prevHandler[type];
$(document).off(data.event, data.selector);
}
if (prevHandler === undefined) {
gridEventHandlers[id] = {};
}
$(document).on(event, selector, callback);
gridEventHandlers[id][type] = {event: event, selector: selector};
}
})(window.jQuery);