【问题标题】:JQGrid editoptions dataurl not using ajax get?JQGrid editoptions dataurl不使用ajax get?
【发布时间】:2023-03-21 23:38:01
【问题描述】:

我有一个使用editoptions:{dataUrl:'getMetadata?type=' + myType+ '&column=colOne'} 的数据网格。我还为ajaxComplete 事件绑定了一个函数,以便在发出请求后进行自定义标头检查。除了 dataUrl 请求之外,这对我在 JQGrids 请求中看到的所有内容都运行良好。执行 get 请求后,Ajax Complete 不会触发。 ajaxStartajaxStop 确实被恰当地解雇了。 Complete/Error/Success 不是。

根据 dataUrl 的 jqgrid 文档,它应该使用 ajax 调用来获取数据。

'数据是通过 AJAX 调用获得的,并且应该是具有所需选项的有效 HTML 选择元素...'

这里还有什么我遗漏的吗?绑定代码如下。

$('body').bind('ajaxComplete',function(event,request,settings){
    if (request.getResponseHeader('REQUIRES_AUTH') === '1'){
       location.reload();
    };
});
//Other binds added to see what is getting fired
$('body').bind('ajaxError',function(event,request,settings){
    if (request.getResponseHeader('REQUIRES_AUTH') === '1'){
       location.reload();
    };
});
$('body').bind('ajaxSuccess',function(event,request,settings){
    if (request.getResponseHeader('REQUIRES_AUTH') === '1'){
       location.reload();
    };
});
$('body').bind('ajaxStart',function(){
    var b = "ABC";
    var c = "DEF";
});
$('body').bind('ajaxStop',function(event,request,settings){
    var b = "ABC";
    var c = "DEF";
});

编辑:忘记添加请求以 200 状态返回。

------------------Ajax 选择选项问题在这里------------- ------------

将以下代码放在任何地方(当前在 document.ready 中)会导致所有选择框不显示在搜索中。

$.extend($.jgrid.defaults, {
            ajaxSelectOptions: {    
                complete: function (jqXHR) {
                    if (jqXHR.getResponseHeader('REQUIRES_AUTH') === '1') 
                    {
                        location.reload();
                    } 
                    return;
                }
        }});

ColModel 和名称

    gridForm.colNames = ['ID','Field1','Field2','Field3','Field4','Field5','Last User Id','Modified Date' ];
gridForm.colModel = [
                      {name:'id', editable: false, edittype:'text',search:true, stype:'text'},        
                      {name:'Field1', editable: checkedOutByUser, edittype:'text', search:true,editrules:{required:true}, stype:'text'},
                      {name:'Field2', editable: checkedOutByUser, edittype:'select', editoptions:{dataUrl:dataUrl + "&search=false"}, search:true,editrules:{required:true}, searchoptions:{dataUrl:dataUrl + "&search=true"}, stype:'select'},
                      {name:'Field3',  editable: checkedOutByUser, edittype:'select', editoptions:{dataUrl:dataUrl + "&search=false"}, editrules:{required:true},search:true, searchoptions:{dataUrl:dataUrl + "&search=true"}, stype:'select'},
                      {name:'Field4',  editable: checkedOutByUser, edittype:'select', editoptions:{dataUrl:dataUrl + "&search=false"}, editrules:{required:true}, search:true, searchoptions:{dataUrl:dataUrl + "&search=true"}, stype:'select'},
                      {name:'Field5', editable: false, edittype:'text', search:true, stype:'text'},
                      {name:'userId', editable: false, edittype:'text', search:true, stype:'text'},
                      {name:'modifiedDate', editable: false, search:true, stype:'text', searchoptions:{dataInit:function(el){defaultCalendar.create(el, "componentGrid");}}}                             
                      ];

网格定义,使用一些基于三元的,因此我们可以将 jqgrid 调用重新用于类似的网格

    $("#myGrid").jqGrid(
        {
            caption:gridForm.caption,
            overflow:'hidden',
            url:gridForm.url?gridForm.url:url,
            height: gridForm.height?gridForm.height:'auto',
            datatype: "json",
            colNames:gridForm.colNames,
            colModel:gridForm.colModel,
            recordtext: 'Record(s) {0} - {1} of {2}', 
            rowNum: 20, 
            sortname: gridForm.sortindex?gridForm.sortindex:"id",
            sortorder: gridForm.sortorder?gridForm.sortorder:"desc",
            cellEdit: false,
            cellurl : 'updateRow', 
            editurl:'addRow',
            cellsubmit : 'remote',
            toolbarfilter: true,
            onCellSelect:gridForm.onCellSelect?gridForm.onCellSelect:null,
            pager: jQuery('#pager'),
            viewrecords: gridForm.viewrecords?gridForm.viewrecords:true,
            gridview: gridForm.gridview?gridForm.gridview:true,
            shrinkToFit: true,
            multiselect: gridForm.multiselect?gridForm.multiselect:true});
jQuery("#myGrid").jqGrid('filterToolbar');

最后,从数据 URL 返回的 HTML

<select><option value=''</option><option value='Dummy Entry'>Dummy Entry</option><option value='Next Entry'>Next Entry</option><option value='ThirdEntry'>ThirdEntry</option><option value='FourthEntry'>FourthEntry</option></select>

对文字墙感到抱歉,但我尝试添加所有可能看起来有用的内容。请注意,在启用 ajaxSelectOptions 默认值之前,这在我们拥有的众多 (10+) jqgrids 中运行良好(搜索填充中的选择框)。

【问题讨论】:

    标签: jquery ajax jqgrid


    【解决方案1】:

    我建议您使用 jqGrid 的 ajaxSelectOptions 选项来自定义使用 jqGrid 从 dataUrl 获取数据的 Ajax 请求。我希望参数ajaxSelectOptions 在您的情况下看起来像

    ajaxSelectOptions: {
        complete: function (jqXHR) {
            if (jqXHR.getResponseHeader('REQUIRES_AUTH') === '1') {
                location.reload();
            }
        }
    }
    

    【讨论】:

    • '当通过editoptions或searchoptions对象中的dataUrl选项获得选择时,此选项允许为选择元素设置全局ajax设置'那么是特定于该选项应用到的网格吗?我会这么认为,但“全球”这个词让我有点失望。
    • @Joseph:如果您需要将某些选项设为默认值,您只需扩展 $.jgrid.defaults(请参阅 here)。在你的情况下,你可以做$.extend($.jgrid.defaults, {ajaxSelectOptions: {complete: function (jqXHR) {if (jqXHR.getResponseHeader('REQUIRES_AUTH') === '1') {location.reload();}}}});
    • 您先生,非常有帮助。这大大减少了我必须更改的代码量。
    • @Joseph:不客气!一般来说,通过$.jgrid.defaults$.jgrid.search$.jgrid.edit$.jgrid.inlineEdit 等设置 jqGrid 的项目特定设置是一个很好的做法。 jqGrid 4.3.2 中的新事件系统允许您额外定义 jQuery 事件,而不是在 jqGrid 文档中称为“事件”的回调。所以你可以使单个网格的代码非常小。它将改善大型项目的维护。
    • @Joseph:我有个想法:你可能使用了一些 old 版本的 jqGrid?当前版本的 jqGrid(参见here)使用successcomplete 是免费的。一些旧版本使用了complete,而success 是免费的。因此,请确认您使用的是最新版本的 jqGrid。只需下载最新版本here
    猜你喜欢
    • 2021-12-25
    • 1970-01-01
    • 2012-03-03
    • 1970-01-01
    • 1970-01-01
    • 2011-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多