$(document).ready(function () {
function getStrInsideNum(str) {
// return parseFloat(parseFloat(str.match(/(\d+|-\d+)\.?\d+/g)).toFixed(2));
return parseFloat(parseFloat(str.replace(/[^(\d.|\-\d.)]/g, "")).toFixed(2));
}
function getSearchDom(searchType, columnObj) {
var html = '';
switch (searchType) {
case 'input':
html = generateInputDom(columnObj);
break;
case 'checkbox':
html = generateCheckboxDom(columnObj);
break;
case 'range':
html = generateRangeDom(columnObj);
break
default:
html = generateInputDom(columnObj);
break;
}
return html;
}
function in_array(needle, array) {
for (var i in array) {
if (needle == array[i]) return i;
}
return false;
}
// var htmlobj = $.ajax({url: "./old_data.json", async: false}).responseJSON;
var columnObj = {};
$("#example-h > thead").find("th").each(function (i, item) {
if (!columnObj["data_" + i]) columnObj["data_" + i] = {};
columnObj["data_" + i]["title"] = $(item).html();
columnObj["data_" + i]["searchType"] = 'checkbox'; // 默认输入框搜索
});
// searchType:input / checkbox / range
columnObj.data_0.searchType = 'checkbox';
columnObj.data_1.searchType = 'checkbox';
columnObj.data_2.searchType = 'checkbox';
columnObj.data_3.searchType = 'range';
columnObj.data_4.searchType = 'range';
columnObj.data_5.searchType = 'range';
columnObj.data_6.searchType = 'range';
columnObj.data_7.searchType = 'range';
columnObj.data_8.searchType = 'checkbox';
columnObj.data_9.searchType = 'range';
columnObj.data_10.searchType = 'range';
columnObj.data_11.searchType = 'range';
columnObj.data_12.searchType = 'checkbox';
columnObj.data_13.searchType = 'checkbox';
columnObj.data_14.searchType = 'checkbox';
var htmlobj = [];
$("#example-h > tbody").find("tr").each(function (i, item) {
var dataObj = {};
$(item).find("td").each(function (iTd, itemTd) {
dataObj["data_" + iTd] = $(itemTd).html();
});
if (dataObj) htmlobj.push(dataObj);
});
var firstObj = htmlobj[0]; // 获取表头字段
var keys = Object.keys(firstObj);
var columns = [];
var searchAgg = [];
var searchHtml = '';
for (var i = 0; i < keys.length; i++) {
var column = {};
column.data = keys[i];
column.title = columnObj[keys[i]] == undefined ? keys[i] : columnObj[keys[i]].title; // 表头名称
columns.push(column);
var searchType = columnObj[keys[i]] == undefined ? 'input' : columnObj[keys[i]].searchType; // 搜索类型
var polymerization = {};
var max = '';
var min = '';
// if (searchType === "checkbox" || searchType === "range") {
// 聚合
for (var j = 0; j < htmlobj.length; j++) {
var name = htmlobj[j][keys[i]].replace(/<[^>]+>/g, '');
if (typeof (polymerization[name]) == "undefined") {
polymerization[name] = 1;
} else {
polymerization[name] += 1;
}
if (min === '') min = getStrInsideNum(name);
if (max === '') max = getStrInsideNum(name);
if (getStrInsideNum(name) <= min) min = getStrInsideNum(name);
if (getStrInsideNum(name) >= max) max = getStrInsideNum(name);
}
// }
var searchObj = {
title: column.title,
name: keys[i],
polymerization: polymerization,
min: min,
max: max,
columnIdx: i,
query: {
filterArr: [],
filter: null,
},
searchType: searchType,
pageLength: 20,
};
searchObj.dom = getSearchDom(searchType, searchObj);
// searchAgg[keys[i]].searchObj = searchObj;
searchAgg.push(searchObj);
searchHtml += searchObj.dom;
}
$("#react-tabs-1 .filter-tab").append(searchHtml);
var table = null;
var option = {
data: htmlobj,
columns: columns,
searchPanes: {
layout: 'columns-1'
},
// dom: '<"dtsp-dataTable"Bfrtip>',
dom: '<"top"Bfr>t<"bottom"lip><" ">',
pageLength: 20,
lengthMenu: [10, 20, 50, 75, 100],
language: { // 定义语言
"sProcessing": "加载中...",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有匹配的结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
buttons: [{
extend: 'excelHtml5',
text: '
Excel',
// 控制导出当前页
// exportOptions: {
// modifier: {
// page: 'current'
// }
// }
// customize: function( xlsx ) {
// const sheet = xlsx.xl.worksheets['sheet1.xml'];
// const rows = $('row', sheet);
// let cols = $('cols', sheet);
// let cols_len = cols.find("col").length
// console.log(sheet)
// //一、 创建_rels目录 ------------
// xlsx.xl.worksheets._rels = {};
// //sheet1.xml.rels文件
// var xmlString = '';
// var parser = new DOMParser();
// var relsXmlDoc = parser.parseFromString(xmlString, 'application/xml');
// xlsx.xl.worksheets._rels['sheet1.xml.rels'] = relsXmlDoc;
// // 创建sheet1.xml.rels文件的根标签
// var rels = relsXmlDoc.getElementsByTagName('Relationships')[0];
// //一、 ------------
// // 二、添加一列+重置表格宽度----------------
// // 1.添加一列
// var cols_0 = sheet.getElementsByTagName('cols')[0];
// var col = sheet.createElement('col');
// col.setAttribute('min', cols_len+1);
// col.setAttribute('max', cols_len+1);
// col.setAttribute('width', 11);
// col.setAttribute('customWidth', 1);
// cols_0.appendChild(col);
// // 2.重置表格宽度
// cols = $(sheet).find('cols');
// var colList = cols.children('col');
// // 临时存储列宽度
// let temp_sum = []
// // 设置所有列的 width 和 customWidth 属性
// var colWidth = 20; // 每列的宽度(单位:字符)
// colList.each(function(index, col) {
// var $col = $(col);
// temp_sum[index]=$col.attr('width')
// });
// colList.each(function(index, col) {
// var $col = $(col);
// if(index==0){
// return
// }
// if(index==1){
// $col.attr('width',11)
// }
// if(index>=2){
// $col.attr('width',temp_sum[index-1])
// }
// })
// //二、----------------
// // 三、单元格从第2列开始全部往后退一位,腾出位置 ,第二行开始 + 插入第二列内容 ----------------
// rows.slice(1).each(function(index, row) {
// var cells = $(row).find('c');
// // 1.腾出位置 更新所有单元格的 r 属性以反映它们的新位置
// cells.each(function(index, cell) {
// var oldR = $(cell).attr('r');
// if (!oldR) return;
// var colIndex = oldR.match(/[A-Z]+/)[0];
// var rowIndex = oldR.match(/\d+/)[0];
// if (colIndex.charCodeAt(0) >= 'B'.charCodeAt(0)) {
// $(cell).attr('r', String.fromCharCode(colIndex.charCodeAt(0) + 1) + rowIndex);
// }
// });
// // 2.插入第二列内容
// if(index == 0){
// cells.eq(0).after(' PDF');
// }else{
// cells.eq(0).after(' DataSheet');
// }
// })
// // 三、--------------------------
// //四、给第二列每个单元格添加超链接--------------
// // 1.
// // 创建超链接
// var hyperlinks = sheet.createElement('hyperlinks');
// rows.slice(2).each(function(index, row) {
// // 在 hyperlinks 元素中创建新的 hyperlink 元素
// var hyperlink = sheet.createElement('hyperlink');
// hyperlink.setAttribute('ref', `B${index+3}`);
// hyperlink.setAttribute('r:id', `rId${index+1}`);
// hyperlink.setAttribute('display', 'DataSheet');
// hyperlinks.appendChild(hyperlink);
// let cells = $(row).find('c');
// let text = cells.eq(0).find('t').text()
// // 使用正则表达式匹配 URL 链接和前面的字符串
// var match = text.match(/(.+)(https?:\/\/[\w\.\-\/%()]+)/);
// // 如果找到了匹配,则将字符串和链接分别保存到变量中
// if (match) {
// var str = match[1].trim(); // 前面的字符串
// var url = match[2]; // URL 链接
// cells.eq(0).find("t").text(str)
// // 现在,str 变量包含了 URL 链接前面的字符串,url 变量包含了 URL 链接
// var encodedUrl = encodeURI(url)
// console.log(str);
// console.log(url);
// }
// // 2.
// // 创建新的 Relationship 元素并添加到 .xml.rels 文件的 DOM 中
// var rel = relsXmlDoc.createElement('Relationship');
// rel.setAttribute('Id', `rId${index+1}`);
// rel.setAttribute('Type', 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink');
// rel.setAttribute('Target', `${encodedUrl}`);
// rel.setAttribute('TargetMode', 'External');
// rels.appendChild(rel);
// })
// // 3.
// // !!!!! the hyperlinks must be the position that is After the mergecells tags
// $(sheet).find('mergeCells').after(hyperlinks);
// // 四、-------------------
// }
}],
//, {
// extend: 'pdf',
// text: '导出pdf',
// }
// searching:false,
// autoWidth:false,
scrollX: true,
fixedColumns: true,
};
// pdfMake.fonts = {
// simhei: {
// normal: "simhei.ttf",
// bold: "simhei.ttf",
// italics: "simhei.ttf",
// bolditalics: "simhei.ttf",
// },
// Roboto: {
// normal: "simhei.ttf",
// bold: "simhei.ttf",
// italics: "simhei.ttf",
// bolditalics: "simhei.ttf",
// }
// }
table = $("#example").DataTable(option);
// table.searchPanes();
// table.buttons().container().appendTo($("#table-top"));
$(".ifx-accordion__header__icon").click(function () {
var accordion__body_obj = $(this).parents(".ifx-accordion").children(".ifx-accordion__body");
if ($(this).hasClass("glyphicon-arrow-up-bold")) {
$(this).removeClass("glyphicon-arrow-up-bold");
$(this).parents(".ifx-accordion__header").children(".ifx-accordion__header__label").removeClass("active");
accordion__body_obj.hide();
} else {
$(this).addClass("glyphicon-arrow-up-bold");
$(this).parents(".ifx-accordion__header").children(".ifx-accordion__header__label").addClass("active");
accordion__body_obj.show();
}
});
$(".ifx-accordion__header__label").click(function () {
var accordion__body_obj = $(this).parents(".ifx-accordion").children(".ifx-accordion__body");
var header_upDown_icon_obj = $(this).parents(".ifx-accordion__header").children(".ifx-accordion__header__icon");
if (header_upDown_icon_obj.hasClass("glyphicon-arrow-up-bold")) {
header_upDown_icon_obj.removeClass("glyphicon-arrow-up-bold");
$(this).removeClass("active");
accordion__body_obj.hide();
} else {
header_upDown_icon_obj.addClass("glyphicon-arrow-up-bold");
accordion__body_obj.show();
$(this).addClass("active");
}
});
$(".show__column").click(function () {
var column_visible = null;
if ($(this).hasClass("hide__column")) {
$(this).removeClass("hide__column");
column_visible = true;
} else {
$(this).addClass("hide__column");
column_visible = false;
}
table.column($(this).parents(".ifx-filter").attr('data-column')).visible(column_visible);
});
var globalFilter = null;
$(".glyphicon-search").click(function () {
var p = $(this).parents(".ifx-pt-search");
var val = p.children(".ifx-pt-search__input").val();
var dataColumn = p.parents(".ifx-filter").attr("data-column");
if (dataColumn != undefined) {
var idx = parseInt(dataColumn);
searchAgg[idx]["query"]["filter"] = val == undefined ? '' : val;
} else {
globalFilter = val == undefined ? '' : val;
}
searchTable();
});
function gensSelectInputText(val, columnIdx) {
var keys = Object.keys(searchAgg[columnIdx].polymerization);
var html = "";
for (var i in keys) {
if (keys[i].indexOf(val) != -1) {
html += "" + keys[i] + "";
}
}
return html;
}
$(".ifx-accordion__body .ifx-pt-search__input").on("input propertychange click", function () {
var columnIdx = $(this).parents(".ifx-filter").attr("data-column");
var val = $(this).val();
var html = gensSelectInputText(val, columnIdx);
$(this).parents(".ifx-pt-search").children(".ifx-search-type-input").html(html);
$(this).parents(".ifx-pt-search").children(".ifx-search-type-input").show();
});
$(".ifx-accordion__body .ifx-pt-search").on("click", ".select-input-text", function () {
$(this).parents(".ifx-pt-search").children("input[name=text-search]").val($(this).text());
var columnIdx = $(this).parents(".ifx-filter").attr("data-column");
var val = $(this).text();
var html = gensSelectInputText(val, columnIdx);
$(this).parents(".ifx-pt-search").children(".ifx-search-type-input").html(html);
});
$(".ifx-checkbox input").change(function () {
var p = $(this).parents(".ifx-pt-search");
var val = $(this).val();
val = val == undefined ? '' : val;
var dataColumn = p.parents(".ifx-filter").attr("data-column");
var idx = parseInt(dataColumn);
if (val) {
if ($(this).is(":checked")) {
if (in_array(val, searchAgg[idx]["query"]["filterArr"]) === false) {
searchAgg[idx]["query"]["filterArr"].push(val);
}
$(this).parents(".ifx-checkbox").addClass("active");
} else {
var i = in_array(val, searchAgg[idx]["query"]["filterArr"]);
if (i !== false) searchAgg[idx]["query"]["filterArr"].splice(i, 1);
$(this).parents(".ifx-checkbox").removeClass("active");
}
}
if (searchAgg[idx]["query"]["filterArr"].length > 0) {
searchAgg[idx]["query"]["filterArr"].sort((a, b) => {
// 按照版本号的降序进行排序
return b.localeCompare(a);
});
searchAgg[idx]["query"]["filter"] = searchAgg[idx]["query"]["filterArr"].join("|");
// searchAgg[idx]["query"]["filter"] = searchAgg[idx]["query"]["filterArr"].join("&");
} else {
searchAgg[idx]["query"]["filter"] = '';
}
// todo 调用查询
searchTable();
});
$(".ifx-inputRange__range__slider").mousedown(function (ev) {
var p = $(this).parents(".ifx-inputRange__range__sliderContainer");
var sliderTag = p.attr("data-sliderTag");
var currentLeft = parseInt(p.css("left"));
var domWidth = parseInt(p.parent(".ifx-inputRange__range__track").css("width"));
if (sliderTag === "left") {
var minLeft = 0;
var maxLeft = parseInt(p.next(".ifx-inputRange__range__sliderContainer").css("left")) - 18;
p.attr("data-maxLeft", maxLeft);
} else {
var minLeft = parseInt(p.prev(".ifx-inputRange__range__sliderContainer").css("left")) + 18;
p.attr("data-minLeft", minLeft);
var maxLeft = domWidth;
}
// 获取鼠标按下的坐标
var x1 = ev.clientX;
// 鼠标区域内移动
p.parents(".ifx-inputRange__range").mousemove(function (e) {
//获取鼠标移动时的坐标
var x2 = e.clientX;
var x = x2 - x1;
var afterMovingLeft = currentLeft + x;
if (afterMovingLeft < minLeft) afterMovingLeft = minLeft;
if (afterMovingLeft > maxLeft) afterMovingLeft = maxLeft;
var left = afterMovingLeft + 'px';
p.css("left", left);
// 当前块的字段最大值
var valuemax = parseFloat($(this).children("input[name=460_maxMax]").val());
// 当前块的字段最小值
var valuemin = parseFloat($(this).children("input[name=460_maxMin]").val());
// 计算当前值
var a = afterMovingLeft / (domWidth - 18);
var currentValue = valuemin + (valuemax - valuemin) * a;
if (currentValue > valuemax) currentValue = valuemax;
var selector = "input[name=" + sliderTag + "]:eq(0)";
$(this).parents(".ifx-inputRange").find(selector).val(currentValue.toFixed(2));
});
p.parents(".ifx-inputRange__range").mouseup(function () {
p.parents(".ifx-inputRange__range").unbind('mousemove');
rangeSearch($(this));
});
p.parents(".ifx-inputRange__range").mouseleave(function () {
p.parents(".ifx-inputRange__range").unbind('mousemove');
rangeSearch($(this));
});
});
$(window).parents(".ifx-inputRange__range").mouseup(function () {
p.parents(".ifx-inputRange__range").unbind('mousemove');
});
// 范围搜索
function rangeSearch(obj) {
var columnIdx = obj.parents(".ifx-filter").attr("data-column");
searchAgg[columnIdx]["query"]["filter"] = {};
searchAgg[columnIdx]["query"]["filter"].left = obj.parents(".ifx-inputRange").find("input[name=left]").val();
searchAgg[columnIdx]["query"]["filter"].right = obj.parents(".ifx-inputRange").find("input[name=right]").val();
// todo 调用查询
searchTable();
}
$("input[data-tag=range]").on("input propertychange", function () {
var val = $(this).val();
// 当前块的字段最大值
var valuemax = parseFloat($(this).parents(".ifx-inputRange").find("input[name=460_maxMax]").val());
var valuemin = parseFloat($(this).parents(".ifx-inputRange").find("input[name=460_maxMin]").val());
var pLeft = (parseFloat(val) - valuemin) / (valuemax - valuemin);
pLeft = parseFloat(pLeft.toFixed(2));
var width = parseFloat($(this).parents(".ifx-inputRange").css("width"));
var maxpLeft = 1;
var minpLeft = 0;
var name = $(this).attr("name");
if (name === "left") {
if (pLeft <= 0) {
pLeft = minpLeft;
} else {
var domName = ".ifx-inputRange__range__sliderContainer[data-slidertag=right]";
var rightP = parseFloat($(this).parents(".ifx-inputRange").find(domName).eq(0).css("left"));
maxpLeft = ((rightP - 18) / width).toFixed(2);
if (pLeft > maxpLeft) pLeft = parseFloat(maxpLeft);
}
} else {
if (pLeft >= 1) {
pLeft = maxpLeft;
} else {
var domName = ".ifx-inputRange__range__sliderContainer[data-slidertag=left]";
var leftP = parseFloat($(this).parents(".ifx-inputRange").find(domName).eq(0).css("left"));
minpLeft = ((leftP + 18) / width).toFixed(2);
if (pLeft < minpLeft) pLeft = parseFloat(minpLeft);
}
}
var position = pLeft * 100 + "%";
var domName = ".ifx-inputRange__range__sliderContainer[data-slidertag=" + name + "]";
$(this).parents(".ifx-inputRange").find(domName).eq(0).css("left", position);
rangeSearch($(this));
});
$(".ifx-pt-search-reset").click(function () {
var columnIdx = $(this).parents(".ifx-filter").attr("data-column");
var mData = columns[columnIdx].mData;
var searchType = columnObj[mData].searchType ? columnObj[mData].searchType : 'input';
var searchObj = searchAgg[columnIdx];
// input checkbox range
if (searchType === "input") {
$(this).parents(".ifx-accordion__body").find("input").val('');
$(this).parents(".ifx-accordion__body").find(".glyphicon-search").click();
$(this).parents(".ifx-accordion__body").find(".ifx-search-type-input").hide();
}
if (searchType === "checkbox") {
$(this).parents(".ifx-accordion__body").find("input:checkbox").each(function (i, item) {
$(item).prop("checked", false);
});
var idx = parseInt($(this).parents(".ifx-filter").attr("data-column"));
searchAgg[idx]["query"]["filterArr"] = [];
searchAgg[idx]["query"]["filter"] = "";
searchTable();
}
if (searchType === "range") {
$(this).parents(".ifx-accordion__body").find(".ifx-inputRange__range__sliderContainer").eq(0).css("left", 0);
$(this).parents(".ifx-accordion__body").find(".ifx-inputRange__range__sliderContainer").eq(1).css("left", "100%");
$(this).parents(".ifx-accordion__body").find("input[name=right]:eq(0)").val(searchObj.max);
$(this).parents(".ifx-accordion__body").find("input[name=left]:eq(0)").val(searchObj.min);
rangeSearch($(this).parents(".ifx-accordion__body").find("input[name=right]:eq(0)"));
}
});
function searchTable() {
$.fn.dataTable.ext.search.pop();
for (var i = 0; i <= searchAgg.length; i++) {
$.fn.dataTable.ext.search.pop();
}
if (globalFilter != null) table.search(globalFilter);
for (var j in searchAgg) {
var searchObj = searchAgg[j];
var query = searchObj.query;
if (searchObj.searchType === "input" || searchObj.searchType === "checkbox") {
if (query.filter != null) {
// var queryFilter = query.filter.replace(/\//g, '\/')
// .replace(RegExp("\\+","g"),"\\+")
// .replace(RegExp("\\*","g"),"\\*")
// table.columns(searchObj.columnIdx).search(queryFilter,true,false).draw();
$.fn.dataTable.ext.search.push(function (searchObj) {
return function (settings, data, dataIndex) {
if(searchObj.query.filterArr.length<=0) return true
var queryFilter = searchObj.query.filter.replace(/\//g, '\/')
.replace(RegExp("\\+","g"),"\\+")
.replace(RegExp("\\*","g"),"\\*")
/**
* @description 转义函数 :例如3.5 的点 要转义,否则触发正则表达式匹配任意单个字符,错误,因此转化
* @param {*} inputString
* @returns
*/
function escapeDot(inputString) {
// 使用正则表达式将点号转义为 "\."
return inputString.replace(/\./g, "\\.");
}
const escapedString = escapeDot(queryFilter);
//将转义后的字符串再传入
var reg = data[searchObj.columnIdx].match(RegExp(escapedString))
if (reg === null) return false
if(reg[0] === reg['input']) return true
return false
}
}(searchObj));
}
}
if (searchObj.searchType === "range") {
if (query.filter != null) {
$.fn.dataTable.ext.search.push(function (searchObj) {
return function (settings, data, dataIndex) {
var columnVal = getStrInsideNum(data[searchObj.columnIdx]);
var left = parseFloat(searchObj.query.filter.left);
if(isNaN(left)) left = 0;
var right = parseFloat(searchObj.query.filter.right);
if(isNaN(right)) right = 0;
return columnVal >= left && columnVal <= right;
}
}(searchObj));
}
}
}
table.draw();
}
$(".global_reset__but").on("click", function () {
for (var i in searchAgg) {
var obj = $(".ifx-filter[data-column=" + searchAgg[i].columnIdx + "]");
if (searchAgg[i].searchType === "input") {
obj.find("input").val('');
obj.find(".ifx-search-type-input").hide();
searchAgg[i].query.filterArr = [];
searchAgg[i].query.filter = '';
}
if (searchAgg[i].searchType === "checkbox") {
obj.find("input:checkbox").each(function (i, item) {
$(item).prop("checked", false);
});
searchAgg[i].query.filterArr = [];
searchAgg[i].query.filter = '';
}
if (searchAgg[i].searchType === "range") {
obj.find(".ifx-inputRange__range__sliderContainer").eq(0).css("left", 0);
obj.find(".ifx-inputRange__range__sliderContainer").eq(1).css("left", "100%");
obj.find("input[name=right]:eq(0)").val(searchAgg[i].max);
obj.find("input[name=left]:eq(0)").val(searchAgg[i].min);
searchAgg[i].query.filterArr = [];
searchAgg[i].query.filter = {};
searchAgg[i].query.filter.left = searchAgg[i].min;
searchAgg[i].query.filter.right = searchAgg[i].max;
}
}
$(".ifx-gl-search").find("input").val("");
globalFilter = "";
searchTable();
})
});