2011-04-25 4 views
3

MVC 3 webgrid와 함께 작업 중이며 webgrid에 새 행을 추가하여 제품 테이블의 가격 합계를 표시해야합니다.
모든 아이디어는 높이 평가됩니다.
여기 내 코드
webgrid에 행 추가

@{ 
WebGrid grid = new WebGrid(source: Model, 
          rowsPerPage: 3, 
          canSort: true, 
          canPage: true, 
          ajaxUpdateContainerId: "ajaxgrid"); 


@grid.GetHtml(
    alternatingRowStyle: "altrow", 
    mode: WebGridPagerModes.All, 
    firstText: "<< ", 
    previousText: "< ", 
    nextText: " >", 
    lastText: " >>", 
    columns: grid.Columns(
      grid.Column(format: (item) => new HtmlString(Html.ActionLink("Edit", "Edit", new { id = item.ProductId }).ToString() + " | " + 
                 Html.ActionLink("Delete", "Delete", new { id = item.ProductId }).ToString() 
                 ) 
         ), 
      grid.Column("ProductId", "Product Id"), 
      grid.Column("CategoryId", "Category Name", format: (item) => item.Category.CategoryName), 
      grid.Column("ProductName", "Product Name"), 
      grid.Column("Price", "Price", format: @<text>@String.Format("{0:c}", item.Price)</text>) 
    ) 
) 

}

답변

0

이 끔찍한 해킹이지만이 내 하루에 얻을 수있다. 이 작업을 올바르게 수행하는 방법은 바닥 글 행을 전달할 수있는 HTML 도우미를 작성하는 것입니다. 나는 WebGrid가 바닥 글 행을 내장하고 있지 않는 조금 실망입니다.

gridHtml = MvcHtmlString.Create(gridHtml.ToString().Replace("</table>", sbTotalsTable.ToString())); 

    gridHtml is from var gridHtml = @grid.GetHtml....blah.. 


    the sbTotalsTable is var sbTotalsTable = new StringBuilder(); 

    sbTotalsTable.Append("<tr>"); 

    sbTotalsTable.Append("<td>"); 

    sbTotalsTable.Append(DataSource.Select(s=>s.PropToSum).Sum().ToString();//The total of that column 
    sb.TotalsTable.Append("</td>"); 
    sb.TotalsTable.Append("</tr>"); 
    sb.TotalsTable.Append("</table>");//closing the table without opening it because the rest comes from the gridHtml. 

오직 당신 만이 당신의 손 내장 된 테이블 행의 열 수와 일치해야합니다. 테이블 시작 태그가 없음을 주목하십시오. 전체 아이디어는 테이블에서 닫힌 HTML을 가로 채고 행을 추가하는 것입니다. 손으로 입력 한 코드는 유감스럽게 생각합니다. 저는 독점적 인 앱을 사용하고 있습니다. 아무 것도 붙여 넣지 않습니다.

0

바인딩 할 WebGrid의 소스로 사용하는 IEnumerable에 새 항목을 추가하십시오.

var lineItems = Model.LineItems; 
var totalRow = new SalesLineItem 
       { 
        SaleType = "Total Sales", 
        Amount = Model.TotalSales 
       }; 
lineItems.Add(totalRow); 

var grid = new WebGrid(lineItems); 

아직이 전체 행에 서식을 적용하는 좋은 방법을 찾지 못했습니다. 그것은 클라이언트 측에서해야 할 수도 있습니다.

2

비슷한 문제가있어서 기본 제공되는 MVC WebGrid의 확장을 만들었습니다. 코드 및 사용 예는 https://gist.github.com/3211605입니다. 잘하면 도움이됩니다.

@{ 
    var grid = new WebGrid(...); 
} 
@grid.GetHtml(
    ..., 
    htmlAttributes: new { id = "myTable" } 
) 

<span id="footerContent">This will be in footer</span> 

<script> 
    $().ready(function() { 
    $('#footerContent').appendTo('#myTable tfoot tr td:last'); 
    } 
</script> 

기본 사항은 다음과 같습니다 : 당신이 WebGrid에 바닥 글을 jQuery를 사용하고 열 정렬되지 않는 바닥 글 함량을 갖는, 추가 괜찮아 경우

1

조금 해키,하지만 어려운 일이 아니다

    테이블의 HTML ID 속성은, WebGrid.GetHtml의 htmlAttributes 매개 변수를 사용하여()
  1. 이 페이지
  2. U에 요소에 바닥 글의 내용을 넣어 설정
  3. seQuery의 .appendTo() 메소드를 사용하여 꼬리말의 TD 요소 끝에 content 요소를 추가하십시오.

더 강력한 솔루션을 사용하면 이러한 요소가 존재하는지 확인해야하지만 아이디어를 얻을 수 있습니다.

<span id="footerContent">@Model.Total</span> 
:

모델이 이미 합 (또는 합계를 얻을 수있는 방법), 단지처럼 바닥 글을 구축 포함되어 가정