Cara menggunakan jQuery untuk mencapai kesan lipatan dan regangan ASP.NET GridView_jquery

Terdapat keperluan semasa membuat halaman statik hari ini, iaitu terdapat satu set butang radio dengan dua pilihan dan senarai 6 baris pada halaman (senarai itu dilaksanakan dengan tag Jadual, bukan DIV). Apabila pilihan butang radio dipilih Untuk seketika, tiga maklumat pertama dalam senarai dipaparkan dan tiga maklumat terakhir disembunyikan Apabila pilihan 2 butang radio dipilih, tiga maklumat pertama dalam senarai disembunyikan dan tiga maklumat terakhir dipaparkan. Jadi itu membawa kita kepada topik hari ini, bagaimana untuk mencapainya? Selepas pelaksanaan, apakah senario lain yang boleh digunakan untuk pelaksanaan ini?

1. Penyelesaian respons pertama

Selepas menghadapi keperluan ini, reaksi pertama saya adalah sangat mudah Gunakan dua DIV untuk membalut teg TR dalam tiga Jadual pertama dan tiga teg TR terakhir, dan kemudian mengawal paparan DIV melalui JS.

Langkah pertama: Gunakan pembalut DIV untuk menyembunyikan TR yang dipaparkan. Kodnya adalah seperti berikut:

<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> 

Langkah 2: Gunakan JS untuk mengawal paparan DIV untuk mencapai kesan menyembunyikan atau menunjukkan baris:

$("#divName").style.display = "tiada"; $("#divSex").style.display = "block"; Langkah 3: Jalankan program, anda akan mendapati bahawa ia tidak berfungsi sama sekali, haha, rasanya seperti ditipu~! Kerana tag TR hanya boleh digunakan dengan tag TABLE! Ok, walaupun kod di atas tidak berfungsi! Tetapi ia masih memainkan peranan sebagai panduan.

2. Penyelesaian panel yang disyorkan Ini selepas saya menerangkan bahawa DIV dan TR tidak boleh digunakan bersama, dan saya ditertawakan oleh rakan sekerja saya, Nampaknya saya perlu belajar lebih lanjut tentang HTML pada masa hadapan Ning memberitahu saya untuk membalut TR dengan PANEL control , gunakan atribut Visible untuk mengawal output TR pada peringkat pelayan.

Langkah pertama: Gunakan kawalan PANEL untuk membalut teg TR yang digunakan untuk menunjukkan atau menyembunyikan Kod adalah seperti berikut:

<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> 

Langkah 2: Gunakan sifat Kelihatan bagi kawalan Panel pada bahagian pelayan untuk mengawal output baris Kod adalah seperti berikut:

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; 
 } 
} 

Walaupun tiada salahnya kaedah ini, namun masih terasa terlalu mengarut kan? Patutkah kod yang mengawal paparan halaman juga dilakukan pada bahagian pelayan? Sungguh membazir prestasi! Lebih-lebih lagi, meletakkan kod kawalan halaman dan kod interaksi logik adalah mengelirukan Apabila kaedah ini ditolak, wira kami Comrade Wai Wai muncul di atas pentas dan berkata bahawa saya harus mengagumi Komrad Wai Wai Sebagai pengurus projek Pelik, kemahiran pengekodan saya lebih baik daripada seorang pengaturcara Tiada gesaan kod diperlukan sama sekali. Hanya menaip papan kekunci manual dan pemikiran yang jelas menyelesaikan masalah dengan sempurna.

3. Penyelesaian mengarut Jadi, mari kita lihat idea ini Mula-mula, tetapkan gaya kelas untuk setiap teg TR.

Langkah pertama: Tambahkan gaya kelas yang tidak dilaksanakan pada teg TR. Kodnya adalah seperti berikut:

<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> 

Langkah 2: Gunakan Jquery untuk mendapatkan elemen TR berdasarkan kelas dan mengawal penyembunyian atau paparannya. Kodnya adalah seperti berikut:

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; 
} 

Langkah 3: Lari, tiada masalah langsung, masalah ini selesai!

4. Laksanakan senario aplikasi Lenovo mengikut penyelesaian ketiga Sekarang kita boleh mengawal paparan dan menyembunyikan TR dalam JADUAL, kita boleh memikirkan bahagian data kawalan ASP.NET GridView yang dikeluarkan kepada penyemak imbas selepas mengikat data, dan juga dipaparkan dalam bentuk TR , jadi kami boleh Bolehkah anda mengawal paparan dan penyembunyian kandungan GridView? Sudah tentu tiada masalah.

Langkah satu: Bagaimana untuk menambah atribut kelas pada baris data GridView? Kita boleh menggunakan gaya baris GridView () untuk menetapkannya Kodnya adalah seperti berikut:

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

Pada ketika ini, apabila kami menjalankan halaman dan melihat output kod sumber mengikut halaman, kami akan melihat bahawa semua TR dalam bahagian data GridView telah diberikan atribut class="test"!

Langkah 2: Ikat data, kodnya adalah seperti berikut:

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(); 
  } 
 } 

Langkah 3: Tambah butang untuk mengawal paparan atau menyembunyikan data GridView Kodnya adalah seperti berikut:

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

Langkah 4: Laksanakan kaedah JS untuk mengawal paparan dan penyembunyian Kod adalah seperti berikut:

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; 
   } 
  } 

Haha, itu sahaja untuk memperkenalkan sebab, watak, inspirasi, dan keseluruhan sebab dan akibat untuk merealisasikan fungsi ini bukan sahaja untuk merealisasikan fungsi, tetapi juga menyepadukan ke dalam kehidupan.

Empat kaedah di atas berkait rapat dan berkait antara satu sama lain Saya harap semua orang dapat merasainya dengan teliti, merenungnya dengan teliti, benar-benar menjadikannya milik anda, dan menerapkannya dalam pelajaran anda.