JqG​​rid 根据另一个 jqgrid 下拉列表中的选定数据在下拉列表中添加值

Posted

技术标签:

【中文标题】JqG​​rid 根据另一个 jqgrid 下拉列表中的选定数据在下拉列表中添加值【英文标题】:JqGrid add value on dropdown base on selected data on another jqgrid dropdown 【发布时间】:2020-04-11 15:29:08 【问题描述】:

您好,我目前对 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 还挺新的 对不起我的英语不好希望你能理解我 它应该适用于内联添加和内联编辑

【问题讨论】:

【参考方案1】:

如果您使用Guriddo jqGrid,您可以使用我们知识库中的示例here

【讨论】:

抱歉,这是一个现有项目,我无法为此添加新库【参考方案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 );

【讨论】:

以上是关于JqG​​rid 根据另一个 jqgrid 下拉列表中的选定数据在下拉列表中添加值的主要内容,如果未能解决你的问题,请参考以下文章

JqG​​rid向数据库添加新行

JqG​​rid 如何更改编辑表单的宽度?

JqG​​rid 内联添加记录保存

JqG​​rid 从服务器更新数据

JqG rid寻呼机在每个页面中加载相同的数据

JqG​​rid 需要超链接 - 需要通过 Jquery 捕获价值