仿Excel样式的jquery表格排序插件

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仿Excel样式的jquery表格排序插件</title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> -->
  <link rel="stylesheet" href="dist/excel-bootstrap-table-filter-style.css" />
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>Table 1</h2>
      <table id="table" class="table table-bordered table-intel">
        <thead>
          <tr>
            <th class="filter">Animal</th>
            <th class="filter">Class</th>
            <th>Collective Noun</th>
            <th>A Number</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Bear</td>
            <td>Mammal</td>
            <td>Sleuth</td>
            <td>1</td>
          </tr>
          <tr>
            <td>Ant</td>
            <td>Insect</td>
            <td>Army</td>
            <td>2</td>
          </tr>
          <tr>
            <td>Salamander</td>
            <td>Amphibian</td>
            <td>Congress</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Owl</td>
            <td>Bird</td>
            <td>Parliament</td>
            <td>4</td>
          </tr>
          <tr>
            <td>Frog</td>
            <td>Amphibian</td>
            <td>Army</td>
            <td>5</td>
          </tr>
          <tr>
            <td>Shark</td>
            <td>Fish</td>
            <td>Gam</td>
            <td>6</td>
          </tr>
          <tr>
            <td>Kookaburra</td>
            <td>Bird</td>
            <td>Cackle</td>
            <td>7</td>
          </tr>
          <tr>
            <td>Crow</td>
            <td>Bird</td>
            <td>Murder</td>
            <td>8</td>
          </tr>
          <tr>
            <td>Elephant</td>
            <td>Mammal</td>
            <td>Herd</td>
            <td>9</td>
          </tr>
          <tr>
            <td>Barracude</td>
            <td>Fish</td>
            <td>Grist</td>
            <td>10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- <div class="row">
    <div class="col-md-12">
      <h2>Table 2</h2>
      <table id="table2" class="table table-bordered table-intel">
        <thead>
          <tr>
            <th class="filter">Animal</th>
            <th class="filter">Class</th>
            <th class="filter">Collective Noun</th>
            <th class="filter">A Number</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Bear</td>
            <td>Mammal</td>
            <td>Sleuth</td>
            <td>1</td>
          </tr>
          <tr>
            <td>Ant</td>
            <td>Insect</td>
            <td>Army</td>
            <td>2</td>
          </tr>
          <tr>
            <td>Salamander</td>
            <td>Amphibian</td>
            <td>Congress</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Owl</td>
            <td>Bird</td>
            <td>Parliament</td>
            <td>4</td>
          </tr>
          <tr>
            <td>Frog</td>
            <td>Amphibian</td>
            <td>Army</td>
            <td>5</td>
          </tr>
          <tr>
            <td>Shark</td>
            <td>Fish</td>
            <td>Gam</td>
            <td>6</td>
          </tr>
          <tr>
            <td>Kookaburra</td>
            <td>Bird</td>
            <td>Cackle</td>
            <td>7</td>
          </tr>
          <tr>
            <td>Crow</td>
            <td>Bird</td>
            <td>Murder</td>
            <td>8</td>
          </tr>
          <tr>
            <td>Elephant</td>
            <td>Mammal</td>
            <td>Herd</td>
            <td>9</td>
          </tr>
          <tr>
            <td>Barracude</td>
            <td>Fish</td>
            <td>Grist</td>
            <td>10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h2>Table 3</h2>
      <p>姓名字段只提供搜索,不带过滤和排序</p>
      <table id="table3" class="table table-bordered table-intel">
        <thead>
          <tr>
            <th class="filter">编号</th>
            <th class="no-sort no-filter">姓名</th>
            <th class="filter">成绩</th>
          </tr >
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>张三</td>
            <td>68</td>
          </tr>
          <tr>
            <td>2</td>
            <td>李四</td>
            <td>75</td>
          </tr>
          <tr>
            <td>3</td>
            <td>王五</td>
            <td>86</td>
          </tr>
          <tr>
            <td>4</td>
            <td>赵六</td>
            <td>76</td>
          </tr>
          <tr>
            <td>5</td>
            <td>韩七</td>
            <td>95</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div> -->
</div>
  </div>
  
  <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
  <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
  <script src="dist/excel-bootstrap-table-filter-bundle.js"></script>
  <script>
    $(function () {
      $('#table').excelTableFilter({
        'captions':{ a_to_z: '升序排列', z_to_a: '降序排列', search: '搜索', select_all: '全部选择' }
      });
      $('#table2').excelTableFilter({
        'captions':{ a_to_z: '升序排列', z_to_a: '降序排列', search: '搜索', select_all: '全部选择' }
      });
      $('#table3').excelTableFilter({
          'captions':{ a_to_z: '升序排列', z_to_a: '降序排列', search: '搜索', select_all: '全部选择' }
      });
    });
  </script>
</body>
</html>
 
.dropdown-filter-dropdown {
    position:relative;
    display:inline-block;
}

.dropdown-filter-icon {
    margin-left:5px;
    line-height:1.3;
    border:1px solid black;
}


.dropdown-filter-icon:hover {
    cursor:pointer;
}

.checkbox-container {
    max-height: 400px;
    overflow-y: scroll;
}
.dropdown-filter-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding-bottom:5px;
    padding-top:5px;
    padding-right:5px;
    padding-left:5px;
}

.dropdown-filter-content div {
    margin-top:5px;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
}

.dropdown-filter-content div.dropdown-filter-search {
    margin-bottom:10px;
    margin-top:10px;
}


.dropdown-filter-content div.dropdown-filter-sort {
    padding-top:5px;
    padding-bottom:5px;
}

.dropdown-filter-content div.dropdown-filter-sort:hover {
    background-color:#e1e5e7;
    cursor:pointer;
}

.dropdown-filter-content div.dropdown-filter-sort span {
    margin-right:5px;
    margin-left:5px;
    margin-top:5px;
    margin-bottom:5px;
    color:#000000;
}

.arrow-down {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-right:5px;
    margin-left:5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
 

(function ($$1) {
'use strict';

$$1 = 'default' in $$1 ? $$1['default'] : $$1;

var FilterMenu = function () {
function FilterMenu(target, th, column, index, options) {
this.options = options;
this.th = th;
this.column = column;
this.index = index;
this.tds = target.find('tbody tr td:nth-child(' + (this.column + 1) + ')').toArray();
}
FilterMenu.prototype.initialize = function () {
this.menu = this.dropdownFilterDropdown();
this.th.appendChild(this.menu);
var $trigger = $(this.menu.children[0]);
var $content = $(this.menu.children[1]);
var $menu = $(this.menu);
$trigger.click(function () {
return $content.toggle();
});
$(document).click(function (el) {
if (!$menu.is(el.target) && $menu.has(el.target).length === 0) {
$content.hide();
}
});
};
FilterMenu.prototype.searchToggle = function (value) {
if (this.selectAllCheckbox instanceof HTMLInputElement) this.selectAllCheckbox.checked = false;
if (value.length === 0) {
this.toggleAll(true);
if (this.selectAllCheckbox instanceof HTMLInputElement) this.selectAllCheckbox.checked = true;
return;
}
this.toggleAll(false);
this.inputs.filter(function (input) {
return input.value.toLowerCase().indexOf(value.toLowerCase()) > -1;
}).forEach(function (input) {
input.checked = true;
});
};
FilterMenu.prototype.updateSelectAll = function () {
if (this.selectAllCheckbox instanceof HTMLInputElement) {
$(this.searchFilter).val('');
this.selectAllCheckbox.checked = this.inputs.length === this.inputs.filter(function (input) {
return input.checked;
}).length;
}
};
FilterMenu.prototype.selectAllUpdate = function (checked) {
$(this.searchFilter).val('');
this.toggleAll(checked);
};
FilterMenu.prototype.toggleAll = function (checked) {
for (var i = 0; i < this.inputs.length; i++) {
var input = this.inputs[i];
if (input instanceof HTMLInputElement) input.checked = checked;
}
};
FilterMenu.prototype.dropdownFilterItem = function (td, self) {
var value = td.innerText;
var dropdownFilterItem = document.createElement('div');
dropdownFilterItem.className = 'dropdown-filter-item';
var input = document.createElement('input');
input.type = 'checkbox';
input.value = value.trim().replace(/ +(?= )/g, '');
input.setAttribute('checked', 'checked');
input.className = 'dropdown-filter-menu-item item';
input.setAttribute('data-column', self.column.toString());
input.setAttribute('data-index', self.index.toString());
dropdownFilterItem.appendChild(input);
dropdownFilterItem.innerHTML = dropdownFilterItem.innerHTML.trim() + ' ' + value;
return dropdownFilterItem;
};
FilterMenu.prototype.dropdownFilterItemSelectAll = function () {
var value = this.options.captions.select_all;
var dropdownFilterItemSelectAll = document.createElement('div');
dropdownFilterItemSelectAll.className = 'dropdown-filter-item';
var input = document.createElement('input');
input.type = 'checkbox';
input.value = this.options.captions.select_all;
input.setAttribute('checked', 'checked');
input.className = 'dropdown-filter-menu-item select-all';
input.setAttribute('data-column', this.column.toString());
input.setAttribute('data-index', this.index.toString());
dropdownFilterItemSelectAll.appendChild(input);
dropdownFilterItemSelectAll.innerHTML = dropdownFilterItemSelectAll.innerHTML + ' ' + value;
return dropdownFilterItemSelectAll;
};
FilterMenu.prototype.dropdownFilterSearch = function () {
var dropdownFilterItem = document.createElement('div');
dropdownFilterItem.className = 'dropdown-filter-search';
var input = document.createElement('input');
input.type = 'text';
input.className = 'dropdown-filter-menu-search form-control';
input.setAttribute('data-column', this.column.toString());
input.setAttribute('data-index', this.index.toString());
input.setAttribute('placeholder', this.options.captions.search);
dropdownFilterItem.appendChild(input);
return dropdownFilterItem;
};
FilterMenu.prototype.dropdownFilterSort = function (direction) {
var dropdownFilterItem = document.createElement('div');
dropdownFilterItem.className = 'dropdown-filter-sort';
var span = document.createElement('span');
span.className = direction.toLowerCase().split(' ').join('-');
span.setAttribute('data-column', this.column.toString());
span.setAttribute('data-index', this.index.toString());
span.innerText = direction;
dropdownFilterItem.appendChild(span);
return dropdownFilterItem;
};
FilterMenu.prototype.dropdownFilterContent = function () {
var _this = this;
var self = this;
var dropdownFilterContent = document.createElement('div');
dropdownFilterContent.className = 'dropdown-filter-content';
var innerDivs = this.tds.reduce(function (arr, el) {
var values = arr.map(function (el) {
return el.innerText.trim();
});
if (values.indexOf(el.innerText.trim()) < 0) arr.push(el);
return arr;
}, []).sort(function (a, b) {
var A = a.innerText.toLowerCase();
var B = b.innerText.toLowerCase();
if (!isNaN(Number(A)) && !isNaN(Number(B))) {
if (Number(A) < Number(B)) return -1;
if (Number(A) > Number(B)) return 1;
} else {
if (A < B) return -1;
if (A > B) return 1;
}
return 0;
}).map(function (td) {
return _this.dropdownFilterItem(td, self);
});
this.inputs = innerDivs.map(function (div) {
return div.firstElementChild;
});
var selectAllCheckboxDiv = this.dropdownFilterItemSelectAll();
this.selectAllCheckbox = selectAllCheckboxDiv.firstElementChild;
innerDivs.unshift(selectAllCheckboxDiv);
var searchFilterDiv = this.dropdownFilterSearch();
this.searchFilter = searchFilterDiv.firstElementChild;
var outerDiv = innerDivs.reduce(function (outerDiv, innerDiv) {
outerDiv.appendChild(innerDiv);
return outerDiv;
}, document.createElement('div'));
outerDiv.className = 'checkbox-container';
var elements = [];
if (this.options.sort) elements = elements.concat([this.dropdownFilterSort(this.options.captions.a_to_z), this.dropdownFilterSort(this.options.captions.z_to_a)]);
if (this.options.search) elements.push(searchFilterDiv);
return elements.concat(outerDiv).reduce(function (html, el) {
html.appendChild(el);
return html;
}, dropdownFilterContent);
};
FilterMenu.prototype.dropdownFilterDropdown = function () {
var dropdownFilterDropdown = document.createElement('div');
dropdownFilterDropdown.className = 'dropdown-filter-dropdown';
var arrow = document.createElement('span');
arrow.className = 'glyphicon glyphicon-arrow-down dropdown-filter-icon';
var icon = document.createElement('i');
icon.className = 'arrow-down';
arrow.appendChild(icon);
dropdownFilterDropdown.appendChild(arrow);
dropdownFilterDropdown.appendChild(this.dropdownFilterContent());
if ($(this.th).hasClass('no-sort')) {
$(dropdownFilterDropdown).find('.dropdown-filter-sort').remove();
}
if ($(this.th).hasClass('no-filter')) {
$(dropdownFilterDropdown).find('.checkbox-container').remove();
}
if ($(this.th).hasClass('no-search')) {
$(dropdownFilterDropdown).find('.dropdown-filter-search').remove();
}
return dropdownFilterDropdown;
};
return FilterMenu;
}();

var FilterCollection = function () {
function FilterCollection(target, options) {
this.target = target;
this.options = options;
this.ths = target.find('th' + options.columnSelector).toArray();
this.filterMenus = this.ths.map(function (th, index) {
var column = $(th).index();
return new FilterMenu(target, th, column, index, options);
});
this.rows = target.find('tbody').find('tr').toArray();
this.table = target.get(0);
}
FilterCollection.prototype.initialize = function () {
this.filterMenus.forEach(function (filterMenu) {
filterMenu.initialize();
});
this.bindCheckboxes();
this.bindSelectAllCheckboxes();
this.bindSort();
this.bindSearch();
};
FilterCollection.prototype.bindCheckboxes = function () {
var filterMenus = this.filterMenus;
var rows = this.rows;
var ths = this.ths;
var updateRowVisibility = this.updateRowVisibility;
this.target.find('.dropdown-filter-menu-item.item').change(function () {
var index = $(this).data('index');
var value = $(this).val();
filterMenus[index].updateSelectAll();
updateRowVisibility(filterMenus, rows, ths);
});
};
FilterCollection.prototype.bindSelectAllCheckboxes = function () {
var filterMenus = this.filterMenus;
var rows = this.rows;
var ths = this.ths;
var updateRowVisibility = this.updateRowVisibility;
this.target.find('.dropdown-filter-menu-item.select-all').change(function () {
var index = $(this).data('index');
var value = this.checked;
filterMenus[index].selectAllUpdate(value);
updateRowVisibility(filterMenus, rows, ths);
});
};
FilterCollection.prototype.bindSort = function () {
var filterMenus = this.filterMenus;
var rows = this.rows;
var ths = this.ths;
var sort = this.sort;
var table = this.table;
var options = this.options;
var updateRowVisibility = this.updateRowVisibility;
this.target.find('.dropdown-filter-sort').click(function () {
var $sortElement = $(this).find('span');
var column = $sortElement.data('column');
var order = $sortElement.attr('class');
sort(column, order, table, options);
updateRowVisibility(filterMenus, rows, ths);
});
};
FilterCollection.prototype.bindSearch = function () {
var filterMenus = this.filterMenus;
var rows = this.rows;
var ths = this.ths;
var updateRowVisibility = this.updateRowVisibility;
this.target.find('.dropdown-filter-search').keyup(function () {
var $input = $(this).find('input');
var index = $input.data('index');
var value = $input.val();
filterMenus[index].searchToggle(value);
updateRowVisibility(filterMenus, rows, ths);
});
};
FilterCollection.prototype.updateRowVisibility = function (filterMenus, rows, ths) {
var showRows = rows;
var hideRows = [];
var selectedLists = filterMenus.map(function (filterMenu) {
return {
column: filterMenu.column,
selected: filterMenu.inputs.filter(function (input) {
return input.checked;
}).map(function (input) {
return input.value.trim().replace(/ +(?= )/g, '');
})
};
});
for (var i = 0; i < rows.length; i++) {
var tds = rows[i].children;
for (var j = 0; j < selectedLists.length; j++) {
var content = tds[selectedLists[j].column].innerText.trim().replace(/ +(?= )/g, '');
if (selectedLists[j].selected.indexOf(content) === -1) {
$(rows[i]).hide();
break;
}
$(rows[i]).show();
}
}
};
FilterCollection.prototype.sort = function (column, order, table, options) {
var flip = 1;
if (order === options.captions.z_to_a.toLowerCase().split(' ').join('-')) flip = -1;
var tbody = $(table).find('tbody').get(0);
var rows = $(tbody).find('tr').get();
rows.sort(function (a, b) {
var A = a.children[column].innerText.toUpperCase();
var B = b.children[column].innerText.toUpperCase();
if (!isNaN(Number(A)) && !isNaN(Number(B))) {
if (Number(A) < Number(B)) return -1 * flip;
if (Number(A) > Number(B)) return 1 * flip;
} else {
if (A < B) return -1 * flip;
if (A > B) return 1 * flip;
}
return 0;
});
for (var i = 0; i < rows.length; i++) {
tbody.appendChild(rows[i]);
}
};
return FilterCollection;
}();

$$1.fn.excelTableFilter = function (options) {
var target = this;
options = $$1.extend({}, $$1.fn.excelTableFilter.options, options);
if (typeof options.columnSelector === 'undefined') options.columnSelector = '';
if (typeof options.sort === 'undefined') options.sort = true;
if (typeof options.search === 'undefined') options.search = true;
if (typeof options.captions === 'undefined') options.captions = {
a_to_z: 'A to Z',
z_to_a: 'Z to A',
search: 'Search',
select_all: 'Select All'
};
var filterCollection = new FilterCollection(target, options);
filterCollection.initialize();
return target;
};
$$1.fn.excelTableFilter.options = {};

}(jQuery));
//# sourceMappingURL=excel-bootstrap-table-filter-bundle.js.map

posted @ 2020-12-16 11:11  xiaobozi6  阅读(101)  评论(0)    收藏  举报