안녕하세요. 지난 시간에는 jqGrid를 이용해서 리스트를 구현해봤습니다. 정말 맛보기였죠? :)
이번 시간은 실제 데이터베이스에서 데이터 조회, 페이징과 정렬부분을 다루도록 하겠습니다.
먼저 데이터베이스 생성
테이블 구조는 다음과 같습니다.
그냥 기본세팅이죠^^;
엔터티 모델 클래스를 생성할 건데요, 자세히(?)를 원하신다면 이전 포스팅을 참고해주세요^^;
완료가 되면,
여기까지 잘 오셨죠? 저는 Entity Set Name을 TelDir에서 TelDirSet으로 변경하였습니다. 헷갈려서요^^;;
자. 이제는 본격적(?)으로 살펴볼까요? (어째.. 오늘도 맛보기일것 같은 분위기가 물~씬 풍기시죠? ㅡ,.ㅡ;)
페이징 기능을 달자
지난 뷰페이지에 pager란 id로 div 태그를 추가하겠습니다.
테이블 뒤에 추가하시면 됩니다.
그리고, 스크립트 부분도 수정해야겠죠?
추가된 부분은 굵은글씨로 표시하였습니다. 일단, grid.locale-en.js를 추가해야되더라고요^^; 디폴트로 그냥 jqGrid 스크립트를 넣을때 추가하라고 하였는데, 제가 지난 포스팅때는 빠뜨렸죠.
이런 언어 스크립트 파일에는 페이징 관련한 디폴트 값들이 들어가 있습니다.
나머지 프로퍼티에 대한 설명을 드리자면,
pager는 위 이미지 보이시죠? ^^; 저렇게 레코드들을 이동할수 있게 해주는 페이징 바를 정의합니다.
저같은 경우는 $('#pager')로 jQuery 표현을 썼는데요, jqGrid의 wiki를 보니 '#pager', 'pager', jQuery('#pager') 세가지 경우가 모두 가능한데요. 앞에 두가지 방법을 추천한다네요. 흠. jQuery 변수가 내보내기, 가져오기 모듈을 이용할때 문제를 발생시킬수 있다고 합니다. 이 부분은 차츰(?) 찾아보도록 하죠;;
emptyrecords는 말 그대로 데이터가 없을 때 표현할 문구를 나타내고요,
rowNum은 페이지에서 보여줄 레코드 갯수,
rowList는 페이지 갯수를 선택할 수 있도록 하는 셀렉트박스의 옵션들,
sortname, sortorder는 각각 정렬할 컬럼과 정렬방식(오름차순, 내림차순),
viewrecords는 토탈 레코드의 수(위 이미지에서 View 1 -3 of 5)를 표현하는 것을 허용할 것인지 여부를 나타냅니다.
이제 뷰페이지는 완성이 되었고요, 컨트롤러 손봐야겠죠?
EntityGridData() 라는 이름의 액션메쏘드를 추가하겠습니다.
궁금해 보이는 것이 없죠? ㅎㅎ
jqGrid가 EntityGridData를 호출할때 파라미터(sidx : dirId, sord : desc, page : 1, rows : 3)를 날립니다~~~
실행을 해보면,
너무 간단하게 페이징 기능이 완성되었습니다^^
네이게이션 기능 되고요~ 셀렉트박스로 로우 갯수 선택 기능 되고요~ No탭 클릭하시면 정렬 기능 됩니다요~
마무리요
실행화면 출력하고 보니 아직도 맛!보!기! 인것을 보면 아직 한참 멀은 듯 합니다.
더 알찬 정보로 준비하도록 하겠습니다^^
감사합니다.
참고자료 :
http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager&s[]=paging&s[]=properties
이번 시간은 실제 데이터베이스에서 데이터 조회, 페이징과 정렬부분을 다루도록 하겠습니다.
먼저 데이터베이스 생성
테이블 구조는 다음과 같습니다.
| 컬럼명 | 데이터 타입 |
| dirId | int |
| name | nvarchar(50) |
| phone | nvarchar(50) |
| nvarchar(50) | |
| speedDial | decimal(2,0) |
그냥 기본세팅이죠^^;
엔터티 모델 클래스를 생성할 건데요, 자세히(?)를 원하신다면 이전 포스팅을 참고해주세요^^;
완료가 되면,
여기까지 잘 오셨죠? 저는 Entity Set Name을 TelDir에서 TelDirSet으로 변경하였습니다. 헷갈려서요^^;;
자. 이제는 본격적(?)으로 살펴볼까요? (어째.. 오늘도 맛보기일것 같은 분위기가 물~씬 풍기시죠? ㅡ,.ㅡ;)
페이징 기능을 달자
지난 뷰페이지에 pager란 id로 div 태그를 추가하겠습니다.
<div id="pager" class="scroll" style="text-align:center;"></div>
테이블 뒤에 추가하시면 됩니다.
그리고, 스크립트 부분도 수정해야겠죠?
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: '<%= Url.Action("EntityGridData", "Home") %>',
datatype: 'json',
mtype: 'POST',
colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
colModel: [
{ name: 'dirId', index: 'dirId', width: 40, align: 'center' },
{ name: 'name', index: 'name', width: 100, align: 'left' },
{ name: 'phone', index: 'phone', width: 150, align: 'left' },
{ name: 'email', index: 'email', width: 250, align: 'left' },
{ name: 'speedDial', index: 'speedDial', width: 100, align: 'center'}],
pager: $('#pager'),
emptyrecords: "Nothing to display",
rowNum: 3,
rowList: [3, 10, 20, 50],
sortname: 'dirId',
sortorder: "desc",
viewrecords: true,
caption: '전화번호부'
});
});
</script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: '<%= Url.Action("EntityGridData", "Home") %>',
datatype: 'json',
mtype: 'POST',
colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
colModel: [
{ name: 'dirId', index: 'dirId', width: 40, align: 'center' },
{ name: 'name', index: 'name', width: 100, align: 'left' },
{ name: 'phone', index: 'phone', width: 150, align: 'left' },
{ name: 'email', index: 'email', width: 250, align: 'left' },
{ name: 'speedDial', index: 'speedDial', width: 100, align: 'center'}],
pager: $('#pager'),
emptyrecords: "Nothing to display",
rowNum: 3,
rowList: [3, 10, 20, 50],
sortname: 'dirId',
sortorder: "desc",
viewrecords: true,
caption: '전화번호부'
});
});
</script>
추가된 부분은 굵은글씨로 표시하였습니다. 일단, grid.locale-en.js를 추가해야되더라고요^^; 디폴트로 그냥 jqGrid 스크립트를 넣을때 추가하라고 하였는데, 제가 지난 포스팅때는 빠뜨렸죠.
이런 언어 스크립트 파일에는 페이징 관련한 디폴트 값들이 들어가 있습니다.
defaults:{
recordtext:"View {0} - {1} of {2}",
emptyrecords:"No records to view",
loadtext:"Loading...",
pgtext:"Page {0} of {1}"
}
recordtext:"View {0} - {1} of {2}",
emptyrecords:"No records to view",
loadtext:"Loading...",
pgtext:"Page {0} of {1}"
}
나머지 프로퍼티에 대한 설명을 드리자면,
pager는 위 이미지 보이시죠? ^^; 저렇게 레코드들을 이동할수 있게 해주는 페이징 바를 정의합니다.
저같은 경우는 $('#pager')로 jQuery 표현을 썼는데요, jqGrid의 wiki를 보니 '#pager', 'pager', jQuery('#pager') 세가지 경우가 모두 가능한데요. 앞에 두가지 방법을 추천한다네요. 흠. jQuery 변수가 내보내기, 가져오기 모듈을 이용할때 문제를 발생시킬수 있다고 합니다. 이 부분은 차츰(?) 찾아보도록 하죠;;
The definition of the pager in the grid can be done this way:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). All the three methods are valid, but I recommend to use the first or second one, since the jQuery variant causes problems when we try to use Exporting and Importing modules.
emptyrecords는 말 그대로 데이터가 없을 때 표현할 문구를 나타내고요,
rowNum은 페이지에서 보여줄 레코드 갯수,
rowList는 페이지 갯수를 선택할 수 있도록 하는 셀렉트박스의 옵션들,
sortname, sortorder는 각각 정렬할 컬럼과 정렬방식(오름차순, 내림차순),
viewrecords는 토탈 레코드의 수(위 이미지에서 View 1 -3 of 5)를 표현하는 것을 허용할 것인지 여부를 나타냅니다.
이제 뷰페이지는 완성이 되었고요, 컨트롤러 손봐야겠죠?
EntityGridData() 라는 이름의 액션메쏘드를 추가하겠습니다.
[HttpPost]
public ActionResult EntityGridData(string sidx, string sord, int page, int rows)
{
// 데이터베이스 연결
MvcDbEntities _db = new MvcDbEntities();
// 페이징 변수 세팅
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows; // 3
int totalRecords = _db.TelDirSet.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
// 데이터 조회(페이징&정렬)
// sidx : dirId
// sord : desc
var dirs = _db.TelDirSet
.OrderBy("it." + sidx + " " + sord)
.Skip(pageIndex * pageSize)
.Take(pageSize)
.ToList();
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (
from dir in dirs
select new
{
i = dir.dirId,
cell = new string[] {
dir.dirId.ToString(), dir.name.ToString(), dir.phone.ToString(), dir.email.ToString(), dir.speedDial.ToString()
}
}).ToArray()
};
return Json(jsonData);
}
public ActionResult EntityGridData(string sidx, string sord, int page, int rows)
{
// 데이터베이스 연결
MvcDbEntities _db = new MvcDbEntities();
// 페이징 변수 세팅
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows; // 3
int totalRecords = _db.TelDirSet.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
// 데이터 조회(페이징&정렬)
// sidx : dirId
// sord : desc
var dirs = _db.TelDirSet
.OrderBy("it." + sidx + " " + sord)
.Skip(pageIndex * pageSize)
.Take(pageSize)
.ToList();
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (
from dir in dirs
select new
{
i = dir.dirId,
cell = new string[] {
dir.dirId.ToString(), dir.name.ToString(), dir.phone.ToString(), dir.email.ToString(), dir.speedDial.ToString()
}
}).ToArray()
};
return Json(jsonData);
}
궁금해 보이는 것이 없죠? ㅎㅎ
jqGrid가 EntityGridData를 호출할때 파라미터(sidx : dirId, sord : desc, page : 1, rows : 3)를 날립니다~~~
실행을 해보면,
너무 간단하게 페이징 기능이 완성되었습니다^^
네이게이션 기능 되고요~ 셀렉트박스로 로우 갯수 선택 기능 되고요~ No탭 클릭하시면 정렬 기능 됩니다요~
마무리요
실행화면 출력하고 보니 아직도 맛!보!기! 인것을 보면 아직 한참 멀은 듯 합니다.
더 알찬 정보로 준비하도록 하겠습니다^^
감사합니다.
참고자료 :
http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager&s[]=paging&s[]=properties
'ASP.NET MVC' 카테고리의 다른 글
| M, V 그리고 C의 각방생활(11) - jqGrid로 데이터 추가,편집,삭제해보기 (28) | 2010.08.11 |
|---|---|
| ASP.NET MVC 3 Preview 1 이 릴리즈 되었습니다. (1) | 2010.07.28 |
| M, V 그리고 C의 각방생활(9) - jqGrid 사용해보자 (0) | 2010.07.14 |
| M, V 그리고 C의 각방생활(8) - jQuery와 탭메뉴 그리고 파샬뷰 (0) | 2010.07.01 |
| M, V 그리고 C의 각방생활(7) - 함께 즐겨요~ jQuery (4) | 2010.06.30 |
