How to use jQuery EasyUI to implement column hiding and display functions

jQuery EasyUI is a powerful web UI component library. It has rich functions and easy-to-use features, which can help developers quickly build beautiful website pages. In this article, we will introduce how to use jQuery EasyUI to implement column hiding and display functions.

1. Why do we need the column hiding and displaying function?

In many websites, tables are the most common way to display data, but sometimes we may not want to display all columns. For example, when there is a large amount of data, some columns may appear less important, or some columns may exist but are not necessary to display in the current scenario. At this time, the column hiding and display function is particularly useful.

2. Implementation technology selection

In this article, we choose to use the datagrid component in the jQuery EasyUI component library to implement the column hiding and displaying function. Because of the rich configurable items and powerful event system of the datagrid component, we can easily customize the table.

3. Implementation steps

1. Introduce the necessary JavaScript and CSS files

Before using the datagrid component, you need to introduce the core files and style files required by EasyUI. The specific introduction method is as follows:

<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. Build data source

For the convenience of demonstration, the data source we use in this article is as follows:

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. Build datagrid Object

When building a datagrid object, you need to specify the name of the column, the width of the column, and the data binding field of the column. You also need to specify the data source for the table.

$("#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. Add column hiding and displaying function

Next we need to add column hiding and displaying function to datagrid. Here we use the column menu extension plug-in in the EasyUI component library to achieve this function.

$.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. Effect display

Finally, let’s take a look at the achieved effect!

(Figure 1: All fields in the table are displayed)

(Figure 2: The "Gender" field is hidden)

(Figure 3: The "Gender" field is displayed again )

4. Summary

Through the introduction of the above steps, I believe readers have understood how to use jQuery EasyUI to hide and display table columns. This technology is very practical in Web front-end development and can provide users with a more flexible and comprehensive data display experience. We hope this article will be helpful to readers.

The above is the detailed content of How to use jQuery EasyUI to implement column hiding and display functions. For more information, please follow other related articles on the PHP Chinese website!