效果图

步骤

1，前端设置url 2，后端根据传递参数，查询表的元字段数据，传入前端 3，前端接收数据，遍历循环放入列中

代码

前端代码：

var cols = []; function dydatagrid() { if(!interId){ dLong.layerInfo("请选择接口！"); return; } var postdata={ interId: interId } dLong.getJSON("/BaexportController/toList",postdata,function(data){ if (data.success) { cols = [];// 初始化 $.each(data.fielddata,function(index,row){ cols.push({field: row.code, title: row.name,sort:'true',align:'center',width: 140}); // 元数据标题栏设置 }); // var obj2 = deepClone(data.griddata); hstable(data.griddata,true) //数据 }else { hstable([]) } },true); } // 导出接口数据导出存储表格 function hstable(data) { var table = layui.table; var ins1=table.render({ elem: '#hstable', height: "full-70", size: 'sm' , filter:{ bottom:false }, totalRow: true , totalRowAll: true , page: true, limit:200, limits:[15,30,50,100,200,500,1000,2000,5000,10000], cols: [[cols]], // 作为一个参数赋予进去 data: data? data : [], // done: function (res, curr, count) { // layui.soulTable.render(this) // var layuitabletotal = $("div[lay-id='hstable']").children(".layui-table-total"); // var totalje=layuitabletotal.find("td[data-field='totalincome']").children("div").text(); // var allcost=layuitabletotal.find("td[data-field='totalcost']").children("div").text(); // // var totalincomeone=layuitabletotal.find("td[data-field='totalincomeone']").children("div").text(); // var totalcostone=layuitabletotal.find("td[data-field='totalcostone']").children("div").text(); // var actualbalanceone=layuitabletotal.find("td[data-field='actualbalanceone']").children("div").text(); // var totalincomeoneavg=parseFloat(totalincomeone.replaceAll(",",""))/parseFloat(data.length); // var totalcostoneavg=parseFloat(totalcostone.replaceAll(",",""))/parseFloat(data.length); // var actualbalanceoneavg=parseFloat(actualbalanceone.replaceAll(",",""))/parseFloat(data.length); // // var surplusone=parseFloat(totalje.replaceAll(",",""))-parseFloat(allcost.replaceAll(",","")); // var incomeCostRate=parseFloat(allcost.replaceAll(",",""))/parseFloat(totalje.replaceAll(",","")); // layuitabletotal.find("td[data-field='surplusone']").children("div").text(surplusone.toFixed(2)) // layuitabletotal.find("td[data-field='incomeCostRate']").children("div").text(incomeCostRate.toFixed(4)) // // layuitabletotal.find("td[data-field='totalincomeone']").children("div").text("平均数："+totalincomeoneavg.toFixed(2)) // layuitabletotal.find("td[data-field='totalcostone']").children("div").text("平均数："+totalcostoneavg.toFixed(2)) // layuitabletotal.find("td[data-field='actualbalanceone']").children("div").text("平均数："+actualbalanceoneavg.toFixed(2)) // // } }); } // 定义一个深拷贝函数 使用了对象的引用对象的时候，使用深拷贝处理对象 function deepClone(obj){ var result; var oClass=isClass(obj); if(oClass==="Object"){ result={}; }else if(oClass==="Array"){ result=[]; }else{ return obj; } for(var key in obj){ var copy=obj[key]; if(isClass(copy)=="Object"){ result[key]=arguments.callee(copy);//递归调用 }else if(isClass(copy)=="Array"){ result[key]=arguments.callee(copy); }else{ result[key]=obj[key]; } } return result; } //判断对象的数据类型 function isClass(o){ if(o===null) return "Null"; if(o===undefined) return "Undefined"; return Object.prototype.toString.call(o).slice(8,-1); }

后端代码：

// 导出字段 @RequestMapping("/toList") @ResponseBody public Map toexceldataList(@RequestParam HashMap<String,String> paraMap,Model model) { try { Map<String, Object> returnmap = createResult(true, "保存成功"); String sql="select name,code from A_field where inter_id='"+paraMap.get("interId")+"'"; returnmap.put("fielddata",jdbcTemplate.queryForList(sql)); //表元字段数据 String sqldata="select name,code from A "; returnmap.put("griddata",jdbcTemplate.queryForList(sqldata)); //表数据的查询sql return returnmap; } catch (Exception e) { return createResult(false, "保存失败"); } }