首先规定前端传入Json格式
格式如下:
{"columns":["列1","列2"],"rows":{"0":{"列1":"1","列2":"2"},"2":{"列1":"11","列2":"22"}}}
前端方法:
定义一个object 对象,用来存储 表格的数据,最后将对象转换成Json传递给后台
var obj = {}; //存储行信息 obj["columns"] = F.ui.Grid1.fields; //用于存储行值 var objrows = {}; //通过遍历行数据,将行值存储 objrows对象 F.ui.Grid1.resolveRow(function (a) { objrows[a.index] = a.values }); //删除多余 objrows中的值(可能来源于样式等等) for (var i in objrows) { delete objrows[i]["样式1"]; } //用于存储 所有行 obj["rows"] = objrows; //调用 post提交函数 doCustomPost(obj);
FineUi 添加 Post请求,官方文档地址:https://mvc.fineui.com/#/Grid/ExcelRowCommandDownload
案例前端页面:
// .net mvc 在 section body 中添加 //ExportToExcel 是控制器方法名,ExcelRowCommandDownload 是控制器 @using (Html.BeginForm("ExportToExcel", "ExcelRowCommandDownload", FormMethod.Post, new { id = "myform" })) { @Html.AntiForgeryToken() <input type="hidden" name="content" /> }
JS doCustomPost 函数
function doCustomPost(rowData) { // 自定义POST请求 var myform = $('#myform'); myform.find('[name=content]').val(F.toJSON(rowData)); myform[0].submit(); }
后端解析 Json
[HttpPost] [ValidateAntiForgeryToken] public DataTable ExportToExcelPost(string content) { JObject jarry = (JObject)JsonConvert.DeserializeObject(content); var dataTable =GetDataTableByJson(jarry["columns"],jarry["rows"]); return dataTable; }
关于 Json转DataTable GetDataTableByJson方法的,请转到这:https://www.cnblogs.com/Alex-Mercer/p/11858640.html
最后是整理为通用方法:
1 function GetObjByGrid(Grid) { 2 var obj = {}; 3 //存储行信息 4 obj["columns"] = Grid.fields; 5 //用于存储行值 6 var objrows = {}; 7 //通过遍历行数据,将行值存储 objrows对象 8 Grid.resolveRow(function (a) { objrows[a.index] = a.values }); 9 //删除多余 objrows中的值(可能来源于样式等等) 做成通用方法 10 for (var i in objrows) 11 { 12 for (var l in objrows[i]) { 13 if (l.indexOf(".cls")!=-1) 14 delete objrows[i][l]; 15 } 16 } 17 //用于存储 所有行 18 obj["rows"] = objrows; 19 return obj; 20 } 21 function doCustomPost(rowData, formID, inputName) { 22 // 自定义POST请求 23 var myform = $('#' + formID + ''); 24 // var arr=new Array(F.toJSON(rowData),F.toJSON(rowData2),F.toJSON(rowData3)) 25 myform.find('[name=' + inputName + ']').val(F.toJSON(rowData)); 26 myform[0].submit(); 27 } 28 29 function PostSubmitJsonByGrids(arr,formID,inputName) { 30 var objAll = {}; 31 var flag = 0; 32 arr.forEach(function (e) { 33 var temp = GetObjByGrid(e); 34 objAll[flag] = temp; 35 flag++; 36 }) 37 38 doCustomPost(objAll, formID, inputName); 39 }
调用如下:
1 2 var arr =[F.ui.Grid1,F.ui.Grid2,F.ui.Grid3] 3 4 PostSubmitJsonByGrids(arr,'myform','content');//表格数组,formID,inputName