DataGrid in EasyUI displays data in table form and provides rich functional support for selecting, sorting, grouping and editing data. DataGrid is designed to reduce development time and to prevent developers from having specific knowledge. It is lightweight and feature-rich. Cell merge, multi-column title, frozen columns and footer are just a few of the features.
1. Review the content of Section 4
In Section 4, we used EasyUI to build the menu bar on the left, and the corresponding tab pops up on the right by clicking on the menu option. In this section, we will use DataGrid to complete the tab section on the right. Let’s first look at the last aindex.jsp file in Section 4 (see also the content in Section 4):
2. Several ways to create DataGrid controls
DataGrid display data is in json format, so we must first package the data obtained from the background into Jason format, and then pass it to the front desk to let DataGrid display. In this section, we will not get data from the background. First prepare a .json file, which contains data in the same format. Then we will let DataGird display, first make the display function well, and then request the background data.
Let’s first look at the format of DataGrid display from EasyUI’s reference document, as shown in the figure below:
We look down along the reference document and we find that the DataGrid space is created through <table>, and there are three ways to create it:
The first one: Create a DataGrid from an existing table element, defining columns, rows, and data in HTML.
The second type: create a DataGrid control through the <table> tag. Use the <th> tag to define the columns within the table.
The third type: use Javascript to create a DataGrid control.
We adopt the third type, using js to create DataGrid control. First, we have to prepare a file that stores json format data. There are several json files under WebRoot/jquery-easyui-1.3.5/demo/datagrid/. We select a datagrid_data1.json, copy it to the WebRoot directory, modify the parameters, and we will display the data in this json file later. as follows:
{"total":10,"rows":[ {"code":"FI-SW-01","productname":"Koi","price":10.00}, {"code":"K9-DL-01","productname":"Dalmation","price":12.00}, {"code":"RP-SN-01","productname":"Rattlesnake","price":12.00}, {"code":"RP-LI-02","productname":"Iguana","price":12.00}, {"code":"FL-DSH-01","productname":"Manx","price":12.00}, {"code":"FL-DSH-01","productname":"Manx","price":12.00}, {"code":"FL-DLH-02","productname":"Persian","price":12.00}, {"code":"FL-DLH-02","productname":"Persian","price":12.00}, {"code":"AV-CB-01","productname":"Amazon Parrot","price":92.00}, {"code":"AV-CB-03","productname":"Amazon Parrot","price":92.00} ]} We can see that the json data format is: "key1": value1, "key2": value2. Each value can be an array, and new Jason data is saved in the array.
With the json file, we can design the DataGrid control next. The entire DataGrid is designed in query.jsp, because the content to be displayed is the content in query.jsp. Let's take a look at the query.jsp page:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> <script type="text/javascript"> $(function(){ $('#dg').datagrid({ //The URL address of the request data will be changed to request our own url url:'datagrid_data.json', loadMsg:'Loading......', queryParams:{type:''},//parameters//width:300, fitColumns:true,//Horily expand. If this property is set, there will be no horizontal scroll bar. When freezing columns, do not set this parameter //Show zebra cross striped:true, //When there is a lot of data, no line breaks nowrap:true, singleSelect:true, //If it is true, only single line display is allowed, full display function is invalid //Set pagination pagination:true, rowStyler: function(index,row){ console.info("index" + index + "," + row) if(index % 2 == 0) { return 'background-color:#ffff;'; } else { return 'background-color:#ff0;'; } }, //The same column attribute, but these columns will be frozen to the left and their size will not change. When the width is greater than 250, the scroll bar will be displayed, but the frozen column is not in the scroll bar frozenColumns:[[ {field:'checkbox',checkbox:true}, {field:'code',title:'number',width:200} ]], //Configure the column field of datagrid //field: The name of the column field, bundled with the key of json //title: the column title, which is displayed for people to see columns:[[ {field:'productname',title:'Category name',width:100, //Use to format the value of the current column, the return is the final data formatter: function(value,row,index){ return "<span>" + value + "</span>"; } }, {field:'price',title:'price',width:100, styler: function(value,row,index){ //Set the style of the current cell, and the returned string is directly handed to the style attribute//console.info("val:" + value + ",row:" + row + ",index:" + index) if (value < 20){ return 'color:red;'; } } } ] ] }); }); </script> </head> <body> <table id="dg"></table> </body> </html>3. Properties of DataGrid control
We can see that if you use js to create a DataGrid control, you only need a <table> tag, which is mainly done in js. DataGrid's controls are very powerful. Here we mainly do basic displays. For more other functions, please refer to EasyUI's development documents. We are now doing an analysis on the query.jsp file above:
First of all, the DataGrid control has two properties: one is the DataGrid property and the other is the column property . As the name implies, the DataGrid property is an attribute added to the entire DataGrid control, and the column property is for a certain column. There are many attributes in each, and only some basic and commonly used attributes are made here.
The most important thing in the DataGrid property is the columns property, which is an array that can create multiple columns, see the screenshot below:
Let's take a look at the details in the columns attribute:
In the column attribute, field represents the field name, corresponding to the key of the json data, and then title is the title to be displayed for the user. See the query.jsp file. There are some other basic attributes that can be referred to the EasyUI document. The two more important and commonly used properties in column properties are formatter and styler, which are used to format the value of the current column and set cell styles. Let's mainly look at these two properties:
Let's analyze in detail how to use these two column properties in the columns attribute in query.jsp above:
{field:'productname',title:'Category name',width:100, //Use to format the value of the current column, the return is the final data formatter: function(value,row,index){ return "<span>" + value + "</span>";//Set to put the mouse on and display the value value} }, {field:'price',title:'price',width:100, styler: function(value,row,index){ //Set the style of the current cell, and the returned string is directly handed to the style attribute//console.info("val:" + value + ",row:" + row + ",index:" + index) if (value < 20){ //If the value value is less than 20 return 'color:red;'; //Show the value in red} } }Then let's take a look at some properties of the DataGrid control:
The url represents the data source to be displayed. Set as datagrid_data.json here means that the data source is this json file and is placed in the WebRoot directory;
loadMsg represents the information displayed during the loading of data;
queryParams means the parameters passed to the background, and cannot be used here, because we have not yet associated with the background, but only display a json file, which will be used later;
After fitColums is set to true, it means that the horizontal expansion will be automatically expanded horizontally and the width of the adaptive grid will be adapted. In this way, there will be no scroll bars in the horizontal direction, and there is no need to set the width;
width is the width. If the data is too long and cannot be displayed, a scroll bar will appear in the horizontal direction;
After striped is set to true, it means that the zebra crossing is displayed. This is a display style. Just try it out;
If nowrap is set to true, it means that when there is too much data, it will not be wrapped in lines, otherwise when there is too much data on a certain line, it will be ugly;
When pagination is set to true, it means that the paging function is enabled;
When singleSelect is set to true, only single rows are allowed to be checked. The selection all function is invalid and is mainly used for the check boxes in the front column;
frozenColums is to set frozen columns, and the columns set in frozenColums will not change the size. If {field:'checkbox',checkbox:true} is set, it means that this is a check box column, which is selected for the user. If the above singleSelect is set, then only one can be selected, not all of them;
rowStyler is the style of all rows. The two parameters are row index and row. The above is set that even rows are white and odd rows are yellow.
Wait... There are other properties of DataGrid controls, you can refer to EasyUI's technical documentation, and I won't explain them one by one here.
4. Effect of DataGrid data display
Okay, after completing query.jsp, we restart tomcat, then enter the background, click on the category management in the menu bar on the left, and a category management tab will appear on the right, and then the json data we specified will be displayed. This Jason data is placed in the WebRoot directory ourselves. Later, we will integrate json and struts to dynamically obtain the json data transmitted from the background.
(Note: In the end, I will provide the source code download of the entire project! Everyone is welcome to collect or share)
Original address: http://blog.csdn.net/eson_15/article/details/51322262
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.