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

Posted Alex_Mercer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FineUI MVC 前端获取表格Json通过Post传递后台相关的知识,希望对你有一定的参考价值。

 

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

 

以上是关于FineUI MVC 前端获取表格Json通过Post传递后台的主要内容,如果未能解决你的问题,请参考以下文章

js怎么获取从springmvc后台传过来的数据

FineUI经典项目展示 - 生产在线管理系统

后台获取数据,前端js转换成固定格式的json?

FineUI给表格行内链接设置弹出窗体

来自前端的 Json 数据未通过后端使用 Knockout 和 MVC 插入到数据库中

fineui中前端自定义函数