JqG​​rid 根據另一個 jqgrid 下拉列表中的選定數據在下拉列表上添加值

Question

嗨，我目前被困在 jqgrid 上的情況。 例如，如果我選擇體育，另一個下拉列表將包含體育列表數據。 我能夠加載數據，但我不知道如何開始。

這是我的代碼

$('#d1d2-lot-information-grid').jqGrid('clearGridData').trigger("reloadGrid");
    $('#d1d2-lot-information-grid').jqGrid({
        datatype: 'local',
        data: lots,
        editurl: 'clientArray',
        colNames: ['Device', 'Package', 'Lot No.', 'Lot Qty'],
        colModel: [
            { name: 'Device', index: 'Device', sortable: false, editable: true, editrules: { required: true }, edittype: 'select', },
            {
                name: 'Package',
                index: 'Package',
                sortable: false,
                editable: true,
                editrules: { required: true },
                edittype: 'select',
                editoptions: { value: packageOptions },
            },
            { name: 'LotNo', index: 'LotNo', sortable: false, editable: true, editrules: { required: true }, },
            { name: 'LotQty', index: 'LotQty', sortable: false, editable: true, editrules: { required: true }, }
        ],
        beforeSelectRow: function (id) {
            if ($('#' + id).attr('editable') == 1) {
                return false;
            }
        },
        pager: '#d1d2-lot-information-pager',
        pgbuttons: false,
        pginput: false,
        sortorder: 'asc',
        sortname: 'name',
        multiselect: true,
        height: '130',
        maxheight: '130',
        width: '522',
        viewrecords: true,
        rowNum: 10000
    });
    $('#d1d2-lot-information-grid').jqGrid({ recreateForm: true })

    // Disable form CRUD
    $('#d1d2-lot-information-grid').jqGrid('navGrid', '#d1d2-lot-information-pager', { edit: false, save: false, add: false, cancel: false, del: show, search: false, refresh: false });

    // Enable inline CRUD
    $('#d1d2-lot-information-grid').jqGrid('inlineNav', '#d1d2-lot-information-pager', { add: show, edit: show, save: show, cancel: show });
}

我在 jqgrid 有點新，抱歉我的英語不好希望你理解我它應該適用於內聯添加和內聯編輯

Answer 1

如果您使用Guriddo jqGrid，您可以在這里使用我們知識庫中的示例

Answer 2

通過此代碼解決我的問題。 有點亂，但按我的需要工作

 $('#d1d2-lot-information-grid').jqGrid({
        datatype: 'local',
        data: lots,
        editurl: 'clientArray',
        colNames: ['Device', 'Package', 'Lot No.', 'Lot Qty'],
        colModel: [
            { name: 'Device', index: 'Device', sortable: false, editable: true, editrules: { required: true }, edittype: 'select', editoptions:{value:':-Select Device-'} },
            {
                name: 'Package',
                index: 'Package',
                sortable: false,
                editable: true,
                editrules: { required: true },
                edittype: 'select',
                editoptions: { value: packageOptions,dataEvents: [
                        {
                            type: 'change',
                            fn: function(e) {

                            var packageID = $(this).val();

                             var selr = jQuery('#d1d2-lot-information-grid').jqGrid('getGridParam', 'selrow');

                                    var  modes = [],
                                      params = { packageID:packageID };

                                     $.ajax({
                                         async: false,
                                         type: 'POST',
                                         contentType: 'application/json',
                                         url: baseUrl + 'ncrb/Default.aspx/GetDevice',
                                         data: JSON.stringify(params),
                                         dataType: 'json',
                                        success: function (data) { modes = data; },
                                        error: function (xhr, status, error) { console.log(xhr, status, error); }
                                    });
                                    var targetrow = '#'+selr + '_Device';

                                    $(targetrow).empty();
                                    var items="";

                                         $.each(modes, function (key, value) {

                                               items = '<option value="' + value.Description + '">' + value.Description + '</option>';
                                                   $(targetrow).append(items);
                                         });


                                     return modes;


                            }
                        }
                    ] },

            },
            { name: 'LotNo', index: 'LotNo', sortable: false, editable: true, editrules: { required: true }, },
            { name: 'LotQty', index: 'LotQty', sortable: false, editable: true, editrules: { required: true }, }
        ],
        beforeSelectRow: function (id) {
            if ($('#' + id).attr('editable') == 1) {
                return false;
            }
        },
        pager: '#d1d2-lot-information-pager',
        pgbuttons: false,
        pginput: false,
        sortorder: 'asc',
        sortname: 'name',
        multiselect: true,
        height: '130',
        maxheight: '130',
        width: '522',
        viewrecords: true,
        rowNum: 10000
    });
    $('#d1d2-lot-information-grid').jqGrid({ recreateForm: true })

    // Disable form CRUD
    $('#d1d2-lot-information-grid').jqGrid('navGrid', '#d1d2-lot-information-pager', { edit: false, save: false, add: false, cancel: false, del: show, search: false, refresh: false });

    // Enable inline CRUD
    $('#d1d2-lot-information-grid').jqGrid('inlineNav', '#d1d2-lot-information-pager', { add: show, edit: show, save: show, cancel: show });