1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- export default class RowSelector {
- constructor(options) {
- let _this = this;
- _this.options = $.extend({
- // checkbox css选择器
- checkboxSelector: '',
- // 全选checkbox css选择器
- selectAllSelector: '',
- // 选中效果颜色
- background: 'rgba(255, 255,213,0.4)',
- // 点击行事件
- clickRow: false,
- // 表格选择器
- container: 'table',
- }, options);
- _this.init()
- }
- init() {
- let options = this.options,
- checkboxSelector = options.checkboxSelector,
- $selectAll = $(options.selectAllSelector),
- $checkbox = $(checkboxSelector);
- $selectAll.on('change', function() {
- $(this).parents(options.container).find(checkboxSelector).prop('checked', this.checked).trigger('change');
- });
- if (options.clickRow) {
- $checkbox.click(function (e) {
- if (typeof e.cancelBubble != "undefined") {
- e.cancelBubble = true;
- }
- if (typeof e.stopPropagation != "undefined") {
- e.stopPropagation();
- }
- }).parents('tr').click(function (e) {
- $(this).find(checkboxSelector).click();
- });
- }
- $checkbox.on('change', function () {
- var tr = $(this).closest('tr');
- if (this.checked) {
- tr.css('background-color', options.background);
- if ($(checkboxSelector + ':checked').length === $checkbox.length) {
- $selectAll.prop('checked', true)
- }
- } else {
- tr.css('background-color', '');
- }
- });
- }
- /**
- * 获取选中的主键数组
- *
- * @returns {Array}
- */
- getSelectedKeys() {
- let selected = [];
- $(this.options.checkboxSelector+':checked').each(function() {
- var id = $(this).data('id');
- if (selected.indexOf(id) === -1) {
- selected.push(id);
- }
- });
- return selected;
- }
- /**
- * 获取选中的行数组
- *
- * @returns {Array}
- */
- getSelectedRows() {
- let selected = [];
- $(this.options.checkboxSelector+':checked').each(function() {
- var id = $(this).data('id'), i, exist;
- for (i in selected) {
- if (selected[i].id === id) {
- exist = true
- }
- }
- exist || selected.push({'id': id, 'label': $(this).data('label')})
- });
- return selected;
- }
- }
|