Cara menggunakan jQuery EasyUI untuk melaksanakan fungsi penyembunyian dan paparan lajur

jQuery EasyUI ialah perpustakaan komponen UI web yang berkuasa Ia mempunyai fungsi yang kaya dan ciri yang mudah digunakan, yang boleh membantu pembangun membina halaman tapak web yang cantik dengan cepat. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery EasyUI untuk melaksanakan fungsi penyembunyian lajur dan paparan.

1. Mengapakah kita memerlukan fungsi menyembunyikan dan memaparkan lajur?

Dalam kebanyakan tapak web, jadual ialah cara paling biasa untuk memaparkan data, tetapi kadangkala kita mungkin tidak mahu memaparkan semua lajur. Contohnya, apabila terdapat sejumlah besar data, beberapa lajur mungkin kelihatan kurang penting, atau beberapa lajur mungkin wujud tetapi tidak perlu dipaparkan dalam senario semasa. Pada masa ini, fungsi penyembunyian lajur dan paparan amat berguna.

2. Pemilihan teknologi pelaksanaan

Dalam artikel ini, kami memilih untuk menggunakan komponen datagrid dalam perpustakaan komponen jQuery EasyUI untuk melaksanakan fungsi penyembunyian dan paparan lajur. Oleh kerana item boleh dikonfigurasikan yang kaya dan sistem acara yang berkuasa bagi komponen datagrid, kami boleh menyesuaikan jadual dengan mudah.

3. Langkah pelaksanaan

1 Memperkenalkan fail JavaScript dan CSS yang diperlukan

Sebelum menggunakan komponen datagrid, anda perlu memperkenalkan fail teras dan fail gaya yang diperlukan oleh EasyUI . Kaedah pengenalan khusus adalah seperti berikut:

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.0/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.8.0/jquery.easyui.min.js"></script>

2 Bina sumber data

Untuk kemudahan demonstrasi, sumber data yang kami gunakan dalam artikel ini adalah seperti berikut:

var data = [
  {"id":1,"name":"张三","age":20,"gender":"男"},
  {"id":2,"name":"李四","age":22,"gender":"男"},
  {"id":3,"name":"王五","age":23,"gender":"女"},
  {"id":4,"name":"赵六","age":21,"gender":"女"},
  {"id":5,"name":"钱七","age":25,"gender":"男"}
];

3. Bina objek grid data

Apabila membina objek grid data, anda perlu menentukan nama lajur, lebar lajur dan medan mengikat data lajur Anda juga perlu menentukan sumber data untuk jadual.

$("#datagrid").datagrid({
  columns:[[
    {field:"id",title:"编号",width:100},
    {field:"name",title:"姓名",width:100},
    {field:"age",title:"年龄",width:100},
    {field:"gender",title:"性别",width:100}
  ]],
  data:data
});

4. Tambah fungsi penyembunyian dan paparan lajur

Seterusnya kita perlu menambah fungsi penyembunyian dan paparan lajur pada grid data. Di sini kami menggunakan pemalam sambungan menu lajur dalam perpustakaan komponen EasyUI untuk mencapai fungsi ini.

$.extend($.fn.datagrid.defaults,{
  columnMenu:{
    items:[{
      text:"显示/隐藏",
      iconCls:"icon-columns",
      handler:function(item){
        var opts = $(this).datagrid("options");
        if(item.checked){
          $(this).datagrid("hideColumn",item.value);
        }else{
          $(this).datagrid("showColumn",item.value);
        }
        $(this).datagrid("columnMoving");
        $(this).datagrid("fitColumns");
      },
      disabled:true
    }]
  },
  onHeaderContextMenu:function(e,field){
    e.preventDefault();
    var grid = $(this);
    if(!grid.datagrid("getColumnFields",true).length){
      return;
    }
    if(field){
      grid.datagrid("columnMenu").menu("show",{
        left:e.pageX,
        top:e.pageY
      });
      var menuItem = grid.datagrid("columnMenu").menu("getItem",field);
      if(menuItem){
        grid.datagrid("columnMenu").menu("setIcon",{
          target:menuItem.target,
          iconCls:grid.datagrid("isColumnHidden",field) ? "icon-unchecked" : "icon-checked"
        });
        grid.datagrid("columnMenu").menu("setItemState",{
          target:menuItem.target,
          disabled:false
        });
      }else{
        grid.datagrid("columnMenu").menu("setItemState",{
          target:grid.datagrid("columnMenu").menu("getItem",0).target,
          disabled:true
        });
      }
    }
  }
});

5. Paparan kesan

Akhir sekali, mari kita lihat kesan yang dicapai!

(Gambar 1: Semua medan dalam jadual dipaparkan)

(Gambar 2: Medan "Jantina" disembunyikan)

(Gambar 3: "Jantina" medan dipaparkan semula )

4. Ringkasan

Melalui pengenalan langkah di atas, saya percaya pembaca telah memahami cara menggunakan jQuery EasyUI untuk menyembunyikan dan memaparkan lajur jadual. Teknologi ini sangat praktikal dalam pembangunan bahagian hadapan Web dan boleh memberikan pengguna pengalaman paparan data yang lebih fleksibel dan komprehensif Kami berharap artikel ini dapat membantu pembaca.

Atas ialah kandungan terperinci Cara menggunakan jQuery EasyUI untuk melaksanakan fungsi penyembunyian dan paparan lajur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!