2012-04-26 2 views
0

asp.net MVC 3 aspx보기 엔진을 사용하고 있습니다. 선택한 레코드를 통해 선택한 레코드 및 페이지를 제대로 표시하는 WebGrid 컨트롤이 있습니다. 필드 머리글을 클릭하면 데이터도 정렬됩니다.asp.net webgrid 헤더 서식 지정 및 페이징 문제

문제점 :

  1. 2 페이지이고 나는 정렬 필드 중 하나를 클릭하면, 그리드 정렬 후 다시 첫 페이지로 다시로드합니다. 나는 여전히 정렬을하면서 두 번째 페이지 자체에 유지하려고합니다.
  2. 아래의 코드 에서처럼 'Level'필드 중 하나 옆에 마우스 오버시 해당 필드를 설명하는 도구 설명처럼 작동하는 정적 DIV 레이어가 표시되는 이미지를 표시하려고합니다.

이 두 가지 작업을 수행 할 때 기본 제공되는 속성이없는 것 같습니다. 해결 방법이 있습니까? 시간에 대한

var grid = new WebGrid(source: Model.EmployeeList, columnNames: new[] { "Name", "Level", "Department"}); 

grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0, 
    columns: grid.Columns(
    grid.Column("Name", header: "Full Name"), 
    grid.Column("Level", header: "Level" ), 
    grid.Column("Department", header: "Department"))) 

감사합니다 ... 당신은 당신의 webgrid이있는 컨테이너의 이름뿐만 아니라 ajaxUpdateContainerId 매개 변수를 설정해야합니다

답변

0

: 여기 내 코드입니다. exampe의 경우 :

<div id="updateWebGrid"> 
    @grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0, ajaxUpdateContainerId: "updateWebGrid" 
    columns: grid.Columns( 
     grid.Column("Name", header: "Full Name"), 
     grid.Column("Level", header: "Level" ), 
     grid.Column("Department", header: "Department"))) 
</div> 

두 번째 질문 들어, 당신은 몇 가지 클래스 예를 들어

에게 주입하기 위해 칼럼의 형식 속성을 사용해야합니다

@helper CreateImage(string m) 
{ 
    <div>@m <img src="#" class="someImage"/></div> 
} 

@grid.GetHtml(columns: new WebGridColumn[] 
{ 
    new WebGridColumn() {ColumnName = "TestTypeId", Header = "Test Type"}, 
    new WebGridColumn() {ColumnName = "Name", Header = "Name", Format = m => CreateImage(m.Name)} 
}) 

이 부분을 선언하면, 당신이해야 someImage 클래스의 img 태그 위에 마우스를 올려 놓을 때마다 jQuery를 사용하여 div를 표시하십시오.

$(document).ready(function() { 
    $(".someImage").mouseover(function() { 
     $("yourDivId_Or_Class_for_Tooltip").show(); 
    }); 

    $(".someImage").mouseout(function() { 
     $("yourDivId_Or_Class_for_Tooltip").show(); 
    }); 
}); 

그게 전부입니다. 나는이 코드의 모든 부분을 검사하지는 않았지만 이것은 따라야 만하는 논리이다. WebGrid에 관한 블로그 기사를 작성 했으므로 참조 할 수 있습니다. http://apparch.wordpress.com/2012/01/04/webgrid-in-mvc3/

관련 문제