javascript - How to get items to dropdown list in a field using jsGrid? - Stack Overflow

admin管理员组

文章数量:1391784

This is a jQuery code of my sample project to get details from application side to display in front in a grid which is build by 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;
            },
        });

Can anyone say how to get a list of items to field by calling to application side via AJAX call ?

Thanks

This is a jQuery code of my sample project to get details from application side to display in front in a grid which is build by 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;
            },
        });

Can anyone say how to get a list of items to field by calling to application side via AJAX call ?

Thanks

• javascript
• jquery
• asp-mvc
• jsgrid

Share Improve this question Follow edited Aug 15, 2016 at 5:22 Muhammad Yaseen Khan 80922 gold badges99 silver badges2424 bronze badges asked Aug 15, 2016 at 5:10 dush88cdush88c 2,14622 gold badges3131 silver badges4040 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Load items in advance and then use result in the grid field config, e.g.:

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

});

You can find an example in the jsgrid sample project

You can do multiple simultaneous requests before the grid launches

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

        ]
    });
});

you write the ajax call in loadData of the controller.. something like:

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

further reference https://github./tabalinas/jsgrid-webapi

本文标签： javascriptHow to get items to dropdown list in a field using jsGridStack Overflow