如何使用jsGrid在字段中获得项目的下拉列表

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

本文关键字：项目 下拉列表 何使用 jsGrid 字段      更新时间：2023-09-26

这是我的示例项目的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调用到应用程序端来获得项目列表字段?

谢谢

提前加载项，然后在网格字段配置中使用结果，例如:

$.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示例项目

中找到一个示例

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

$.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" },
        ]
    });
});

在控制器的loadData中编写ajax调用。例如:

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

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

相关文章：