前台到后台的交互，至成功导出Excel (技术博客的错误示范)

最新推荐文章于 2024-08-07 17:19:02 发布
最新推荐文章于 2024-08-07 17:19:02 发布
阅读量7.8k 收藏
点赞数 1
分类专栏： 前端 文章标签： 技术 轻松 兴趣 java 区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14880455/article/details/47613491
版权

前台 easyui datagrid控件

var dg;
var d;
$(function(){   
dg=$('#dg').datagrid({    
method: "get",
//   url:'${ctx}/system/user/json', 
   url:'${ctx}/business/serverManage/json',
   fit : true,
fitColumns : true,
border : false,
idField : 'serviceId',
striped:true,
pagination:true,
rownumbers:true,
pageNumber:1,
pageSize : 20,
pageList : [ 10, 20, 30, 40, 50 ],
   columns:[[    
{field:'ck',checkbox:true},
// { field:'productid',width:100,align:'center',checkbox:true }, 
{field:'artNum',title:'病历号',width:100,align:'center'},
       {field:'artcyNum',title:'周期号',width:100,align:'center'}
<shiro:hasPermission name="serverManage:qry:IDNum">
       
      , { field:'femaleIdNum',title:'女方证件号',width:150,align:'center',
      formatter:function(value,rows){
      return value.substring(0,8)+"********"+value.substring(16);
      }},
       { field:'maleIdNum',title:'男方证件号',width:150,align:'center',
      formatter:function(value,rows){
      return value.substring(0,8)+"********"+value.substring(16);
      }}
       </shiro:hasPermission>

     ,{field:'artType',title: '技术类别' , width:108}
     <shiro:hasPermission name="serverManage:qry:orgqry">
       
       ,{ field:'attr1',title:'填报人',width:100,align:'center'},
       {field:'reportStatus',title:'状态',width:100,align:'center'}
       </shiro:hasPermission>
   ]], 
   /* headerContextMenu: [
       {
           text: "冻结该列", disabled: function (e, field) { return dg.datagrid("getColumnFields", true).contains(field); },
           handler: function (e, field) { dg.datagrid("freezeColumn", field); }
       },
       {
           text: "取消冻结该列", disabled: function (e, field) { return dg.datagrid("getColumnFields", false).contains(field); },
           handler: function (e, field) { dg.datagrid("unfreezeColumn", field); }
       }
   ], */
   enableHeaderClickMenu: true,
   enableHeaderContextMenu: true,
   enableRowContextMenu: false,
   toolbar:'#tb'
});
});


//弹窗修改
function edit(){
$.ajaxSetup({type : 'GET'});
var row = dg.datagrid('getSelected');
if(rowIsNull(row)) return;
// window.open("${ctx}/business/serverManage/update/"+row.serviceId ,"修改",'height=500,width=1200,top=100,left=100,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') ;


d=$("#dlg").dialog({   
   title: '修改',    
//    width: 1100,    
//    height: 450, 
   fit:true,
   href:"${ctx}/business/serverManage/update/"+row.serviceId,
   maximizable:true,
   modal:true//,
});
}

//删除
function del(){
var row = dg.datagrid('getSelected');
if(rowIsNull(row)) return;
parent.$.messager.confirm('提示', '删除后无法恢复您确定要删除？', function(data){
if (data){
$.ajax({
type:'get',
url:"${ctx}/business/serverManage/delete/"+row.serviceId,
success: function(data){
successTip(data,dg);
}
});
} 
});
}


//删除多个
function delM(){
var idList=[];
var data=dg.datagrid('getSelections');
debugger;
for(var i=0,j=data.length;i<j;i++){
idList.push(data[i].serviceId);
}

var row = dg.datagrid('getSelected');
if(rowIsNull(row)) return;
parent.$.messager.confirm('提示', '删除后无法恢复您确定要删除？', function(data){
if (data){
$.ajax({
type:'POST',
url:"${ctx}/business/serverManage/delete",
data:JSON.stringify(idList),
contentType:'application/json;charset=utf-8',
success: function(data){
if(data=='success'){
dg.datagrid('reload');
dg.datagrid('clearSelections');
parent.$.messager.show({ title : "提示",msg: "操作成功！", position: "bottomRight" });
} else{
parent.$.messager.alert('提示',data);
} 
}
});
//dg.datagrid('reload'); //grid移除一行,不需要再刷新
} 
});
}


//上报
function report(){
var idList=[];
var data=dg.datagrid('getSelections');
debugger;
for(var i=0,j=data.length;i<j;i++){
idList.push(data[i].serviceId);
}

var row = dg.datagrid('getSelected');
if(rowIsNull(row)) return;
parent.$.messager.confirm('提示', '是否确定上报？', function(data){
if (data){
$.ajax({
type:'POST',
url:"${ctx}/business/serverManage/report",
data:JSON.stringify(idList),
contentType:'application/json;charset=utf-8',
success: function(data){
if(data=='success'){
dg.datagrid('reload');
dg.datagrid('clearSelections');
parent.$.messager.show({ title : "提示",msg: "操作成功！", position: "bottomRight" });
} else{
parent.$.messager.alert('提示',data);
} 
}
});
//dg.datagrid('reload'); //grid移除一行,不需要再刷新
} 
});
}
//申请修改
function applyUpdate(){
var idList=[];
var data=dg.datagrid('getSelections');
debugger;
for(var i=0,j=data.length;i<j;i++){
idList.push(data[i].serviceId);
}

var row = dg.datagrid('getSelected');
if(rowIsNull(row)) return;
parent.$.messager.confirm('提示', '是否确定上报？', function(data){
if (data){
$.ajax({
type:'POST',
url:"${ctx}/business/serverManage/applyUpdate",
data:JSON.stringify(idList),
contentType:'application/json;charset=utf-8',
success: function(data){
if(data=='success'){
dg.datagrid('reload');
dg.datagrid('clearSelections');
parent.$.messager.show({ title : "提示",msg: "操作成功！", position: "bottomRight" });
} else{
parent.$.messager.alert('提示',data);
} 
}
});
//dg.datagrid('reload'); //grid移除一行,不需要再刷新
} 
});
}
//弹窗查看
function look(){
$.ajaxSetup({type : 'GET'});
var row = dg.datagrid('getSelected');
if(rowIsNull(row)) return;
//window.open("${ctx}/business/serverManage/check/"+row.serviceId ,"查看",'height=500,width=1200,top=100,left=100,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') ;
d=$("#dlg").dialog({   
   title: '查看',    
//    width: 1100,    
//    height: 450, 
   fit:true,
   href:"${ctx}/business/serverManage/check/"+row.serviceId,
   maximizable:true,
   modal:true//,
});
}

function ddd (abc){
var row = dg.datagrid('getSelected');
row.serviceId;
debugger;
if(rowIsNull(row)) return;
$.ajax({
type:'get',
url:"${ctx}/business/serverManage/update/"+row.serviceId,
success: function(data){
data;
debugger;
$("html").html(data);
}
});
}


//创建查询对象并查询
function cx(){
var obj=$("#searchFrom").serializeObject();

dg.datagrid('load',obj);
var rows  = $('#dg').datagrid("getRows");
debugger;
}




//导出excel
function exportExcel1(){
var url = "${ctx}/business/serverManage/exportExcel";
window.location.href = url;
}


//导出excel
function exportExcel2(){
var rows  = $('#dg').datagrid("getRows");
var rows_json=JSON.stringify(rows);
var fields=$("#dg").datagrid('getColumnFields',false);
fields.remove(0);
var  fields_json=JSON.stringify(fields);
var titles=$("#dg").datagrid('getColumns',false);
var columns=[];
for(var i=1;i<titles.length;i++){
columns.push(titles[i].title);
}
var columns_json=JSON.stringify(columns);
debugger;
var fileName="周期信息表";
$.post("${ctx}/business/serverManage/exportExcel", {rows:rows_json, fields:fields_json, columns:columns_json, fileName:fileName}, 
function(data){

debugger;
 },
 "text");
}

function exportExcel(){
var rows  = $('#dg').datagrid("getRows");
var rows_json=JSON.stringify(rows);
var fields=$("#dg").datagrid('getColumnFields',false);
fields.remove(0);
var  fields_json=JSON.stringify(fields);
var titles=$("#dg").datagrid('getColumns',false);
var columns=[];
for(var i=1;i<titles.length;i++){
columns.push(titles[i].title);
}
var columns_json=JSON.stringify(columns);
var realURL="${ctx}/business/serverManage/exportExcel";
//realURL += "?queryCode=QRY_ZRQK_GJ&&rows=9999&&orderByColumn=AREAID&&orderByType=asc&&fileName=ziranqingkuang";
var iframe = document.getElementById("downLoaderUtilsIframeV110912");// 创建iframe
if(iframe==null){
iframe= document.createElement('iframe');
iframe.setAttribute('src','javascript:false');
iframe.setAttribute('id',"downLoaderUtilsIframeV110912");
iframe.width=0;
iframe.height=0;
document.body.appendChild(iframe);
}
var form = document.createElement('form');// 创建form
form.action=realURL;
form.method="POST";
var cfg ={
// columns: encodeURIComponent(JsonArrayToString(columns)),
rows:rows_json,
columns: columns_json,
fields:fields_json,
page : 1,
fileName:'治疗周期表'//,
};
for(var p in cfg){
if(p){
var ipts = document.createElement('input');
ipts.setAttribute('type', 'hidden');
ipts.setAttribute('name',p);
ipts.value=cfg[p];
form.appendChild(ipts);
}
}
iframe.appendChild(form);
if (window.attachEvent) {
iframe.attachEvent('onload',function(){
document.body.removeChild(iframe);
});
} else {
iframe.addEventListener('load',function(){
document.body.removeChild(iframe);
}, false);
}
form.submit();
};

function JsonArrayToString(jsonArray){
  var JsonArrayString = "[";
  for(var i=0;i<jsonArray.length;i++){
  JsonArrayString=JsonArrayString+json2str(jsonArray[i])+",";
  }
  JsonArrayString = JsonArrayString.substring(0,JsonArrayString.length-1)+"]";
  return JsonArrayString;
};

function json2str(o) {
   var arr = [];
   var fmt = function(s) {
       if (typeof s == 'object' && s != null) return json2str(s);
       return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
    };
    for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));
    return '{' + arr.join(',') + '}';
 };

利用 post方法想后台发送请求，并传值

 

 

//导出excel
function exportExcel(){
var rows  = $('#dg').datagrid("getRows");
var rows_json=JSON.stringify(rows);
var fields=$("#dg").datagrid('getColumnFields',false);
fields.remove(0);
var  fields_json=JSON.stringify(fields);
var titles=$("#dg").datagrid('getColumns',false);
var columns=[];
for(var i=1;i<titles.length;i++){
columns.push(titles[i].title);
}
var columns_json=JSON.stringify(columns);
debugger;
$.post("${ctx}/business/serverManage/exportExcel/11",{rows:rows_json,fields:fields_json,columns:columns_json},
 function(data){
debugger;
 },
 "text");
}

 

 

@RequestMapping(value = "exportExcel")
@ResponseBody
public void exportExcel(HttpServletRequest request, HttpServletResponse response) throws Exception {
String rows=(String) request.getParameter("rows");//使用getParameter（） 方法
String fields=(String) request.getParameter("fields");
String columns=(String) request.getParameter("columns");

System.out.println(rows);
System.out.println(fields);
System.out.println(columns);
} 

 

 

未完，待整理，待续。。。

 

//导出excel
function exportExcel1(){
var url = "${ctx}/business/serverManage/exportExcel";
window.location.href = url;
}


//导出excel
function exportExcel2(){
var rows  = $('#dg').datagrid("getRows");
var rows_json=JSON.stringify(rows);
var fields=$("#dg").datagrid('getColumnFields',false);
fields.remove(0);
var  fields_json=JSON.stringify(fields);
var titles=$("#dg").datagrid('getColumns',false);
var columns=[];
for(var i=1;i<titles.length;i++){
columns.push(titles[i].title);
}
var columns_json=JSON.stringify(columns);
debugger;
var fileName="周期信息表";
$.post("${ctx}/business/serverManage/exportExcel", {rows:rows_json, fields:fields_json, columns:columns_json, fileName:fileName}, 
function(data){

debugger;
 },
 "text");
}
 

 

 

//导出
function exportExcel(){
var rows  = $('#dg').datagrid("getRows");
var rows_json=JSON.stringify(rows);
var fields=$("#dg").datagrid('getColumnFields',false);
fields.remove(0);
var  fields_json=JSON.stringify(fields);
var titles=$("#dg").datagrid('getColumns',false);
var columns=[];
for(var i=1;i<titles.length;i++){
columns.push(titles[i].title);
}
var columns_json=JSON.stringify(columns);
var realURL="${ctx}/business/serverManage/exportExcel";
//realURL += "?queryCode=QRY_ZRQK_GJ&&rows=9999&&orderByColumn=AREAID&&orderByType=asc&&fileName=ziranqingkuang";
var iframe = document.getElementById("downLoaderUtilsIframeV110912");// 创建iframe
if(iframe==null){
iframe= document.createElement('iframe');
iframe.setAttribute('src','javascript:false');
iframe.setAttribute('id',"downLoaderUtilsIframeV110912");
iframe.width=0;
iframe.height=0;
document.body.appendChild(iframe);
}
var form = document.createElement('form');// 创建form
form.action=realURL;
form.method="POST";
var cfg ={
// columns: encodeURIComponent(JsonArrayToString(columns)),
rows:rows_json,
columns: columns_json,
fields:fields_json,
page : 1,
fileName:'治疗周期表'//,
};
for(var p in cfg){
if(p){
var ipts = document.createElement('input');
ipts.setAttribute('type', 'hidden');
ipts.setAttribute('name',p);
ipts.value=cfg[p];
form.appendChild(ipts);
}
}
iframe.appendChild(form);
if (window.attachEvent) {
iframe.attachEvent('onload',function(){
document.body.removeChild(iframe);
});
} else {
iframe.addEventListener('load',function(){
document.body.removeChild(iframe);
}, false);
}
form.submit();
};

function JsonArrayToString(jsonArray){
  var JsonArrayString = "[";
  for(var i=0;i<jsonArray.length;i++){
  JsonArrayString=JsonArrayString+json2str(jsonArray[i])+",";
  }
  JsonArrayString = JsonArrayString.substring(0,JsonArrayString.length-1)+"]";
  return JsonArrayString;
};

function json2str(o) {
   var arr = [];
   var fmt = function(s) {
       if (typeof s == 'object' && s != null) return json2str(s);
       return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
    };
    for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));
    return '{' + arr.join(',') + '}';
 };

XD组件如何导出交互到html,教程｜Adobe XD制作高端交互效果
weixin_42415491的博客
06-21 1万+
原标题：教程｜Adobe XD制作高端交互效果来源：设计软件通咱们今天就来给大家分享一个XD上的新功能大家在平时使用APP的时候会不会看到一些高大上的交互动画呢在Adobe大手的推动下年轻的XD也加入很多可以简单实现的高端交互 那么怎么做呢1我们首先打开XD并在预设的模板里选择iphone6/7/8 2这里我想模拟一个音乐播放器的界面所以第一个页面我要做成给用户挑选专辑的样式我们点击选中画板在右...
mfc下导出listctrl数据到excel表格
10-08
本教程将详细解释如何在MFC环境下将ListCtrl控件中的数据导出到Excel表格。 首先，我们需要理解MFC ListCtrl的基本操作。ListCtrl是MFC对Windows API中的ListView控件的封装，它允许我们以列表形式展示数据，包括多...
前端导出excel
weixin_46040542的博客
03-09 228
简单实现execl导出
easyUI清除序号
qq_36521848的博客
03-05 1210
// 删除清单function deljcx() { var row = dg1.datagrid('getChecked'); if (rowIsNull(row) || row == undefined || row[0] == undefined || row.length == 0) { parent.$.messager.show({ title : "提示", msg :...
前后端实现Excel导入和导出以及下载模板
最新发布
qq_53986527的博客
08-07 930
当我们数据库中保养状态字段存的值是2（用2来表示状态是以保养，类似的也可以表示性别）那么我们导出数据时会根据实体类中的字段映射出我们需要显示的中文。我们通过在Excel模板中填入相应的数据，这里我们填的不是代表的数字而是中文，通过@ExcelImport设置kv的值，在导入时会自动映射我们进行转换，真正存储到数据库的值是数字。， 在数据库中台账ID、用户ID、保养状态我们存的都是数字，导出时需要显示对应的中文，我们可以通过设置@ExcelExport注解中的kv值。以下面的保养状态为例。
java实现前后端交互导出excel
we are family
05-06 1万+
第一步、前端获取参数并且通过form表单或者URL方式访问后台 //定义params对象接收键值对参数var params = { isChecked: 1, startTime: "2017-03-05", endTime: "2017-03-08", status: 1, arbType: 2423, claimsStatus: 3412
excel导出支持前台和后台导出
05-22
excel导出,支持前台和后台导出，并用struts2，简洁代码
前台从java后台获取excel表格并下载
05-25
后台java代码连接数据库后根据格式生成excel表格并返回给前台界面下载。eclipse+maven+springmvc+springjdbc
ECharts前台后台数据交互Demo
11-26
本教程将深入讲解如何通过AJAX技术实现ECharts与后台MySQL数据库的数据交互，以创建动态、实时的数据展示Demo。 一、ECharts简介 ECharts是一款轻量级的图表库，支持多种图表类型，可以灵活地进行配置和定制，满足...
DEV GridControl GridView导出到Excel 支持多个Sheet 源码
03-31
总结来说，DEV GridControl的GridView导出到Excel并支持多Sheet的功能，通过.NET库与Excel文件交互，实现了数据的高效管理和导出。这对于开发者处理大量数据、提供用户友好的数据导出体验具有重要意义。掌握这一技术...
前端数据传到后台动态生成Excel文件并提供文件下载
北辰之北灬的博客
10-20 1万+
需求描述： 需要将前端的某些数据生成Excel文件，并提供下载功能。 解决方案： 前端通过ajax的方式将数据信息传到后台，后台使用POI组件动态生成Excel文件流，并写入数据信息，返回前端供前端下载。 代码示例：// 前端代码 $.ajax({ url: "/ExportExcelServer/SubmitExcel
excel导入导出，包括纯前端解析，后端解析导入导出方式
03-27
excel导入导出，包括导入（纯前端解析、后端解析），导出（从前端导入到后端，生成excel导出到前端），完全就是开发excel方面所需要的，强烈推荐！！！
Excel的导入和导出功能实现
yzj479622672的博客
08-28 2万+
工作中经常会用到excel的导入和导出功能，这里我提供导入和导出类。 导入类（需要注意的地方我注释里面写好了）： package cn.teacheredu.utils; import java.io.InputStream; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Arr
将数据从前台传到后台方法总结
热门推荐
Just code it!
07-06 8万+
1、通过ajax，示例：传给后台的数据通过json封装起来，再用ajax将json传到后台，ajax是用到Jquery的ajax，在jsp先加入Jquery的引用&lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt; js传值的方法如下function testAjax() { ...
（纯前台）读取、解析并展示xls/xlsx
Ops的博客
05-08 8129
写一个当时让我弄了好几天的东西吧.. 纯前台读取、解析Excel 表格，并展示在页面上的一个插件。（需要自行修改代码）。 地址是： https://github.com/SheetJS/js-xlsx http://www.uedsc.com/js-xlsx.html 我通过修改了一些代码后，展示如图： 话不多说..我把他的代码拿上来 fn
2016.12.14 excel导出，window.location.href
qq_25497867的博客
12-14 4479
11,等我晚上写
后端返回数据导出excel表格
diaojw090的博客
10-21 1832
1.vue组件js // 导出 download() { this.downloadLoading = true this.initExcelCanteenDetail() }, 2.封装函数 async initExcelCanteenDetail() { // if (!await this.beforeInitExcel()) { ...
C# Winform DataGridView数据导出到Excel的实现方法
"c# winform DataGridView将数据导出到Excel中，支持导出当前页和全部数据。本文档提供了一种实现方法，通过C#代码创建并操作Excel对象，将DataGridView中的数据写入到Excel文件中，无需使用SaveFileDialog进行用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值