New file |
| | |
| | | /** |
| | | TABLEFILTER |
| | | **/ |
| | | |
| | | layui.define(['table', 'jquery', 'form', 'laydate'], function (exports) { |
| | | |
| | | var MOD_NAME = 'tableFilter', |
| | | $ = layui.jquery, |
| | | table = layui.table, |
| | | form = layui.form, |
| | | laydate = layui.laydate; |
| | | |
| | | var tableFilter = { |
| | | "v": '1.0.0' |
| | | }; |
| | | |
| | | //ç¼å |
| | | tableFilter.cache = {} |
| | | |
| | | //渲æ |
| | | tableFilter.render = function (opt) { |
| | | |
| | | //é
ç½®é»è®¤å¼ |
| | | var elem = $(opt.elem || '#table'), |
| | | elemId = elem.attr("id") || "table_" + new Date().getTime(), |
| | | filters = opt.filters || [], |
| | | parent = opt.parent || 'body', |
| | | mode = opt.mode || "local"; |
| | | opt.done = opt.done || function () { }; |
| | | |
| | | //åå
¥é»è®¤ç¼å |
| | | tableFilter.cache[elemId] = {}; |
| | | |
| | | //主è¿è¡ |
| | | var main = function () { |
| | | |
| | | //é»è®¤è¿æ»¤ |
| | | if (mode == "local") { |
| | | var trsIndex = tableFilter.getShowTrIndex(elem, elemId, filters); |
| | | if (trsIndex.length > 0) { |
| | | var trs = elem.next().find('.layui-table-body tr'); |
| | | trs.each(function (i, tr) { |
| | | if ($.inArray($(tr).data("index"), trsIndex) != -1) { |
| | | $(tr).removeClass("layui-hide") |
| | | } else { |
| | | $(tr).addClass("layui-hide") |
| | | } |
| | | }) |
| | | } else { |
| | | elem.next().find('.layui-table-body tr').removeClass("layui-hide") |
| | | } |
| | | |
| | | //FIXå
¨éçå¬ |
| | | tableFilter.fixAll(elem); |
| | | //éè½½è¡¨æ ¼å°ºå¯¸ (FIXå·æ°è¡¨æ ¼æ¶çè¡¨æ ¼å¼å¸¸) |
| | | table.resize(elemId); |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | //éåè¿æ»¤é¡¹ |
| | | layui.each(filters, function (i, filter) { |
| | | var filterField = filter.field, |
| | | filterName = filter.name || filter.field, |
| | | filterType = filter.type || "input", |
| | | filterData = filter.data || [], |
| | | filterUrl = filter.url || ""; |
| | | |
| | | //æå
¥å¾æ |
| | | var th = elem.next().find('.layui-table-header th[data-field="' + filterField + '"]'); |
| | | var icon = filterType == 'input' ? 'layui-icon-search' : 'layui-icon-down'; |
| | | var filterIcon = $('<span class="layui-table-filter layui-inline"><i class="layui-icon ' + icon + '"></i></span>'); |
| | | th.find('.layui-table-cell').append(filterIcon) |
| | | |
| | | //徿 é»è®¤é«äº® |
| | | if (tableFilter.cache[elemId][filterName]) { |
| | | filterIcon.addClass("tableFilter-has") |
| | | } else { |
| | | filterIcon.removeClass("tableFilter-has") |
| | | } |
| | | |
| | | //徿 ç¹å»äºä»¶ |
| | | filterIcon.on("click", function (e) { |
| | | e.stopPropagation(); |
| | | //å¾å°è¿æ»¤é¡¹çé项 |
| | | //妿å¼å¯æ¬å° 并䏿²¡è®¾ç½®æ°æ® 就读æ¬å°æ°æ® |
| | | if (!filter.data && !filterUrl && filterType != "input") { |
| | | filterData = tableFilter.eachTds(elem, filterField); |
| | | } |
| | | |
| | | //å¼¹åºå± |
| | | var t = $(this).offset().top + $(parent).scrollTop() + $(this).outerHeight() + 5 + "px"; |
| | | var l_fix = filterType == "date" ? 530 : 164; |
| | | var l = $(this).offset().left - ($('body').outerWidth(true) - $(parent).outerWidth(true)) - l_fix + "px"; |
| | | |
| | | var filterBox = $('<div class="layui-table-filter-view layui-anim layui-anim-fadein" style="top:' + t + ';left:' + l + ';"><div class="layui-table-filter-box"><form class="layui-form" lay-filter="table-filter-form"></form></div></div>'); |
| | | if (filterType == "input") { |
| | | filterBox.find('form').append('<input type="search" name="' + filterName + '" lay-verify="required" lay-verType="tips" placeholder="å
³é®è¯" class="layui-input">'); |
| | | } |
| | | if (filterType == "checkbox") { |
| | | filterBox.find('form').append('<ul></ul>'); |
| | | if (!filterUrl) { |
| | | layui.each(filterData, function (i, item) { |
| | | filterBox.find('ul').append('<li><input type="checkbox" name="' + filterName + '[' + item.key + ']" value="' + item.key + '" title="' + item.value + '" lay-skin="primary"></li>'); |
| | | }) |
| | | } |
| | | } |
| | | if (filterType == "radio") { |
| | | filterBox.find('form').append('<ul class="radio"></ul>'); |
| | | if (!filterUrl) { |
| | | filterBox.find('ul').append('<li><input type="radio" name="' + filterName + '" value="" title="All" checked></li>'); |
| | | layui.each(filterData, function (i, item) { |
| | | filterBox.find('ul').append('<li><input type="radio" name="' + filterName + '" value="' + item.key + '" title="' + item.value + '"></li>'); |
| | | }) |
| | | } |
| | | } |
| | | if (filterType == "date") { |
| | | filterBox.find('form').append('<div class="layui-table-filter-date"></div>'); |
| | | filterBox.find('form').append('<input type="text" name="' + filterName + '" lay-verify="required" lay-verType="tips" placeholder="è¯·éæ©æ¥æ" class="layui-input">'); |
| | | |
| | | } |
| | | filterBox.find('form').append('<button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="tableFilter">ç¡®å®</button>'); |
| | | filterBox.find('form').append('<button type="button" class="layui-btn layui-btn-primary layui-btn-sm filter-del layui-btn-disabled" disabled>åæ¶è¿æ»¤</button>'); |
| | | |
| | | //设置æ¸
餿¯å¦å¯ç¨ |
| | | $(this).hasClass('tableFilter-has') && filterBox.find('.filter-del').removeClass("layui-btn-disabled").removeAttr("disabled", "disabled"); |
| | | |
| | | //å å
¥DOM |
| | | $(parent).append(filterBox); |
| | | |
| | | //èµå¼FORM |
| | | form.val("table-filter-form", tableFilter.toLayuiFrom(elemId, filterName, filterType)); |
| | | |
| | | //渲ælayui form |
| | | form.render(null, 'table-filter-form'); |
| | | |
| | | //æ¸²ææ¥æ |
| | | if (filterType == "date") { |
| | | laydate.render({ |
| | | elem: '.layui-table-filter-date', |
| | | range: true, |
| | | type: 'date', |
| | | value: $('.layui-table-filter-date').next().val(), |
| | | position: 'static', |
| | | showBottom: false, |
| | | change: function (value, date, endDate) { |
| | | $('.layui-table-filter-date').next().val(value) |
| | | } |
| | | }); |
| | | } |
| | | |
| | | //渲æFORM 妿æ¯searchInput å°±é»è®¤éä¸ |
| | | var searchInput = filterBox.find('form input[type="search"]'); |
| | | searchInput.focus().select(); |
| | | |
| | | //å¤ç弿¥filterData |
| | | if ((filterType == 'checkbox' || filterType == 'radio') && filterUrl) { |
| | | var filterBoxUl = filterBox.find('.layui-table-filter-box ul'); |
| | | filterBoxUl.append('<div class="loading"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>'); |
| | | $.getJSON(filterUrl + "?_t=" + new Date().getTime(), function (res, status, xhr) { |
| | | filterBoxUl.empty(); |
| | | filterType == "radio" && filterBoxUl.append('<li><input type="radio" name="' + filterName + '" value="" title="All" checked></li>'); |
| | | layui.each(res.data, function (i, item) { |
| | | filterType == "checkbox" && filterBoxUl.append('<li><input type="checkbox" name="' + filterName + '[' + item.key + ']" value="' + item.key + '" title="' + item.value + '" lay-skin="primary"></li>'); |
| | | filterType == "radio" && filterBoxUl.append('<li><input type="radio" name="' + filterName + '" value="' + item.key + '" title="' + item.value + '"></li>'); |
| | | }) |
| | | form.render(null, 'table-filter-form'); |
| | | form.val("table-filter-form", tableFilter.toLayuiFrom(elemId, filterName, filterType)); |
| | | }); |
| | | } |
| | | |
| | | //ç¹å»ç¡®è®¤å¼å§è¿æ»¤ |
| | | form.on('submit(tableFilter)', function (data) { |
| | | //éæå¤éæ¡ç»æ |
| | | if (filterType == "checkbox") { |
| | | var NEWfield = []; |
| | | for (var key in data.field) { |
| | | NEWfield.push(data.field[key]) |
| | | } |
| | | data.field[filterName] = NEWfield |
| | | } |
| | | |
| | | //è¿æ»¤é¡¹åå
¥ç¼å |
| | | tableFilter.cache[elemId][filterName] = data.field[filterName]; |
| | | |
| | | //妿æè¿æ»¤é¡¹ iconå°±é«äº® |
| | | if (tableFilter.cache[elemId][filterName].length > 0) { |
| | | filterIcon.addClass("tableFilter-has") |
| | | } else { |
| | | filterIcon.removeClass("tableFilter-has") |
| | | } |
| | | |
| | | if (mode == "local") { |
| | | //æ¬å°äº¤åè¿æ»¤ |
| | | var trsIndex = tableFilter.getShowTrIndex(elem, elemId, filters); |
| | | if (trsIndex.length > 0 || data.field[filterName].length > 0) { |
| | | var trs = elem.next().find('.layui-table-body tr'); |
| | | trs.each(function (i, tr) { |
| | | if ($.inArray($(tr).data("index"), trsIndex) != -1) { |
| | | $(tr).removeClass("layui-hide") |
| | | } else { |
| | | $(tr).addClass("layui-hide") |
| | | } |
| | | }) |
| | | } else { |
| | | elem.next().find('.layui-table-body tr').removeClass("layui-hide") |
| | | } |
| | | //æ´æ°åè®¡è¡ |
| | | tableFilter.updataTotal(elem); |
| | | //æ´æ°åºåå· |
| | | tableFilter.upNumbers(elem); |
| | | //åæ¶è¡¨æ ¼éä¸ |
| | | tableFilter.uncheck(elem); |
| | | //éè½½è¡¨æ ¼å°ºå¯¸ |
| | | table.resize(elemId) |
| | | } else if (mode == "api") { |
| | | //æå¡ç«¯äº¤åè¿æ»¤ |
| | | //å°æ°ç»è½¬å符串 |
| | | var new_where = {}; |
| | | for (var key in tableFilter.cache[elemId]) { |
| | | var filterKey = key, |
| | | filterValue = tableFilter.cache[elemId][key]; |
| | | if ($.isArray(filterValue)) { |
| | | new_where[filterKey] = filterValue.join(","); |
| | | } else { |
| | | new_where[filterKey] = filterValue; |
| | | } |
| | | } |
| | | table.reload(elemId, { "where": new_where }) |
| | | } |
| | | |
| | | //åå
¥åè°å½æ° |
| | | opt.done(tableFilter.cache[elemId]); |
| | | |
| | | filterBox.remove(); |
| | | return false; |
| | | }) |
| | | |
| | | //ç¹å»æ¸
餿¤é¡¹è¿æ»¤ |
| | | filterBox.find('.layui-table-filter-box .filter-del').on('click', function (e) { |
| | | delete tableFilter.cache[elemId][filterName]; |
| | | filterIcon.removeClass("tableFilter-has"); |
| | | if (mode == "local") { |
| | | var trsIndex = tableFilter.getShowTrIndex(elem, elemId, filters); |
| | | if (trsIndex.length > 0) { |
| | | var trs = elem.next().find('.layui-table-body tr'); |
| | | trs.each(function (i, tr) { |
| | | if ($.inArray($(tr).data("index"), trsIndex) != -1) { |
| | | $(tr).removeClass("layui-hide") |
| | | } else { |
| | | $(tr).addClass("layui-hide") |
| | | } |
| | | }) |
| | | } else { |
| | | elem.next().find('.layui-table-body tr').removeClass("layui-hide") |
| | | } |
| | | //æ´æ°åè®¡è¡ |
| | | tableFilter.updataTotal(elem) |
| | | //æ´æ°åºåå· |
| | | tableFilter.upNumbers(elem) |
| | | //åæ¶è¡¨æ ¼éä¸ |
| | | tableFilter.uncheck(elem) |
| | | //éè½½è¡¨æ ¼å°ºå¯¸ |
| | | table.resize(elemId) |
| | | } else if (mode == "api") { |
| | | //éè¦æ¸
é¤whereéç对åºçå¼ |
| | | var where = {}; |
| | | where[filterName] = '' |
| | | table.reload(elemId, { "where": where }) |
| | | } |
| | | |
| | | opt.done(tableFilter.cache[elemId]); |
| | | filterBox.remove(); |
| | | }) |
| | | |
| | | //ç¹å»å
¶ä»åºåå
³é |
| | | $(document).mouseup(function (e) { |
| | | var userSet_con = $('.layui-table-filter-view'); |
| | | if (!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0) { |
| | | filterBox.remove(); |
| | | } |
| | | }); |
| | | |
| | | }) |
| | | }) |
| | | |
| | | }; |
| | | main(); |
| | | |
| | | //彿°è¿å |
| | | var returnObj = { |
| | | 'config': opt, |
| | | 'reload': function (opt) { |
| | | main(); |
| | | //æ´æ°åºåå· |
| | | tableFilter.upNumbers(elem); |
| | | } |
| | | } |
| | | return returnObj |
| | | } |
| | | |
| | | //éåè¡è·åæ¬å°åéå return tdsArray[] |
| | | tableFilter.eachTds = function (elem, filterField) { |
| | | var tdsText = [], |
| | | tdsArray = []; |
| | | var tds = elem.next().find('.layui-table-body td[data-field="' + filterField + '"]'); |
| | | tds.each(function (i, td) { |
| | | tdsText.push($.trim(td.innerText)) |
| | | }) |
| | | tdsText = tableFilter.tool.uniqueObjArray(tdsText); |
| | | layui.each(tdsText, function (i, item) { |
| | | tdsArray.push({ 'key': item, 'value': item }) |
| | | }) |
| | | return tdsArray; |
| | | } |
| | | |
| | | //è·åå¹é
çTRçdata-index return trsIndex[] |
| | | tableFilter.getShowTrIndex = function (elem, elemId, filters) { |
| | | var trsIndex = []; |
| | | var filterValues = tableFilter.cache[elemId]; |
| | | |
| | | for (var key in filterValues) { |
| | | var filterKey = key, |
| | | filterValue = filterValues[key]; |
| | | |
| | | //妿ænameæ¯å¯¹filterField |
| | | layui.each(filters, function (i, item) { |
| | | if (filterKey == item.name) { |
| | | filterKey = item.field |
| | | } |
| | | }) |
| | | |
| | | var tds = elem.next().find('.layui-table-body td[data-field="' + filterKey + '"]'); |
| | | //è·åè¿ä¸æ¬¡è¿æ»¤çå¹é
|
| | | var this_trsIndex = []; |
| | | tds.each(function (i, td) { |
| | | if ($.isArray(filterValue)) { |
| | | //è¿æ»¤å¼=æ°ç» inArray å¤éæ¡ |
| | | if ($.inArray($.trim(td.innerText), filterValue) >= 0 && filterValue && filterValue.length > 0) { |
| | | this_trsIndex.push($(td).parent().data("index")) |
| | | } |
| | | } else if (filterValue.indexOf(" - ") >= 0) { |
| | | //æ¯å¦å¨æ¶é´æ®µå
|
| | | var d = $.trim(td.innerText); |
| | | var s = filterValue.split(" - ")[0]; |
| | | var e = filterValue.split(" - ")[1]; |
| | | if (tableFilter.tool.isDuringDate(d, s, e)) { |
| | | this_trsIndex.push($(td).parent().data("index")) |
| | | } |
| | | } else { |
| | | //è¿æ»¤å¼=å符串 indexOf åéæ¡ è¾å
¥æ¡ |
| | | if ($.trim(td.innerText).indexOf(filterValue) >= 0) { |
| | | this_trsIndex.push($(td).parent().data("index")) |
| | | } |
| | | } |
| | | }) |
| | | //åæç»ç»æ åå¹¶æ°ç»åå»ç¸åå¼ |
| | | //ç¬¬ä¸æ¬¡ ä¸åå¹¶ |
| | | if (trsIndex.length <= 0) { |
| | | trsIndex = this_trsIndex |
| | | } else { |
| | | if (this_trsIndex.length > 0) { |
| | | //è¿ä¸æ¬¡æå¼ ååé¢N次åç¸åå¼ |
| | | trsIndex = tableFilter.tool.getSameArray(trsIndex, this_trsIndex); |
| | | } else { |
| | | //è¿ä¸æ¬¡æ²¡å¼ åé¢N次æå¼,妿åç¬¦ä¸²è¿æ»¤æªæå¼ å°±æ¾ç¤ºç©º |
| | | trsIndex = $.isArray(filterValue) ? trsIndex : []; |
| | | } |
| | | } |
| | | } |
| | | return tableFilter.tool.uniqueObjArray(trsIndex); |
| | | } |
| | | |
| | | //JSON æ°æ®è½¬layuiFOMR å¯ç¨ç å¤çcheckbox |
| | | tableFilter.toLayuiFrom = function (elemId, filterName, filterType) { |
| | | var form_val = JSON.stringify(tableFilter.cache[elemId]); |
| | | form_val = JSON.parse(form_val); |
| | | if (filterType == "checkbox") { |
| | | layui.each(form_val[filterName], function (i, value) { |
| | | form_val[filterName + "[" + value + "]"] = true; |
| | | }) |
| | | delete form_val[filterName]; |
| | | } |
| | | return form_val; |
| | | } |
| | | |
| | | //æ´æ°åè®¡è¡æ°æ® |
| | | tableFilter.updataTotal = function (elem) { |
| | | var elemId = elem.attr("id"); |
| | | table.eachCols(elemId, function (i, item) { |
| | | if (item.totalRow) { |
| | | var tdAllnum = 0; |
| | | var tds = elem.next().find('.layui-table-body td[data-field="' + item.field + '"]') |
| | | tds.each(function (i, td) { |
| | | if (!$(td).parent().hasClass('layui-hide')) { |
| | | //FIX JS计ç®ç²¾åº¦ |
| | | tdAllnum = (tdAllnum * 10 + Number($.trim(td.innerText)) * 10) / 10 |
| | | } |
| | | }) |
| | | var totalTds = elem.next().find('.layui-table-total td[data-field="' + item.field + '"]') |
| | | totalTds.each(function (i, td) { |
| | | $(td).find(".layui-table-cell").html(tdAllnum || "0") |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | //æ´æ°åºå·å |
| | | tableFilter.upNumbers = function (elem) { |
| | | //å½å第å 页 |
| | | var cur = elem.next().find('.layui-laypage-curr').text(); |
| | | cur = Number(cur || '1') |
| | | var limit = elem.next().find('.layui-laypage-limits select').val(); |
| | | limit = Number(limit) |
| | | |
| | | var trs = elem.next().find('.layui-table-main tr'); |
| | | var n = cur == 1 ? 0 : limit * (cur - 1); |
| | | |
| | | trs.each(function (i, tr) { |
| | | if (!$(tr).hasClass('layui-hide')) { |
| | | n += 1; |
| | | $(tr).find('.laytable-cell-numbers').html(n) |
| | | } |
| | | }) |
| | | |
| | | if (elem.next().find('.layui-table-fixed').length >= 1) { |
| | | var trs_f = elem.next().find('.layui-table-fixed .layui-table-body tr'); |
| | | var n_f = cur == 1 ? 0 : limit * (cur - 1); |
| | | |
| | | trs_f.each(function (i, tr_f) { |
| | | if (!$(tr_f).hasClass('layui-hide')) { |
| | | n_f += 1; |
| | | $(tr_f).find('.laytable-cell-numbers').html(n_f) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | //è¡¨æ ¼åæ¶éä¸ |
| | | tableFilter.uncheck = function (elem) { |
| | | var elemId = elem.attr("id"); |
| | | var tableName = elem.attr("lay-filter"); |
| | | |
| | | var trs = elem.next().find('.layui-table-fixed-l tr'); |
| | | trs.each(function (i, tr) { |
| | | var c = $(tr).find("[name='layTableCheckbox']"); |
| | | if (c.prop("checked")) { |
| | | $(tr).find('.layui-form-checked i').click() |
| | | } |
| | | }) |
| | | } |
| | | |
| | | //FIX è¡¨æ ¼å
¨ééä¸éè项 |
| | | tableFilter.fixAll = function (elem) { |
| | | var elemId = elem.attr("id"); |
| | | var tableName = elem.attr("lay-filter"); |
| | | var trs = elem.next().find('.layui-table-main tr'); |
| | | |
| | | table.on('checkbox(' + tableName + ')', function (obj) { |
| | | if (obj.type == "all") { |
| | | var data = table.cache[elemId]; |
| | | trs.each(function (i, tr) { |
| | | if ($(tr).hasClass('layui-hide')) { |
| | | data[i].LAY_CHECKED = false; |
| | | } |
| | | }) |
| | | |
| | | } |
| | | }) |
| | | |
| | | } |
| | | |
| | | //éèéæ©å¨ |
| | | tableFilter.hide = function () { |
| | | $('.layui-table-filter-view').remove(); |
| | | } |
| | | |
| | | //å·¥å
· |
| | | tableFilter.tool = { |
| | | //æ°ç»&对象æ°ç»å»é |
| | | 'uniqueObjArray': function (arr, type) { |
| | | var newArr = []; |
| | | var tArr = []; |
| | | if (arr.length == 0) { |
| | | return arr; |
| | | } else { |
| | | if (type) { |
| | | for (var i = 0; i < arr.length; i++) { |
| | | if (!tArr[arr[i][type]]) { |
| | | newArr.push(arr[i]); |
| | | tArr[arr[i][type]] = true; |
| | | } |
| | | } |
| | | return newArr; |
| | | } else { |
| | | for (var i = 0; i < arr.length; i++) { |
| | | if (!tArr[arr[i]]) { |
| | | newArr.push(arr[i]); |
| | | tArr[arr[i]] = true; |
| | | } |
| | | } |
| | | return newArr; |
| | | } |
| | | } |
| | | }, |
| | | //åå¹¶æ°ç»åç¸å项 |
| | | 'getSameArray': function (arry1, arry2) { |
| | | var newArr = []; |
| | | for (var i = 0; i < arry1.length; i++) { |
| | | for (var j = 0; j < arry2.length; j++) { |
| | | if (arry2[j] === arry1[i]) { |
| | | newArr.push(arry2[j]); |
| | | } |
| | | } |
| | | } |
| | | return newArr; |
| | | }, |
| | | 'isDuringDate': function (dateStr, beginDateStr, endDateStr) { |
| | | var curDate = new Date(dateStr), |
| | | beginDate = new Date(beginDateStr), |
| | | endDate = new Date(endDateStr); |
| | | if (curDate >= beginDate && curDate <= endDate) { |
| | | return true; |
| | | } |
| | | return false; |
| | | } |
| | | } |
| | | |
| | | //è¾åºæ¥å£ |
| | | exports(MOD_NAME, tableFilter); |
| | | }); |