点击上传按钮上传文件后如何重新加载Jqgrid？答案

【问题标题】：how to reload the Jqgrid after upload the file by click upload Button?点击上传按钮上传文件后如何重新加载Jqgrid？
【发布时间】：2016-02-15 09:04:09
【问题描述】：

当我通过点击上传按钮上传文件时。它应该 重新加载 我的 jqgrid 并且新值应该在网格的顶部，这是我的任务的一个场景。我需要在 Jquery 中做哪些更改？我使用 loadonce = False 但它是连续加载网格。如果我重新加载整个页面，我会在网格中获得价值。

_initUploadedFilesGrid: function(optionsM, resData){
             $('table#viewUploadedFiles').trigger("reloadGrid");
             $("#tmp").data('options', optionsM);
             $('#viewUploadedFilesDiv table#viewUploadedFiles').cb({
                    datatype: 'json'
                    ,mtype: 'POST' 
                    ,url: optionsM.urls.getAllUploadedFiles
                    , jsonReader : {
                        root:"UploadedFiles",
                    }
                    ,colNames:  [
                                 'Vendor Id'
                                 ,'Import ID'
                                 ,'Imported Organization'
                                 ,'Source Authoring Tool'
                                 ,'Import Start Time'
                                 ,'Import Completed Time'
                                 ,'Status'
                                 ,'File Name'
                                 ,'File Type'
                                 ,'Content Area'
                                 ,'Course'
                                 ,'Band'
                                ]
                    ,colModel:  [
                                {name: 'VendorId'}
                                ,{name: 'ImportFileId'}
                                ,{name: 'organizationId'}
                                ,{name: 'sourceAuthoringTool'}
                                ,{name: 'importStartTime'}
                                ,{name: 'importCompletedTime'}
                                ,{name: 'status'}
                                ,{name: 'fileName'}
                                ,{name: 'fileType'}
                                ,{name: 'contentAreaId'}
                                ,{name: 'CourseId'}
                                ,{name: 'BandId'}
                                 ]
                    ,columnchoosercaption: optionsM.msgs.chooseColumns
                    ,height: 'auto'
                    ,width: 1150
                    ,pager: '#viewUploadedFilesGridPager'
                    ,sortname: 'qImportFileId'
                    ,sortorder: "desc",
                    //,loadonce: false,

                    onSelectRow: function(rowId, status){

                        var $grid = $('#viewUploadedFiles table[id=viewUploadedFiles]');
                        var row = $grid.getRowData(rowId);
                        $.cete.contentEditor._itemStatusDialog(row.ImportFileId);
                    },
             });
                $('#viewUploadedFiles table#viewUploadedFiles').jqGrid('setGridWidth', $('#gridviewUploadedFilesContainer').width());

            },

$('input:radio[name=gradeType]').click(function() {
          var selected = $('input:radio[name=gradeType]:checked').val();
          if (selected=="Course") {
              $('#BandSettingDiv').hide();
              $('#CourseSettingDiv').show();
              $('#CourseId option').eq(0).attr("selected",true);
              $('#BandId option').eq(0).attr("selected",true);
            }
          else{
                 $('#BandSettingDiv').show();
                 $('#CourseSettingDiv').hide();
                 $('#CourseId option').eq(0).attr("selected",true);
                 $('#BandId option').eq(0).attr("selected",true);
            }
        });
    me._initUploadedFilesGrid(options, "");

},

【问题讨论】：

您发布的代码片段没有足够的描述。你在哪里使用_initUploadedFilesGrid？ .cb 是什么，你的用法和.jqGrid 一样吗？为什么在_initUploadedFilesGrid 的开头包含$('table#viewUploadedFiles').trigger("reloadGrid");，您使用的是哪个版本的jqGrid 以及来自哪个分支的jqGrid（free jqGrid、Guriddo jqGrid JS 或版本
如果我给 .cb 它将仅在网格中显示 1-10 个值，并且它还从 DB 中获取值 10 列值。但是如果我给 .scb 它将在网格中显示 1-10 个值，并从 DB 中获取全部值。当页面自行加载时，此方法执行。(_initUploadedFilesGrid)
抱歉，您没有回答我提出的大多数问题。首先.cb 方法是什么？。它看起来像.jqGrid，但你应该首先定义它。你的主要问题是：“它是连续加载网格”。因此，您调用_initUploadedFilesGrid 的在哪里（在哪种情况下）很重要。例如，如果您在 reloadGrid 处理内部（例如在 loadComplete 或 gridComplete 内部）调用 _initUploadedFilesGrid，那么您将进行递归。
我们将 Jqgrid 自定义为（.cb 和 .scb），它具有更多的 CSS 和网格设计类型的功能。而不是 (.jqGrid)。
您使用哪个版本的 jqGrid 以及来自哪个分支？ jqGrid 有很多自定义功能。我认为您的所有要求都可以通过使用标准方式来解决。不过，除非您没有具体说明 .cb 和 .scb 的外观，否则我无法帮助您。您报告的问题似乎存在于您的自定义.cb 中。因此，如果您希望其他人帮助您，那么您应该准确描述您的工作。

标签： javascript jquery jqgrid

【解决方案1】：

尝试此代码更改... 你说，右边的对话框中有一个上传按钮。使用您的上传对话框 id 而不是这个 $("#progressOfUpload") 和它肯定会起作用！

$('input:radio[name=BandType]').click(function() {
          var selected = $('input:radio[name=BandType]:checked').val();
          if (selected=="gradeCourse") {
              $('#BandSettingDiv').hide();
              $('#CourseSettingDiv').sh
              $('#CourseId option').eq(0).attr("selected",true);
              $('#BandId option').eq(0).attr("selected",true);
            }
          else{
                 $('#BandSettingDiv').show();
                 $('#CourseSettingDiv').hide();
                 $('#CourseId option').eq(0).attr("selected",true);
                 $('#BandId option').eq(0).attr("selected",true);
            }
        });
        $("#progressOfUpload").off('dialogclose').on('dialogclose', function(event) {
            $('table#viewUploadedFiles').jqGrid('GridUnload');
            me._initUploadedFilesGrid(options, "");
        });
    me._initUploadedFilesGrid(options, "");

},

【讨论】：

它运行良好 Krish。但是，当它重新加载时，它会关闭并重新加载。我该怎么做呢。

【解决方案2】：

您的代码似乎很可疑。尤其是像

这样的选择器

$('table#viewUploadedFiles')
$('#viewUploadedFilesDiv table#viewUploadedFiles')
$('#viewUploadedFiles table[id=viewUploadedFiles]')

怀疑使用了未知方法.cb，与.jqGrid有相同的选项。

我假设您使用 id duplicates 创建 HTML 标记，这在 HTML 中是不允许的，并且会带来很多问题。页面上id属性的值必须是唯一的。

即使<table> 和id 等于viewUploadedFiles 是唯一的，你也不应该使用像#viewUploadedFilesDiv table#viewUploadedFiles 或table[id=viewUploadedFiles] 这样的选择器。 DOM API 持有地图（字典）对象，它允许通过 id 非常快速地获取 DOM 元素。有 native DOM 方法getElementById。如果你使用$("#viewUploadedFiles")，那么该方法将被jQuery内部使用并且执行将很快。如果您使用其他选择器，例如table[id=viewUploadedFiles]，则执行会很慢，因为无法使用getElementById。像'#viewUploadedFilesDiv table#viewUploadedFiles' 这样的选择器也会很慢，因为jQuery 将首先使用getElementById 生成$("#viewUploadedFilesDiv")，然后在$("#viewUploadedFilesDiv") 上执行.find("table#viewUploadedFiles")。它会使执行速度变慢，只有当您的 HTML 标记有问题并且您允许 多个元素具有相同的 id="viewUploadedFiles" 时才应使用它。 jqGrid 代码在内部使用带有网格 id ($("#viewUploadedFilesDiv")) 的 id 选择器。因此，它不支持在具有重复 ID 的 <table> 上使用。结果另一个网格可能会被重新加载，并且您可以递归地重新加载父网格。

【讨论】：