FineUI MVC 前端获取表格Json通过Post传递后台

Posted 2020-11-23 Alex_Mercer

 

首先规定前端传入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