JQuery 메서드의 기존 WebGrid에 목록 데이터로드

다음과 같이 AJAX 호출의 성공 함수에서받는 사용자 지정 개체 목록이 있습니다. 다음JQuery 메서드의 기존 WebGrid에 목록 데이터로드

$.ajax({ 
     type: 'POST', 
     url: '@Url.Action("DeleteAdmin", "UserAdmin")', 
     cache: false, 
     dataType: 'json', 
     data: { userId: $('#hdnDeleteItem').val() }, 
     success: function (data) { 
      if (data != null) { 
       $('#MainGrid').html(data.GridData); // this does not work      
      }     
     } 
    });

는 WebGrid은 :

@grid.GetHtml(
     htmlAttributes: new { id = "MainGrid", width = "700px" }, 
     tableStyle: "table table-bordered table-responsive", 
     mode: WebGridPagerModes.All, 
     firstText: "<< First", 
     previousText: "< Prev", 
     nextText: "Next >", 
     lastText: "Last >>", 

     columns: grid.Columns(
      grid.Column("UserId", "User ID"), 
      grid.Column("User Role", format: (item) => item.SelectedUserRole.UserRoleName), 
      grid.Column("Action", 
       format: @<text> 
       <a href="#" class="link-delete" id="@item.UserId" onclick="SetSelectedUserId(this)">Delete</a> 
       </text>) 
     ) 
    )

다음은 JSON 결과를 전달하는 동작 방법.

public JsonResult UpdateDetails() 
    { 
     IList<UserModel> userModels = GetUserModels(); 
     return Json(new { GridData = userModels }, JsonRequestBehavior.AllowGet); 
    }

"성공"기능에서 "data.GridData는"이 방법으로 전달 된 객체의 목록이 포함되어 있지만, 그것은 WebGrid로를 설정하지 않습니다. 대신 webgrid가 보이지 않거나 비어있게됩니다.

목록을 WebGrid로 설정할 수있는 방법이 있습니까?

출처

2017-10-05 Watz

반환하는 개체 자체가 아니라 테이블에 실제 데이터를 추가해야합니다. 다음과 같음 :

data.GridData.map(function(item){ 
    var row = "<tr>"; 
     row += "<td>" + item.UserId + "</td>"; 
     row += "<td>" + item.UserRole + "</td>"; 
     row += "<td>" + item.Action + "</td>"; 
     row += "</tr>"; 
    $('#MainGrid').find('tbody').append(row);

});

출처

2017-10-05 19:24:12 Eliellel

해답을 제공해 주셔서 감사합니다. 그것은 작동! 이것은 내가 모든 행을 다시 추가하는 대신 WebGrid에서 삭제 된 행을 제거하는 다른 솔루션으로 이끌었다 (그렇지 않으면 WebGrid를 지워야 함). 하지만 행 인덱스를 삭제하기 위해 행 삭제 인덱스를 추적해야합니다. WebGrid에서 이것이 가능하다고 생각하십니까? – Watz

제거하려는 레코드의 ID를 알고있는 경우 행을 삽입 할 때 각 에 데이터 속성으로 해당 ID를 할당 한 다음 나중에 제거하려는 경우 $ ("tr [data-id = {id}] "). remove(); – Eliellel

감사합니다. Eliellel. 나는 행 인덱스를 저장하고 이것을 유지했다 : document.getElementById ('MainGrid'). deleteRow (data.deleteRowIndex); – Watz

JQuery 메서드의 기존 WebGrid에 목록 데이터로드

답변

관련 문제