jQuery를 사용하여 ASP.NET GridView_jquery의 접기 및 늘이기 효과를 얻는 방법

오늘 정적 페이지를 만들 때 요구 사항이 있습니다. 즉, 페이지에 두 가지 옵션이 있는 라디오 버튼 세트와 6개 행 목록이 있습니다(목록은 DIV가 아닌 Table 태그로 구현됨). 라디오 버튼 옵션을 선택하면 잠시 동안 목록의 처음 3개 정보가 표시되고 마지막 3개 정보는 숨겨집니다. 라디오 버튼 옵션 2를 선택하면 처음 3개 정보가 숨겨집니다. 목록의 정보는 숨겨지고 마지막 세 가지 정보가 표시됩니다. 그렇다면 오늘의 주제는 어떻게 달성할 수 있을까요? 구현 후 이 구현을 다른 어떤 시나리오에 적용할 수 있나요?

1. 1차 대응 솔루션

이 요구 사항에 직면한 후 첫 번째 반응은 두 개의 DIV를 사용하여 처음 세 개의 테이블과 마지막 세 개의 TR 태그에 TR 태그를 래핑한 다음 JS를 통해 DIV 표시를 제어한다는 것이었습니다.

1단계: DIV 래핑을 사용하여 표시된 TR을 숨깁니다. 코드는 다음과 같습니다.

<table> 
<div id="divName"> 
<tr> 
<td>姓名：</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</div> 
<div id="divSex"> 
<tr> 
<td>年龄：</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</div> 
</table> 

2단계: JS를 사용하여 DIV 표시를 제어하여 행 숨기기 또는 표시 효과 달성:

$("#divName").style.display = "없음"
$("#divSex").style.display = "차단"
3단계: 프로그램을 실행해 보면 전혀 작동하지 않는 것을 볼 수 있습니다. 하하, 약간 속은 듯한 느낌이 듭니다~! TR 태그는 TABLE 태그에만 사용할 수 있기 때문이죠! 좋아요, 위의 코드는 작동하지 않지만요! 그러나 그것은 여전히 ​​​​안내자 역할을합니다. 실패는 성공입니다!

2. 추천 패널 솔루션

이건 DIV와 TR을 함께 사용할 수 없다고 설명하고 동료들에게 비웃음을 받은 후입니다. 야, 나중에는 HTML에 대해 더 많이 배워야 할 것 같습니다. Ning은 TR을 PANEL 컨트롤로 래핑하고 Visible 속성을 사용하여 서버 수준에서 TR의 출력을 제어하라고 말했습니다.

1단계: PANEL 컨트롤을 사용하여 표시하거나 숨기는 데 사용되는 TR 태그를 래핑합니다.

<table> 
<asp:Panel ID="plName" runat="server"> 
<tr> 
<td>姓名：</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
</asp:Panel> 
<asp:Panel ID="plSex" runat="server" > 
<tr> 
<td>年龄：</td> 
<td><input id="txtsex" type="text" /></asp:Panel></td> 
</tr> 
</asp:Panel> 
</table> 

2단계: 서버측 패널 컨트롤의 Visible 속성을 사용하여 행 출력을 제어합니다.

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) 
{ 
 string val = RadioButtonList1.SelectedValue; 
 switch (val) 
 { 
  case "Name": 
   plName.Visible = true; 
   plSex.Visible = false; 
   break; 
  case "Sex": 
   plName.Visible = false; 
   plSex.Visible = true; 
   break; 
  default: 
   plName.Visible = true; 
   plSex.Visible = true; 
   break; 
 } 
} 

이 방법은 아무 문제가 없지만 그래도 너무 허무하다고 느껴지죠? 페이지 표시를 제어하는 ​​코드를 서버 측에서도 수행해야 합니까? 얼마나 성능 낭비입니까! 게다가 페이지 제어 코드와 논리적 상호 작용 코드를 함께 배치하는 것은 혼란스러울 뿐입니다. 이 방법이 거부되자 우리의 영웅 와이와이 동지가 무대에 나타나 프로젝트 관리자로서 와이와이 동지를 존경해야 한다고 말했습니다. 이상하게도 내 코딩 기술은 프로그래머보다 훨씬 뛰어납니다. 코드 프롬프트가 전혀 필요하지 않습니다. 수동 키보드 입력과 명확한 사고만으로 문제가 완벽하게 해결됩니다!

3. 말도 안 되는 해결

이 아이디어를 살펴보겠습니다. 먼저 각 TR 태그에 클래스 스타일을 할당합니다. 그러나 이 스타일은 TR의 식별자만 가져오는 것이 아닙니다.

1단계: TR 태그에 구현되지 않은 클래스 스타일을 추가합니다. 코드는 다음과 같습니다.

<table id="MyList"> 
<tr class="NameCSS"> 
<td>姓名：</td> 
<td><input id="txtname" type="text" /></td> 
</tr> 
<tr class="SexCss"> 
<td>年龄：</td> 
<td><input id="txtsex" type="text" /></td> 
</tr> 
</table> 

2단계: Jquery를 사용하여 클래스를 기반으로 TR 요소를 가져오고 해당 요소의 숨기기 또는 표시를 제어합니다.

var $rowsName = $("#MyList").find(".NameCSS"); 
var $rowsSex = $("#MyList").find(".SexCss"); 
switch (selectedValue) 
{ 
 case "Name": 
 $rowsSex.hide(); 
 $rowsName.show(); 
 break; 
 case "Sex": 
 $rowsSex.show(); 
 $rowsName.hide(); 
 break; 
} 

3단계: 실행하세요. 전혀 문제가 없습니다. 이 문제는 해결되었습니다!

4. 세 번째 솔루션에 따라 Lenovo의 애플리케이션 시나리오를 구현합니다.

이제 TABLE에서 TR의 표시 및 숨기기를 제어할 수 있으므로 데이터 바인딩 후 브라우저에 출력되고 TR 형식으로도 표시되는 ASP.NET GridView 컨트롤의 데이터 부분을 생각해 볼 수 있습니다. , GridView 콘텐츠의 표시 및 숨기기를 제어할 수 있습니까? 물론 문제 없습니다.

1단계: GridView 데이터 행에 클래스 속성을 추가하는 방법은 무엇입니까? GridView의 행 스타일()을 사용하여 설정할 수 있습니다. 코드는 다음과 같습니다.

<asp:GridView ID="GridView1" runat="server"> 
<RowStyle CssClass="test" /> 
</asp:GridView> 

이 시점에서 페이지를 실행하고 페이지에서 출력된 소스 코드를 보면 GridView 데이터 부분의 모든 TR에 class="test" 속성이 부여된 것을 볼 수 있습니다!

2단계: 데이터 바인딩, 코드는 다음과 같습니다.

if (!IsPostBack) 
  { 
   List<Student> sList = new List<Student>() 
   { 
    new Student(){ SID = "s001", SName="张三", SSex="男"}, 
    new Student(){ SID = "s002", SName="李四", SSex="女"}, 
    new Student(){ SID = "s003", SName="王五", SSex="男"} 
   }; 
 
   GridView1.DataSource = sList; 
   GridView1.DataBind(); 
  } 
 } 

3단계: GridView 데이터 표시 또는 숨기기를 제어하는 ​​버튼을 추가합니다. 코드는 다음과 같습니다.

<input id="btn" type="button" value="隐藏" onclick="ShowDate()" /> 

4단계: 표시 및 숨기기를 제어하는 ​​JS 메서드를 구현합니다. 코드는 다음과 같습니다.

function ShowDate() { 
   var val = $("#btn").val(); 
   var $rows = $("#GridView1").find(".test"); 
   switch (val) { 
    case "隐藏": 
     $rows.hide(); 
     $("#btn").val("显示"); 
     break; 
    case "显示": 
     $rows.show(); 
     $("#btn").val("隐藏"); 
     break; 
   } 
  } 

하하, 이 기능을 구현하게 된 이유와 캐릭터, 영감, 전체적인 원인과 결과를 소개하는 것입니다. 프로그래밍은 기능을 구현하는 것뿐만 아니라 삶에 통합되는 것입니다.

위의 네 가지 방법은 서로 밀접하게 연관되어 있으며, 모두가 신중하게 맛보고 숙고하여 진정으로 자신의 것으로 만들고 학습에 적용할 수 있기를 바랍니다.