内联编辑 JQGrid 时是否可以显示微调器？

Question

我正在使用 JQGrid。在线编辑 JQGrid 并将数据保存到数据库时，需要一些时间，在此期间我的页面变得无响应。因此，在那个时间跨度内，我可以显示微调器以向用户显示您编辑的数据是 "Updating..." 我正在为 jqgrid init 使用以下代码：

 LoadProjectDetailsGrid = function () {
    var myGrid = $('#jqgProjectLists');
    myGrid.jqGrid("GridUnload");
    myGrid.jqGrid({
        url: '@Url.Action("GetProjectLists", "Config")',
        editurl: '@Url.Action("UpdateProjectListGrid", "Config")',
        datatype: 'json',
        mtype: 'POST',
        contentType: 'application/json; charset-utf-8',
        colNames: ['ID', 'PJT', 'Full Name', 'Model Type', 'Pjt Code', 'Model State', 'Project Type', 'Dev. Department',
                   'Client Model Name1', 'Client Model Name2', 'Client Model Name3', 'Model Status', 'Action'],
        colModel: [
                    { name: 'Model_ID', index: 'Model_ID', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
                    { name: 'PJT_Nm', index: 'PJT_Nm', width: 150, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
                    { name: 'Model_Nm', index: 'Model_Nm', width: 140, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
                    { name: 'Model_Type', index: 'Model_Type', width: 80, sortable: true, align: 'center', editable: false, search: false },
                    { name: 'PJT_Code', index: 'PJT_Code', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
                    { name: 'Model_State', index: 'Model_State', width: 110, sortable: true, align: 'center', editable: false, search: false },
                    { name: 'PJT_Type', index: 'PJT_Type', width: 100, sortable: true, align: 'center', editable: false, search: false },
                    { name: 'Dev_Dept_Nm_En', index: 'Dev_Dept_Nm_En', width: 200, sortable: true, align: 'left', editable: false, search: false },
                    { name: 'Client_Model_Nm1', index: 'Client_Model_Nm1', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
                    { name: 'Client_Model_Nm2', index: 'Client_Model_Nm2', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
                    { name: 'Client_Model_Nm3', index: 'Client_Model_Nm3', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
                    { name: 'Model_Status', index: 'Model_Status', width: 100, sortable: true, align: 'center', editable: true, search: false, edittype: 'checkbox', editoptions: { value: "Y:N" }},
                    { name: 'Action', index: 'Action', width: 70, sortable: false, formatter: 'actions', viewable: false, search: false, formatoptions: { keys: true, editformbutton: false, editbutton: true, delbutton: false } }

        ],
        pager: '#jqgProjectListPager',
        rowNum: 10,
        rowList: [10, 20, 30, 100],
        sortname: 'PJT_Nm',
        sortorder: "desc",
        autowidth: true,
        shrinkToFit: true,
        viewrecords: true,
        gridview: true,
        loadonce: true,
        rownumbers: true,
        rownumWidth: 30,
        height: 'auto',
        width: 'auto',
        caption: "  " + "PROJECT LIST",
        loadtext: "Loading ...",
        emptyrecords: "No data to display!",
        multiselect: false,
        prmNames: { id: "Model_ID" },
        cellsubmit: "remote",

    });
    // Navi(View, Add,...)search: false,
    myGrid.jqGrid('navGrid', '#jqgProjectListPager', { add: false, edit: false, del: false, search: true, view: true, refresh: true },
            //edit options
            {
            },
            //add options
            {},
            //del options
            {
            },
                //search options
           {
               searchOnEnter: true,
               closeOnEscape: true,
               reloadAfterSearch: true
           },
             // veiw options
            {
                width: 500, height: 'auto',
                closeOnEscape: true,
                beforeShowForm: function (form) {
                },
                afterShowForm: function (form) {
                },
                showHideColumn: function (form) {
                }
            }
         );
    $("#jqgProjectLists").jqGrid('inlineNav', '#jqgProjectListPager',
               {
                   add: false,
                   edit: true,
                   editicon: "ui-icon-pencil",
                   save: true,
                   saveicon: "ui-icon-disk",
                   savetext : "Save",
                   cancel: true,
                   cancelicon: "ui-icon-cancel",
                   canceltext: "Cancel",
                }
      );
//handles the grid resize on window resize
    ResizeJQGrid(myGrid, $(window));
}

在配置控制器中

    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult UpdateProjectListGrid(ProjectListsDetails oProjectListRow)
    {
        _configMgr.UpdateProjectListGrid(oProjectListRow, CurrentCaUser);
        JqGridDataRequest jqgdRequest = new JqGridDataRequest();
        JqGridDataResponse response = _configMgr.GetProjectLists(jqgdRequest, oProjectListRow, CurrentCaUser);

        var jsonData = new
        {
            total = response.TotalPages,
            page = jqgdRequest.page,
            records = response.TotalRecords,
            rows = response.Rows
        };

        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

Answer 1

好吧，您可以在 jqgrid 定义的编辑选项部分中的 beforeSubmit 事件中显示微调器并在 afterSubmit 事件中隐藏微调器，但是您可以使用 [=13 中的一些不同事件=].

//edit options
{
   beforeSubmit : function(postdata, formid) { 
      $("#your-spinner").show();
      return[true,'']; 
   },
   afterSubmit : function(response, postdata) 
   { 
      $("#your-spinner").hide();
      return [true,''] 
   }
},