1

建议我使用 JQuery 数据表。现在我需要用从我的控制器发送的一堆 json 对象填充网格。如何从 js 在网格上发送这些数据

$.ajax({
            ...
            url: '/Home/ReturnJsonData',
            success: function (result) {
                $.each(result, function (i, item) {
                    // this is where I should sent item object to my grid
                });
            },

            error: function () { alert("error"); }
        });

更新 我找到了这些链接，但我不知道如何实现它。

4

4 回答 4

1

在这种情况下，您可以使用Jquery Grid Plugin。

阅读本文以使用 MVC 数据网格：使用 jqGrid 和 JSON

http://blog.davidrenz.com/?p=663

更新：

在这种情况下，如果您只想使用 J-query Datatable，请转到此链接。

http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part

于 2012-09-12T08:36:04.503 回答
1

您应该使用 JQuery DataTable sAjaxSource 属性来指定 ajaxsource 在您的情况下它将是 /HomeReturnJsonData

一个例子如下

$(document).ready(function () {

 $('#myDataTable').dataTable({
    "bServerSide": true,
    "sAjaxSource": "Home/ReturnJsonData",
    "bProcessing": true,
    "aoColumns": [
                    { "sName": "ID",
                        "bSearchable": false,
                        "bSortable": false,
                        "fnRender": function (oObj) {
                            return '<a href=\"Details/' + 
                            oObj.aData[0] + '\">View</a>';
                        }
                    },
                    { "sName": "COMPANY_NAME" },
                    { "sName": "ADDRESS" },
                    { "sName": "TOWN" }
                ]
 });
});
于 2012-09-12T09:04:30.530 回答
0

我把它放在一个函数中，因为这对我来说是最简单的方法，请随意复制该函数并使用它。您需要更改的只是 url 和列名以及其中的编号。要调用它，只需复制带有路径的 html，以便它们与您的路径匹配。

function SetUpGrid(tableID, pagerID, data) {
    $("#" + tableID).jqGrid({
        url: '/pagename/stuff?data=' + data,
        datatype: 'json',
        mtype: 'GET',
        colNames: ['col name1', 'col name2', ... 'col nameN'],
        colModel: [
      { name: 'colName1', index: 'colName1', align: "center", sortable: true, editable: false, resizable: false },
      { name: 'colName2', index: 'colName2', align: "center", sortable: true, editable: false, resizable: false },
      ...
      { name: 'colNameN', index: 'colNameN', align: "center", sortable: true, editable: false, resizable: false }
    ],
    pager: '#' + pagerID,
    autowidth: true,
    viewrecords: true,
    rowNum: 15,
    pgbuttons: true,
    pginput: false,
    pgtext: "Page {0} of {1}",
    recordtext: "Data {0} - {1} of {2}",
    emptyrecords: "No data to display",
    loadui: true,
    rowList: [15, 30, 60],
    scrollrows: true,
    hidegrid: true,
    sortorder: "desc",
    beforeRequest: function () { // This just inserts a loading image, you don't need it but I was loading a lot of data and wanted the user to know something was happening.
        $("#" + tableID).empty().append('<tr><td><img src="/Content/imgs/loading.gif" /></td></tr>');
    },
    loadComplete: function (data) {
        /*
        Called when the json load is done, this is a way to insert the data the way I want to.
        Feel free to use whatever you want like links or <p>s or <div>s or whatever.
        */
        if (data.length > 1) {
            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    $("#" + tableID).empty().append("<tr><td>" + data[key].colName1 + "</td><td>" + data[key].colName12+ "</td> ... <td>" + data[key].colNameN + "</td></tr>");
                }
            }
        } else {
            $("#" + tableID).empty().append("<tr><td>" + this.colName1 + "</td><td>" + this.colName2 + "</td> ... <td>" + this.colNameN + "</td></tr>");
        }
    },
    loadError: function (xhr, status, error) {
        // Called when an error occurs, handle as you wish, if you even do.
        alert(xhr);
        alert(status);
        alert(error);
    }
});
$("#" + tableID).jqGrid("navGrid", "#" + pagerID, { add: false, edit: false, refresh: false, del: false, search: false }).trigger("reloadGrid", [{ page: 1 }]);
}

<script src="/Scripts/jquery-1.7.2.js"></script>
<script src="/Scripts/jquery-ui-1.8.23.min.js"></script>
<script src="/Scripts/jquery.jqGrid.min.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
<script src="/Scripts/ADTFunding.js"></script>
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        SetUpFundingGrid('dataTable', 'pager', '9895998');
    });
</script>
<table id="dataTable"></table>
<div id="pager"></div>
于 2013-01-09T21:40:13.473 回答
0

您还可以使用该fnAddData属性将 json 推送到表中。检查这篇文章https://jqueryajaxphp.com/jquery-datatable-using-json/

于 2017-05-09T06:22:35.190 回答