1

jsgrid を使用して編集可能なテーブルを作成しています。このデモのコードを使用しました。唯一の違いは、Web API の代わりに mvc を使用していることです。

ネットワークを見ると、コントローラーは必要な json データを返し、jsgrid はテーブルの下部にページネーションのものも表示します。ただし、テーブルにはデータが取り込まれていません

ここにhtmlとjavascriptコードがあります

<div id="jsGrid"></div>

@section scripts {
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script>
    $("#jsGrid").jsGrid({
        height: "50%",
        width: "100%",

        filtering: true,
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,

        pageSize: 10,
        pageButtonCount: 5,

        deleteConfirm: "Do you really want to delete client?",

        controller: {
            loadData: function (filter) {
                return $.ajax({
                    type: "GET",
                    url: "get",
                    data: filter,
                    dataType: "json"
                });
            },

            insertItem: function (item) {

            },

            updateItem: function (item) {

            },

            deleteItem: function (item) {

            }
        },

        fields: [
            { name: "SKU", type: "text", width: 50 },
            { name: "PartNumber", type: "text", width: 100 },
            { name: "ProductLineName", type: "text", width: 50 },
            { name: "ProductLineId", type: "text", width: 50 },
            { name: "Deleted", type: "checkbox", sorting: false },
            { type: "control" }
        ]
    });
</script>

コントローラーの関連するメソッドは次のとおりです

 public async Task<ActionResult> Get()
        {
            var query = db.Products
                .Select(p => new ProductDto()
                {
                    PartNumber = p.PartNumber,
                    SKU = p.SKU,
                    ProductLineName = p.ProductLines.ProductLineName,
                    ProductLineId = p.ProductLineId,
                    Deleted = p.Deleted
                });

            var products = await query.ToListAsync();

            return Json(products, JsonRequestBehavior.AllowGet);
        }

返されたデータをテーブルに表示/バインドするために何ができるか知っている人はいますか?

4

2 に答える 2

0

これは、最終的にデータをグリッドに配置するために使用したクライアント側の JavaScript です: (コントローラー部分のみ)

                    controller: {
                        loadData: function (filter) {
                            console.log("1. loadData");

                            return $.ajax({
                                type: "GET",
                                url: "/Timesheet/GetTimesheet/",
                                dataType: "json",
                                data: filter

                            console.log("3. loadData complete");
                        }

投稿された明示的な約束コードはまったく機能しませんでした。どうやら $.ajax は約束を返します。

これは、ajax (C#) で呼び出した MVC コントローラー コードです。

    public async Task<ActionResult> GetTimesheet()
    {
        int id = Convert.ToInt32(Session["UID"]);

        var tl = (
            from ts in db.Tasks
            orderby ts.Task_Date descending
            where ts.Emp_ID == id
            select new
            {
                ID = ts.Task_ID,
                Date = ts.Task_Date,
                Client = ts.Customer_ID,
                Hours = ts.Total_Hours
            }
        ).Take(4);

        var jsonData = await tl.ToListAsync();

        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

jsGrid に必要な Json の実際の例はありません。どこでもこれでうまくいきました-ヘッダーなどはありません。

于 2016-04-02T13:19:22.790 に答える