13 Star 61 Fork 27

sakuya / TableFilter

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
tableFilter.js 16.51 KB
一键复制 编辑 原始数据 按行查看 历史
sc 提交于 2020-04-17 13:23 . ADD
/**
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);
});
JavaScript
1
https://gitee.com/lolicode/TableFilter.git
git@gitee.com:lolicode/TableFilter.git
lolicode
TableFilter
TableFilter
master

搜索帮助