JSGrid中DESTINATION下拉列数据不显示问题求助

在Laravel Blade视图中使用JSGrid展示记录，DESTINATION字段已设置为可筛选的下拉菜单，筛选功能正常，但该列无数据显示，其他列均正常加载。

前端JS代码 #

$(document).ready(function() {

    var stations = [
        { Id : 1,  Name : "NAIROBI"},
        { Id : 2,  Name : "EMBU"},
        { Id : 14, Name : "MWEA"},
        { Id : 15, Name : "RUNYENJES"},
        { Id : 16, Name : "CHUKA"},
        { Id : 17, Name : "MATUU"},
        { Id : 18, Name : "MTWAPA"},
        { Id : 19, Name : "KARURUMO"},
        { Id : 20, Name : "KATHWANA"},
        { Id : 21, Name : "MERU"},
        { Id : 22, Name : "KIRITIRI"},
        { Id : 23, Name : "KIVAA"},
        { Id : 24, Name : "CHIAKARIGA"},
        { Id : 25, Name : "ISHIARA"},
        { Id : 26, Name : "MITUNGUU"},
        { Id : 27, Name : "TUNYAI"},
        { Id : 28, Name : "KIBUGU"},
        { Id : 29, Name : "NKUBU"},
        { Id : 30, Name : "kitui"},
        { Id : 31, Name : "SIAKAGO"},
        { Id : 32, Name : "MOMBASA"},
        { Id : 33, Name : "VOI"},
        { Id : 34, Name : "THIKA"},
        { Id : 35, Name : "EMBU STAGE"},
        { Id : 36, Name : "NAIROBI ERUSHA HSE"},
        { Id : 37, Name : "MWINGI"},
        { Id : 38, Name : "KYENI"},
        { Id : 39, Name : "KANYONYO"},
        { Id : 40, Name : "KABATI"},
        { Id : 41, Name : "KATHAGERI"},
        { Id : 42, Name : "KATHAGERU"},
        { Id : 43, Name : "NENO MWEA OFFICE2"},
        { Id : 44, Name : "kisasi"},
        { Id : 46, Name : "KAEWA"},
        { Id : 47, Name : "RUIRU"},
        { Id : 48, Name : "CHANGAMWE"}
    ];

    $("#jsGrid").jsGrid({

        width: "100%",
        height: "auto",

        loadIndication: true,
        loadMessage: "Please, wait...",
        loadShading: true,

        pageLoading: true,
        pageIndex: 1,
        pageSize: 20,

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

        rowClick: function(args) {
            var $row = this.rowByItem(args.item),
            selectedRow = $("#jsGrid").find('tr.highlight');

            // Remove highlight from any previously highlighted row
            if (selectedRow.length) {
                selectedRow.toggleClass('highlight');
            }

            // Highlight the clicked row
            $row.toggleClass("highlight");
        },

        controller: {
            loadData: function(filter) {
                return $.ajax({
                    type: "GET",
                    url: "{{ route('delivery.outgoing_delivery') }}",
                    data: filter,
                    dataType: "json",
                    success: function(response) {
                        var stations = response.stationArray
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("Error loading data:", textStatus, errorThrown); // Debugging line
                    }
                });
            }
        },

        fields: [
            {
                name: "rowIndex",
                title: "#",
                type: "number",
                width: 30,
                align: "center",
                filtering: false,
                itemTemplate: function(_, item) {
                    return $.inArray(item, $("#jsGrid").jsGrid("option", "data")) + 1;
                    }
            },
            { name: "DELIVERY", type: "text", width: 80, validate: "required" },
            {
                name: "DESTINATION",
                type: "select",
                items: stations,
                valueField: "Id",
                textField: "Name",
                filterTemplate: function() {
                    var $select = jsGrid.fields.select.prototype.filterTemplate.call(this);
                    $select.prepend($("<option>").prop("value", "0").text("(All)"));
                    return $select;
                }
            },

            { name: "PARCELS", type: "text", width: 60, validate: "required" },
            { name: "CREATED AT", type: "text", width: 100, validate: "required" },
            { name: "VERIFIED AT", type: "text", width: 100, validate: "required" },
            { name: "VEHICLE", type: "text", width: 70 },
            {
                name: "VERIFIED",
                type: "text",
                width: 50,
                filtering: false,
                validate: "required",
                itemTemplate: function(value) {
                    return value == 1 ? '<i style="color: green;font-size: 16px" class="ti ti-square-rounded-check"></i>' : '<i style="color: red;font-size: 16px" class="ti ti-xbox-x"></i>';
                }
            },
            {
                type: "control",
                filtering: false,
                itemTemplate: function(value, item) {
                    return $("<a>")
                        .attr({
                            href: "#",
                            'data-bs-toggle': 'modal',
                            'data-bs-target': '#modal-outgoing',
                            'data-id': item.DELIVERY
                        })
                        .addClass("ti ti-eye-down")
                        .css({
                            "font-size": "15px",
                            "text-decoration": "none"
                        })
                        .html('<span class="sr-only"></span>');
                }
            }

        ],
    });
});

Laravel控制器代码 #

// Execute the query with the bindings
$query = DB::select($sql, $bindings);

// Format data to match jsGrid requirements
$output = [];
foreach($query as $transaction){
    $output[] =
    [
        "DELIVERY" => $transaction->delivery_id,
        "DESTINATION" => $transaction->destination,
        "PARCELS" => $transaction->parcel_count,
        "CREATED AT" => $transaction->created_at,
        "VERIFIED AT" => $transaction->verified_at,
        "VEHICLE" => $transaction->delivery_vehicle,
        "VERIFIED" => $transaction->verified,
    ];
};

return response()->json([
    'data' => $output,
    'itemsCount' => $totalCount,
]);

问题原因及解决方案 #

核心原因 #

JSGrid的select类型字段配置了valueField: "Id"，意味着它会用后端返回的DESTINATION值去匹配stations数组中Id字段的值，然后显示对应的Name。如果后端返回的DESTINATION是站点名称（比如"NAIROBI"），或者返回的Id与stations中的Id类型/数值不匹配，就会找不到对应的选项，导致列显示为空。

解决方案 #

方案1：修改前端字段配置（适用于后端返回站点名称的情况）

将valueField改为"Name"，让JSGrid用后端返回的站点名称直接匹配stations数组中的Name字段：

{
    name: "DESTINATION",
    type: "select",
    items: stations,
    valueField: "Name", // 改为Name，匹配后端返回的站点名称
    textField: "Name",
    filterTemplate: function() {
        var $select = jsGrid.fields.select.prototype.filterTemplate.call(this);
        $select.prepend($("<option>").prop("value", "0").text("(All)"));
        return $select;
    }
}

方案2：修改后端返回数据（适用于应该返回站点Id的情况）

确保控制器中$transaction->destination返回的是与stations数组中Id对应的数字值。比如调整查询逻辑，关联站点表获取对应的Id，而不是名称：

// 示例：假设原查询返回的是站点名称，修改为返回Id
// 需根据实际表结构调整SQL或关联查询
$output[] = [
    "DELIVERY" => $transaction->delivery_id,
    "DESTINATION" => $transaction->destination_id, // 改为站点Id字段
    "PARCELS" => $transaction->parcel_count,
    // 其他字段不变
];

额外优化点

前端loadData的success函数中，var stations = response.stationArray是局部变量，不会更新外部的stations数组。如果后端确实返回了stationArray，应去掉var，让全局stations数组更新：

success: function(response) {
    stations = response.stationArray; // 去掉var，更新全局变量
}

内容的提问来源于stack exchange，提问作者Indeche Ojukwu