• 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 

  • 相关阅读:
    超级干货;Python优化之使用pandas读取和训练千万级数据
    「git」mac下git提交github代码
    「Linux+Django」uwsgi服务启动(start)停止(stop)重新装载(reload)
    「Linux+Django」Django+CentOs7+uwsgi+nginx部署网站记录
    「Linux」centos7安装mysql
    「Linux」centos7安装使用rar
    「Linux」centos7安装uWSGI
    「Linux」centos7更新python3.6后yum报错问题
    「Linux」centos7安装python
    「Linux」VMware安装centos7(一)
  • 原文地址:https://www.cnblogs.com/Alex-Mercer/p/11858828.html
Copyright © 2020-2023  润新知