zoukankan      html  css  js  c++  java
  • 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 

  • 相关阅读:
    896. Monotonic Array单调数组
    865. Smallest Subtree with all the Deepest Nodes 有最深节点的最小子树
    489. Robot Room Cleaner扫地机器人
    JavaFX
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
  • 原文地址:https://www.cnblogs.com/Alex-Mercer/p/11858828.html
Copyright © 2011-2022 走看看