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

最后是整理为通用方法：

function GetObjByGrid(Grid) {
    var obj = {};
    //存储行信息
    obj["columns"] = Grid.fields;
    //用于存储行值
    var objrows = {};
    //通过遍历行数据，将行值存储 objrows对象
    Grid.resolveRow(function (a) { objrows[a.index] = a.values });
    //删除多余 objrows中的值（可能来源于样式等等）  做成通用方法
    for (var i in objrows)
    {
        for (var l in objrows[i]) {
            if (l.indexOf(".cls")!=-1)
                delete objrows[i][l];
        }
    }
    //用于存储 所有行
    obj["rows"] = objrows;
    return obj;
}
function doCustomPost(rowData, formID, inputName) {
    // 自定义POST请求
    var myform = $('#' + formID + '');
    // var arr=new Array(F.toJSON(rowData),F.toJSON(rowData2),F.toJSON(rowData3))
    myform.find('[name=' + inputName + ']').val(F.toJSON(rowData));
    myform[0].submit();
}

function PostSubmitJsonByGrids(arr,formID,inputName) {
    var objAll = {};
    var flag = 0;
    arr.forEach(function (e) {
        var temp = GetObjByGrid(e);
        objAll[flag] = temp;
        flag++;
    })

    doCustomPost(objAll, formID, inputName);
}

调用如下：

 2 var arr =[F.ui.Grid1,F.ui.Grid2,F.ui.Grid3] 3 4 PostSubmitJsonByGrids(arr,'myform','content');//表格数组，formID,inputName