Bagaimana untuk Menyerlahkan Baris jqGrid Apabila Kotak Semaknya Ditanda?

Serlahkan Baris Apabila Kotak Semak Benar

Pengenalan:

Dalam pembangunan web, selalunya wajar untuk memberikan isyarat visual kepada pengguna untuk membimbing mereka melalui antara muka. Satu cara biasa untuk menyerlahkan maklumat penting ialah menggunakan warna atau kecerunan untuk menarik perhatian kepada elemen tertentu. Dalam grid data, baris kerap dipilih atau diubah suai menggunakan kotak pilihan. Untuk meningkatkan pengalaman pengguna, anda boleh menyerlahkan baris yang mempunyai kotak semak dalam keadaan yang ditandakan. Artikel ini meneroka cara untuk mencapai kesan ini menggunakan jQuery dan pemalam jqGrid.

Melaksanakan Penserlahan Baris:

Untuk menyerlahkan baris berdasarkan nilai kotak semak, kami boleh menggunakan panggilan balik rowattr yang diperkenalkan dalam jqGrid versi 4.3 .2. Panggilan balik ini membenarkan untuk memanipulasi atribut baris semasa pengisian grid, mendayakan penggayaan bersyarat berdasarkan data tertentu.

Pertimbangkan kod JavaScript berikut:

rowattr: function (rd) {
  if (rd.GroupHeader === "1") { // Adjust condition as per your model
    return { "class": "myAltRowClass" };
  }
}

Dalam contoh ini, kami menyemak sifat GroupHeader bagi baris (rd) dan, jika ia mempunyai nilai "1," kami menetapkan kelas CSS tersuai (myAltRowClass) pada baris. Kelas CSS ini boleh ditakrifkan untuk mengubah warna latar belakang baris yang diserlahkan.

Mengoptimumkan Kod dengan Templat:

Untuk menyelaraskan kod anda, anda boleh memanfaatkan templat lajur dan pembolehubah untuk menentukan sifat biasa dan tingkah laku. Pertimbangkan pengoptimuman berikut:

cmTemplate: { align: 'center', sortable: false, editable: true, width: 80 },
myCheckboxTemplate = {
  formatter: 'checkbox',
  edittype: 'checkbox',
  type: 'select',
  editoptions: { value: "1:0" }
},
myTextareaTemplate = {
  edittype: "textarea",
  editoptions: { size: "30", maxlength: "30" }
};

colModel: [
  { name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select", ... },
  { name: 'Order1', index: 'Order1', template: myTextareaTemplate },
  { name: 'Order2', index: 'Order2', template: myTextareaTemplate },
  // ... Additional columns omitted for brevity
  { name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate },
  { name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate }
],

Dengan menggunakan templat dan pembolehubah, kod anda menjadi lebih ringkas dan boleh diselenggara.

Kesimpulan:

Menggabungkan penyerlahan baris berdasarkan nilai kotak pilihan menggunakan Panggilan balik rowattr jqGrid bukan sahaja meningkatkan pengalaman pengguna tetapi juga mempamerkan fleksibiliti dan kecekapan pemalam. Dengan menggabungkan teknik ini dengan templat lajur, anda boleh mencipta grid data yang elegan dan tersusun dengan baik yang memenuhi keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk Menyerlahkan Baris jqGrid Apabila Kotak Semaknya Ditanda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!