$(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 = 'checkbox'; columnObj.data_4.searchType = 'checkbox'; columnObj.data_5.searchType = 'checkbox'; columnObj.data_6.searchType = 'checkbox'; columnObj.data_7.searchType = 'checkbox'; columnObj.data_8.searchType = 'checkbox'; columnObj.data_9.searchType = 'checkbox'; columnObj.data_10.searchType = 'checkbox'; columnObj.data_11.searchType = 'checkbox'; columnObj.data_12.searchType = 'checkbox'; columnObj.data_13.searchType = 'checkbox'; columnObj.data_14.searchType = 'checkbox'; columnObj.data_15.searchType = 'checkbox'; columnObj.data_16.searchType = 'checkbox'; columnObj.data_17.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(); }) });