操作场景
表单筛选,常配合搜索框、下拉框或者时间选择等交互组件来对包含大量数据的表格或者图表内容进行筛选呈现,并且把筛选后的数据结果导出为本地文件。
实现效果
输入框查询姓名,下拉框选择工作地,时间选择器选择入职时间。
示例:可以实现输入框输入李四,下拉框工作地选择上海,入职时间选择2017年4月。
单击查询,则可以把满足这三个条件的李四的表格数据筛选出来。
单击导出,则可以把满足这几个条件下的数据,导出本地。




操作步骤
1. 在管理中心页面,单击添加数据源,格式选择离线文件,上传一个模拟的 Excel(例如 xlsx 格式)的部门成员信息表。
员工编号 | 姓名 | 工作地 | 部门 | 岗位 | 入职时间 |
1000 | 成大 | 深圳 | 销售部 | 销售 | 2015年3月 |
1001 | 张三 | 北京 | 研发部 | 前端 | 2015年3月 |
1002 | 李四 | 程度 | 产品部 | 产品经理 | 2016年7月 |
1003 | 王五 | 北京 | 产品部 | 运营 | 2020年9月 |
1004 | 张一 | 上海 | 销售部 | 销售 | 2018年3月 |
1005 | 李四 | 上海 | 销售部 | 销售 | 2018年3月 |
1006 | 李四 | 上海 | 研发部 | 后端 | 2017年4月 |
2. 在编辑页面,添加表格组件,数据类型选择离线文件,选择部门成员信息表,新建 a、b、c 三个变量,默认值设置为空,由于上传的 Excel 表格的数据结构与 Web 内表格数据结构的不匹配,添加一个包含 a、b、c 变量引用的过滤器,过滤器内容如下:
function findTableDataResultFinal(option, dataSource) {// 变量设置var tablePanel = [{}], currentDataList = dataSource;var r = getCurrentLengthFinal(option, currentDataList);var hederIndex = "";if (option.hPosition === "top" || option.hPosition === "left" || option.hPosition === "" || option.hPosition === "none" || !option.hPosition) {hederIndex = "0";} else if (option.hPosition === "bottom") {hederIndex = "" + r.h - 1;} else if (option.hPosition === "right") {hederIndex = "" + r.w - 1;}// 数据为空时候if (currentDataList.length === 0) {tablePanel = drawTablePanelFinal(r.w, r.h);}if (currentDataList && Array.isArray(currentDataList)) {// 绘制表格格式tablePanel = drawTablePanelFinal(r.w, r.h);// 表头var hederList = option.headerType === "static" ? option.headerNameList : [];// 表头数据设置for (var i in hederList) {if (option.hPosition === "left" || option.hPosition === "right") {tablePanel[i]["cells"][hederIndex]["text"] = hederList[i];} else if (option.hPosition === "top" || option.hPosition === "bottom" || option.hPosition === "" || option.hPosition === "none" || !option.hPosition) {tablePanel[hederIndex]["cells"][i]["text"] = hederList[i];}}if ((option.hPosition === "top" || option.hPosition === "left" || option.hPosition === "" || option.hPosition === "none" || !option.hPosition) && option.headerType != "none" && option.headerType) {n = 1;} else {n = 0;}// 源数据循环currentDataList.forEach(function (item, index) {for (var i in option.cellsFieldNameList) {var key = option.cellsFieldNameList[i], v = item[key] != null ? item[key] : '';if (option.hPosition === "left" || option.hPosition === "right") {tablePanel[i]["cells"][n]["text"] = v;} else {tablePanel[n]["cells"][i]["text"] = v;}}n++;})} else {tablePanel = drawTablePanelFinal(r.w, 1);var hederList = option.headerType === "static" ? option.headerNameList : [];for (var i in hederList) {if (option.hPosition === "left" || option.hPosition === "right") {tablePanel[i]["cells"][hederIndex]["text"] = hederList[i];} else {tablePanel[hederIndex]["cells"][i]["text"] = hederList[i];}}for (var i in option.cellsFieldNameList) {var key = option.cellsFieldNameList[i], v = currentDataList[key] != null ? currentDataList[key] : 0;if (option.hPosition === "left" || option.hPosition === "right") {tablePanel[i]["cells"][hederIndex]["text"] = hederList[i];} else {tablePanel[0]["cells"][i]["text"] = v;}}}return tablePanel;}function getCurrentLengthFinal(option, dataSource) {var r = { w: 1, h: 1 };var obj = [];if (dataSource && Array.isArray(dataSource)) {if (option.fn) { dataSource.forEach(function (item) { if (option.fn(item)) obj.push(item); }) }else { obj = dataSource; }} else {obj = dataSource}if (option.hPosition === "top" || option.hPosition === "bottom" || !option.hPosition) {r.w = option.headerType === "static" ? option.headerNameList.length : option.cellsFieldNameList.length;r.h = option.headerType === "static" ? obj.length + 1 : obj.length;}if (option.hPosition === "left" || option.hPosition === "right") {var headerType = option.headerTyper.w = headerType === "static" ? obj.length + 1 : obj.lengthr.h = headerType === "static" || headerType === "none" || !headerType ? option.headerNameList.length : r.h}return r}function drawTablePanelFinal(width, height) {var row, cell, row = { "cells": {} }, cell = {};for (var i = 0; i < width; i++) row['cells'][i] = { "text": null };for (var i = 0; i < height; i++) cell[i] = JSON.parse(JSON.stringify(row));return cell;}function calculate(arrValue,data){if(!Array.isArray(data)){let e=[];e.push(data),data=e}return arrValue.forEach(handleValue=>{switch(handleValue.defaultType){case 0:switch(handleValue.dealType){case 2:data.forEach((e,t)=>{data[t][handleValue.fieldDesc.filed]=e[handleValue.fieldDesc.filed].toString().replaceAll(handleValue.config.field1,handleValue.config.field2)});break;case 3:data.forEach((e,t)=>{data[t][handleValue.fieldDesc.filed]=e[handleValue.fieldDesc.filed].toString().replaceAll(handleValue.config.field1,"")});break}break;case 1:let arr=[0,1,2,3,4,5,"+","-","*","/",10,"%"];10==handleValue.dealType?data.forEach((e,t)=>{let a=Math.round(parseFloat(e[handleValue.fieldDesc.filed])*Math.pow(10,handleValue.config.field1))/Math.pow(10,handleValue.config.field1);data[t][handleValue.fieldDesc.filed]=a.toFixed(handleValue.config.field1)}):handleValue.dealType&&data.forEach((item,index)=>{const d=(""+item[handleValue.fieldDesc.filed]).split(".").length>1?(""+item[handleValue.fieldDesc.filed]).split(".")[1].length:0,d1=(""+handleValue.config.field1).split(".").length>1?(""+handleValue.config.field1).split(".")[1].length:0;let pow=7==handleValue.dealType||6==handleValue.dealType?d>d1?d:d1:8==handleValue.dealType?d+d1:d1-d;if(7==handleValue.dealType||6==handleValue.dealType)data[index][handleValue.fieldDesc.filed]=eval(`(((${parseFloat(item[handleValue.fieldDesc.filed])} * ${Math.pow(10,pow)}) ${arr[handleValue.dealType]} (${parseFloat(handleValue.config.field1)} * ${Math.pow(10,pow)}))/ ${Math.pow(10,pow)}).toFixed(${pow})`);else if(8==handleValue.dealType||9==handleValue.dealType){const filed=(""+item[handleValue.fieldDesc.filed]).replace(".",""),filed1=(""+handleValue.config.field1).replace(".","");data[index][handleValue.fieldDesc.filed]=eval(8==handleValue.dealType?`(${Number(filed)} ${arr[handleValue.dealType]} ${Number(filed1)}) ${arr[9]} ${Math.pow(10,pow)}`:numMulti(Number(filed)/Number(filed1),Math.pow(10,pow)))}else data[index][handleValue.fieldDesc.filed]=eval(`parseInt(${parseFloat(item[handleValue.fieldDesc.filed])} ${arr[handleValue.dealType]} ${parseFloat(handleValue.config.field1)})`)});break;case 2:let arrD=["yyyy","yyyy年","yyyy年MM月","yyyy-MM","yyyy/MM","yyyy年MM月dd日","yyyy-MM-dd","yyyy/MM/dd","yyyy.MM.dd","MM","MM月","MM月dd日","MM/dd","MM-dd","MM.dd","dd日","dd"];data.forEach((e,t)=>{handleValue.dealType?data[t][handleValue.fieldDesc.filed]=dateformatFunc(e[handleValue.fieldDesc.filed],arrD[Number(handleValue.dealType)-12]):data[t][handleValue.fieldDesc.filed]=e[handleValue.fieldDesc.filed]});break;default:break}}),data;function numMulti(e,t){var a=0;try{a+=e.toString().split(".")[1].length}catch(s){}try{a+=t.toString().split(".")[1].length}catch(s){}return Number(e.toString().replace(".",""))*Number(t.toString().replace(".",""))/Math.pow(10,a)}}function dateformatFunc(e,t){var a=new Date(e),s=a.getFullYear(),i=a.getMonth()+1,o=a.getDate();return t=t.replace("yyyy",s).replace("MM",(""+i).length>1?i:"0"+i).replace("dd",(""+o).length>1?o:"0"+o),t}function dataSourceProcess(data, args) {if (args.a) {data = data.filter(o => o["姓名"] == args.a);}if (args.b) {data = data.filter(o => o["工作地"] == args.b);}if (args.c) {data = data.filter(o => o["入职时间"] == args.c);}return data}var logicItem = [{"name":"员工编号","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13348,"fieldDesc":{"filedId":13348,"dataItemConfigId":0,"filed":"id","mapName":"员工编号","content":""}},{"name":"姓名","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13349,"fieldDesc":{"filedId":13349,"dataItemConfigId":0,"filed":"姓名","mapName":"姓名","content":""}},{"name":"工作地","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13351,"fieldDesc":{"filedId":13351,"dataItemConfigId":0,"filed":"工作地","mapName":"工作地","content":""}},{"name":"部门","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13350,"fieldDesc":{"filedId":13350,"dataItemConfigId":0,"filed":"部门","mapName":"部门","content":""}},{"name":"岗位","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13352,"fieldDesc":{"filedId":13352,"dataItemConfigId":0,"filed":"岗位","mapName":"岗位","content":""}},{"name":"入职时间","defaultType":0,"config":{"field1":"","field2":"","isEdit":false},"source":13353,"fieldDesc":{"filedId":13353,"dataItemConfigId":0,"filed":"入职时间","mapName":"入职时间","content":""}}]data = dataSourceProcess(data, args)data = calculate(logicItem, data)var option = {"path":"","cellsFieldNameList":["id","姓名","工作地","部门","岗位","入职时间"],"headerNameList":["员工编号","姓名","工作地","部门","岗位","入职时间"],"headerType":"static","hPosition":"top"}return findTableDataResultFinal(option, data)
3. 添加一个输入框、一个下拉框、一个时间选择器,及两个文本框,两个矩形(用来模拟查询按钮,及导出按钮)。
4. 下拉框组件,数据类型选择离线文件,选择部门成员信息表,字段映射 content,映射工作地,单击提交,下拉框显示工作地。
5. 给查询按钮绑定交互事件,触发条件选择单击,实现动作选择变量赋值:
让 a 关联输入框的 content 字段。
b 关联下拉框的 content 字段。
c 关联时间选择器的 time 字段。

6. 给导出按钮绑定交互事件,触发条件选择单击,实现动作选择导出,导出格式选择 xlsx,设置完成后,单击确定。


7. 单击预览,输入框输入李四,下拉框工作地选择上海,时间选择器的入职时间选择2017年4月。单击查询,可筛选出符合该三个限定条件的数据,单击导出,可把符合该三个限定条件的数据下载到本地。

说明:
上方为了方便用户体验完整流程,选择离线文件的数据类型来实现,也可使用其他类型的数据源。