123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- 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,
- }, options);
- _this._bind()
- }
- _bind() {
- let options = this.options,
- checkboxSelector = options.checkboxSelector,
- selectAllSelector = options.selectAllSelector,
- $ckb = $(checkboxSelector);
- $(selectAllSelector).on('change', function() {
- var cbx = $(checkboxSelector);
- for (var i = 0; i < cbx.length; i++) {
- if (this.checked && !cbx[i].checked) {
- cbx[i].click();
- } else if (!this.checked && cbx[i].checked) {
- cbx[i].click();
- }
- }
- });
- if (options.clickRow) {
- $ckb.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();
- });
- }
- $ckb.on('change', function () {
- var tr = $(this).closest('tr');
- if (this.checked) {
- tr.css('background-color', options.background);
- } 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;
- }
- }
|