更新特定行而不重新加载JqGrid

时间:2016-10-20 08:24:40

标签: javascript ajax jqgrid

我目前正在使用JqGrid进行数据可视化。 这是我的JqGrid配置。

 $('#jqGrid').jqGrid({
  url: '/ConfirmationOfEmployment/GetUsers',
  mtype: "POST",
  rowNum: currentPageSize,
    datatype: "json",
    colNames: ['UserId', 'First Name', 'Last Name', 'Email Address', 'Expiry Date', 'Remaining Days', 'Actions','Remind Status'],
    colModel: [
            { name: 'UserId', index: 'UserId', align: 'left', hidden: true, edittype: 'text' },
            { name: 'FirstName', index: 'FirstName', align: 'left' },
            { name: 'LastName', index: 'LastName', align: 'left' },
            { name: 'Email', index: 'Email', align: 'left' },
            { name: 'userExpiryDate', index: 'ExpiryDate', align: 'center', classes: 'createdDate' },
            { name: 'remainingDays', index: 'RemainingDays', align: 'center' },
            { name: 'isReminded', index: 'isReminded', align: 'left', hidden: true, edittype: 'text' },
            { name: 'act', index: 'act' },
                    ],
    pager: $('#jqPager'),
    sortname: currentSortName,
    width: '700',
    shrinkToFit: false,
    sortorder: currentSortOrder,
    search: true,
    postData: {
        filters: RetrieveFilters
    },
    gridComplete: function () {
      var ids = jQuery('#jqGrid').jqGrid('getDataIDs');
      var remindStatus = jQuery('#jqGrid').jqGrid('getCol', 'isReminded');
      for (var i = 0; i < ids.length; i++) {
        var userId = ids[i];
        var isUserReminded = remindStatus[i];
        var confrim = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Confirm' onclick=\"ConfirmUser('" + userId + "','"+i+"');\"  />";
        var remove = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Delete' onclick=\"DeleteUser('" + userId + "');\" />";
        var remind;
        if (isUserReminded == 'True') {
          remind = "<input style='height:25px;width:60px;margin-left:5px;' type='button' disabled value='Remind' onclick=\"RemindUser('" + userId + "');\"  />";
        }
        else {
          remind = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Remind' onclick=\"RemindUser('" + userId + "');\"  />";
        }      

        jQuery('#jqGrid').jqGrid('setRowData', ids[i], { act: confrim + remind + remove });
      };
      PageIndexHashUpdate();
    }
});


在每一行中,有三个按钮。一旦用户点击&#34;确认按钮&#34;它激活了对服务器的ConfirmUser javascript ajax调用,并更新了特定用户的到期日期和剩余天数。一旦它成功,它将重新加载网格。所以它工作正常。这是代码。< / p>

ConfirmUser = function (selectedUserId, rowId) {
  $.ajax({
    url: "/ConfirmationOfEmployment/ConfirmUser",
    async: false,
    cache: false,
    type: "POST",
    dataType: "json",
    data: { userId: selectedUserId },
    error: function (jqXHR, textStatus, errorThrown) {
      $.flashMessage({ "error": errorThrown, "alert": "error" });
    },
    success: function (data, textStatus, jqXHR) {
      console.log(rowId);
      console.log(data.newExpiryDate);
      var rowData = $('#jqGrid').jqGrid('getRowData', rowId);
      console.log(rowData);
      //rowData.remainingDays = '180';
      //rowData.userExpiryDate = data.newExpiryDate;
      //$('#jqGrid').jqGrid('setRowData', rowId, rowData)
      //$("#jqGrid").jqGrid('setCell', rowid, 'remainingDays', data.remaining);
      //$("#jqGrid").jqGrid('getLocalRow', rowid).remainingDays = data.remaining;
      $('#jqGrid').trigger("reloadGrid", [{ page: currentPage, current: true }]);
    }
  });
};


但问题是,一旦用户继续单击各种用户记录的确认按钮,每次都会重新加载网格,这非常耗时。
那么我是什么seek是一种仅更新特定行的方法(而不是重新加载网格。) 我尝试使用&#39; setCell&#39;和&#39; setRowData&#39;方法(注释掉了。)但我失败了。所以我想知道如何在不重新加载网格的情况下更新特定的单元格或行?谢谢。

0 个答案:

没有答案