如何使用 jsGrid 将项目获取到字段中的下拉列表？

Question

这是我的示例项目的 jQuery 代码，用于从应用程序端获取详细信息以显示在由 jsGrid 构建的网格的前面。

$("#part_table").jsGrid({
            height: "auto",
            width: "100%",
            autoload: true,
            editing: true,
            sorting: true,
            paging: true,
            pageSize: 10,
            inserting: true,
            loadIndication: false,
            filtering: true,
            headerRowClass: 'table-green-header',
            controller: {
                loadData: function (filter) {
                    function.....
                },
                updateItem: function (item) {

                    function.....

                }
            },
            fields: [
                { name: "Id", type: "number", visible: false },
                {
                    name: "CatalogueId", type: "select", **items**: catalouges, valueField: "Id", textField: "CatalougeName", selectedIndex : -1 , title: "Catalouge Name", align: "center"
                },

                { name: "DistributorPrice", type: "number", title: "Distributor Price", align: "center", filtering: false, sorting: false },
                { name: "IsActive", type: "checkbox", filtering: false, sorting: false },
                { type: "control" }


            ],
            rowClick: function (args) {
                return false;
            },
        });

谁能告诉我如何通过 AJAX 调用应用程序端来获取字段列表？

谢谢

Answer 1

你在控制器的 loadData 中编写 ajax 调用。类似于：

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

进一步参考https://github.com/tabalinas/jsgrid-webapi

Answer 2

预先加载项目，然后在网格字段配置中使用结果，例如：

$.ajax({
    type: "GET",
    url: "/countries/"
}).done(function(countries) {

    countries.unshift({ id: "0", name: "" });

    $("#jsGrid").jsGrid({
        ...,
        fields: [
            ...
            { name: "country_id", title: "Country", type: "select", width: 100, items: countries, valueField: "id", textField: "name" }
        ]
    });

});

您可以在 jsgrid sample project

中找到示例

Answer 3

您可以在网格启动前同时执行多个请求

$.when(

    $.get("/api/v1/clients", function(clients) {
        db.clients = clients;
    }),

    $.get("/api/v1/owners", function(owners) {
        db.owners = owners;
    })

).then(function() {

    $("#jsGrid").jsGrid({
        ...,

        fields: [
            { name: "client", title: "Client", type: "select", items: db.clients, valueField: "name", textField: "name" },
            { name: "owner", title: "Owner", type: "select", items: db.owners, valueField: "short_name", textField: "short_name" },

        ]
    });
});

如何使用 jsGrid 将项目获取到字段中的下拉列表？

How to get items to dropdown list in a field using jsGrid?

javascript

asp.net-mvc

jquery

jsgrid