2013-11-09 1 views
0

jquery 1.6.2.mins와 최신 jqGrid - jqGrid 4.5.4를 사용하여 jqGrid를 표시하려고합니다.jqGrid JSON map이 INDEX 값을 읽지 않습니다.

내 프로젝트 설정은 다음과 같습니다 ASP.NET - MVC2이

문제는 닷넷 4.0 비주얼 스튜디오 2010을 프레임 워크를 사용하여 내 C# 클래스에서 나는 것 데이터베이스에서 모든 행을 추가 해요 한 지점 또는 다른 지점에서 사용. 두 행을 처음에 표시하고자합니다 (NAME, DESCRIPTION).

jqGrid는 두 개의 행을 표시하지만 첫 번째 행에 내 ID 행을 표시하여 설명 열의 내용을 표시해야합니다. 그래서 기본적으로 일어나는 일은 행이 오른쪽으로 이동하고 열 매핑이 작동하지 않는다는 것입니다. NAME = 'NAME_TXT',하지만 어떤 이유로 디스플레이에 표시되는 내용은 NAME = ID입니다. 나는 또한 내가 JSON 데이터 내가 console.log("JSON DATATYPE: " + $datatype)에 뭔가 같은 객체를 표시 어떻게 다시 C# 코드에서 점점 모든 것을 표시 할 수있는 방법을 알고 싶은 것입니다

colNames: ['NAME', 'DESCRIPTION'], 
colModel: [ 
    { name: 'NAME', index: 'NAME_TXT', align: 'left' }, 
    { name: 'DESCRIPTION', index: 'DESCRIPTION_TXT', align: 'left'} 
], 

.

감사합니다.

자바 스크립트 코드 :

$(function() { 
    $grid = $("#grid"); 

    $grid.jqGrid({ 
     type: 'GET', 
     contentType: "application/json; charset=utf-8", 
     url: '/csc/devapp1/Home/LinqGridData/', 
     datatype: 'json', 
     colNames: ['NAME', 'DESCRIPTION'], 
     colModel: [ 
      { name: 'NAME', index: 'NAME_TXT', align: 'left' }, 
      { name: 'DESCRIPTION', index: 'DESCRIPTION_TXT', align: 'left'}],  
     sortname: 'NAME_TXT', 
     sortorder: "desc", 
     repeatitems: false, 
     viewrecords: true, 
     height: '500px', 
     autowidth: true}); 
}); 

C# 코드 : 나는 과거에 시도

public ActionResult LinqGridData(string sidx, string sord, int page, int rows) 
{ 
    var context = new CSCEntities(); 

    var jsonData = new 
    { 
     total = 1, 
     page = page, 
     records = context.tbl_Quickfix_Toolbar.Count(), 
     rows = context.tbl_Quickfix_Toolbar.AsEnumerable().Select(n => 
      new { n.QUICKFIX_ID, 
       cell = new string[] { 
        n.QUICKFIX_ID.ToString(), 
        n.NAME_TXT.ToString(), 
        n.DESCRIPTION_TXT.ToString(), 
        n.INSTRUCTIONS_TXT.ToString(), 
        n.TYPE_TXT.ToString(), 
        n.FIXLINK_TXT.ToString()} 
      }).ToArray() 
    }; 
    return Json(jsonData, JsonRequestBehavior.AllowGet); 
} 

다른 C# 코드는 작동하지 않았다 :

public ActionResult GridData(string sidx, string sord, int page, int rows) 
    { 
     CSCEntities entities = new CSCEntities(); 
     int pageIndex = Convert.ToInt32(page) - 1; 
     int pageSize = rows; 
     int totalRecords = entities.tbl_Quickfix_Toolbar.Count(); 
     int totalPages = (int)Math.Ceiling((float)totalRecords/(float)pageSize); 

     var jsonData = new { 
      total = totalPages, 
      page = page, 
      records = totalRecords, 

      rows = (
       from entity in entities.tbl_Quickfix_Toolbar 

       select new { 
        id = entity.QUICKFIX_ID, 
        cell = new string[] { 

         entity.NAME_TXT.ToString(), 
         entity.DESCRIPTION_TXT.ToString(), 
         entity.QUICKFIX_ID.ToString(), 
         entity.INSTRUCTIONS_TXT.ToString() } 
        }).ToArray() 
     }; 
     return Json(jsonData, JsonRequestBehavior.AllowGet); 
    } 

답변

1

당신이 게시 한 코드를 클라이언트와 서버 측 모두에 많은 문제가 있습니다. 나는 몇 가지 문제 만 언급 할 것이다.

주요 문제는 사용하는 서버 코드에 있습니다. 당신은 당신이 추가 .AsEnumerable()을 제거하기 위해 고려해야한다 또는 select이 적용된 후 이동하는

... 
new { 
    id = n.QUICKFIX_ID, 
    cell = new [] { 
     n.NAME_TXT.ToString(), 
     n.DESCRIPTION_TXT.ToString() 
    } 
} 
... 

로 변경해야 보인다 서버 코드

... 
new { n.QUICKFIX_ID, 
    cell = new string[] { 
     n.QUICKFIX_ID.ToString(), 
     n.NAME_TXT.ToString(), 
     n.DESCRIPTION_TXT.ToString(), 
     n.INSTRUCTIONS_TXT.ToString(), 
     n.TYPE_TXT.ToString(), 
     n.FIXLINK_TXT.ToString()} 
} 
... 

현재 사용합니다.

우선 index 속성은 서버 측 정렬에 약간의 의미가 있습니다. 게시 한 서버 코드는 sidxsord 매개 변수를 사용하지 않습니다. 따라서 모두 indexcolModel에서 제거해야합니다. index 특성이 지정되지 않은 경우 jqGrid는 index에 대해 동일한 값을 name 특성으로 사용합니다. 99 %의 시나리오에서 필요한 것입니다. 따라서 index 속성을 지정하지 않는 것이 좋습니다. 배열 형식의 항목 (cell = new string[] {...})을 사용하기 때문에 name 속성을 선택하면 name: 'NAME'과 같은 방식으로 name: 'NAME_TXT'을 사용할 수 있습니다. 데이터베이스의 열 이름이 NAME_TXTDESCRIPTION_TXT 인 경우 개인적으로 동일한 값을 사용하는 것이 좋습니다 name.

기본값 align의 기본값은 'left'입니다. 따라서 불필요한 align: 'left' 속성을 colModel에서 제거하는 것이 좋습니다. height 옵션의 경우 '500px' 값이 잘못되었습니다. 올바른 값은 "auto" 문자열 또는 "100%" 문자열이거나 height: 500과 같은 정수 값입니다. 나는 개인적으로 height: "auto"을 사용하고 싶다.

jqGrid에는 contentType 옵션이 없습니다. HTTP 요청의 contentType을 지정해야하는 경우 {ajaxGridOptions: { contentType: "application/json; charset=utf-8" }을 대신 사용해야합니다. repeatitems 옵션이 없으므로 제거해야합니다. 다른면에서는 jqGrid에 두 개의 다른 옵션을 추가하는 것이 좋습니다. gridview: trueautoencode: true.

한 가지 더 중요한 옵션은 rowNum입니다. 기본값은 20입니다. 값은 rows 매개 변수의 값으로 서버에 전송됩니다 (매개 변수는 LinqGridData 참조). 서버는 rows 데이터 항목 만 sidx으로 정렬하여 반환해야합니다. 서버가 rows 개 항목 (20 개 항목 이상)을 반환하면 jqGrid는 첫 번째 rows 개 항목 (처음 20 개 항목) 만 계속 표시합니다. 일반적으로 그리드는 그리드의 하단 또는 상단에 호출기 바를 가지고 있습니다. 따라서 사용자는 다른 페이지로 이동할 수 있습니다. 현재 page 또는 toppager 옵션을 사용하지 마십시오. 결과적으로 그리드에는 최대 20 개의 행이 포함되며 사용자는 나머지 데이터를보기 위해 페이징을 사용할 가능성이 없습니다. pager 또는 toppager: true 옵션을 사용하거나 적어도 서버에서 반환 된 최대 10000 개의 행을 표시하려면 rowNum: 10000 옵션을 포함시켜야합니다. 당신이 서버 측 페이징, 정렬 및 데이터의 필터링을 구현하지 않는 경우

당신이있는 jqGrid에 모든 데이터를 반환하지만,있는 jqGrid의 loadonce: true 옵션을 사용할 수 있습니다. 모든 데이터가 로컬에 저장되는 경우 datatype은 서버에서 처음로드 한 후 "local"으로 변경되며 사용자는 데이터 을 로컬로으로 정렬하거나 추가 코드를 작성할 필요없이 페이징을 사용할 수 있습니다. 표시해야하는 데이터 (tbl_Quickfix_Toolbar)가 너무 크지 않은 경우 매우 실용적인 옵션입니다.

+0

올레그, 당신이 제안한 모든 변경 작업이 아닙니다. 그래서 내가하려고했던 것은 : 1. 테이블에 두 개의 열을 표시해야하는데 테이블은 에만 약 20 개의 행이 있습니다. 즉시 모든 것을 표시하므로 은 결코 문제되지 않았습니다. 2. 표시에 대한 추가 열에 대한 정보를 툴팁이나 대화 상자로 사용해야했습니다. 그래서 내 서버 측 코드에서 AsEnumerable() 함수 호출을 제거하려고했는데 그리드가 부러졌습니다. 당신이 권하고 싶었던대로 select 문 다음에 배치하려고했는데 그리드도 손상되었습니다. 당신의 제안 중 일부는 도움이되었습니다. 고맙습니다. – JEuvin

+0

AsEnumerable() 서버 측 코드 전에 사용했던 서버 측 코드도 추가했습니다. 그게 효과가 없었고 왜 그런지 모르겠다. 또한 데이터 형식을 로컬로 변경하려고하면 그리드가 손상됩니다. – JEuvin