SSH Framework Online Mall project 6th battle based on DataGrid data display _java

The DataGrid in Easyui presents data in tabular format and provides rich support for selecting, sorting, grouping, and editing data. The DataGrid is designed to shorten development time and make it unnecessary for developers to have specific knowledge. It is lightweight and feature-rich. Cell merging, multiple column headings, frozen columns, and footers are just a few of the features.

1. Review of section 4th

In the 4th section, we use Easyui to set up the left menu bar, and click on the menu option to pop up the corresponding tab on the right. In this section we'll use the DataGrid to do the Right tab part well. Let's take a look at the last aindex.jsp file in section 4th (see also section 4th):

2. Several ways to create a DataGrid control

The DataGrid displays the data in JSON format, so we first need to package the data from the background into the Jason format, and then upload it to the front desk for the DataGrid to display, which we don't get data from the background. First you prepare a. json file, which has the ISON format of data, and then we let Datagird display, first the display function, and then request background data.

Let's look at the format of the DataGrid displayed from the Easyui reference document, as shown in the following illustration:

As we look down the reference document, we find that the DataGrid space is created by <table>, and there are three ways to create it:

First: create a DataGrid from existing table elements, and define columns, rows, and data in HTML.

Second: Create a DataGrid control from the <table> tab. Define columns in the table using <th> tags.

Third: use JavaScript to create the DataGrid control.

We take the third, use JS to create the DataGrid control, first we have to prepare a file stored in JSON format data, under the Webroot/jquery-easyui-1.3.5/demo/datagrid/there are several JSON files, We select a Datagrid_data1.json, copy it to the Webroot directory, modify the parameters, and so on we will show the data in this JSON file. As follows:

{"Total": "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} 
]} 

As we can see, the JSON data format is: "Key1": value1, "Key2": value2. Each value can be an array with the new Jason data stored in the array.
With the JSON file, we can then design the DataGrid control, and the entire DataGrid is designed in query.jsp because the content to be displayed is the content in query.jsp. Let's 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" >  

3. Properties of the DataGrid control

We can see that using JS to create a DataGrid control, as long as a <table> tag can be, mainly in JS completed. The control of the DataGrid is very strong, here we mainly do a basic display, more other features can refer to Easyui development documentation. We now do an analysis of the above query.jsp file:

First, the DataGrid control has two properties: one is the DataGrid property and one is the column property . As the name implies, the DataGrid property is a property added to the entire DataGrid control, and column properties are for a column. There are a lot of attributes in each, and there are only a few basic common properties.

The most important thing in the DataGrid property is the Columns property, which is an array that can create multiple columns, as shown in the screenshot below:

Let's take a look at the details of the columns attribute:

Column properties, field represents the name of the fields, the key that corresponds to the JSON data, and then the title is the caption to display to the user, see the query.jsp file, and some other basic properties to refer to the Easyui document. The more important and more commonly used two properties in column properties are formatter and Styler, which are used to format the values of the current columns and to set the cell style, and we'll look at these two properties mainly:

We specifically analyze the columns attribute in the above query.jsp, how to use these two column properties:

{field: ' ProductName ', title: ' Category name ', width:100, 
 //To format the value of the current column, return the final data 
 formatter:function (value,row,index {return 
  "<span title=" + value + ">" + value + "</span>";/set to display value value} on mouse 
,  
{field: ' Price ', title: ' Prices ', width:100, 
 styler:function (value,row,index) { 
  //Set the style of the current cell, and return the string directly to the Style property 
   // Console.info ("Val: + value +", row: "+ row +", Index: "+ index") 
  if (value < 20) {//if value is less than return 
   ' Colo r:red; '; Show value value as Red 
  }}  
} 

Then we'll look at some of the properties of the DataGrid control:

The URL represents the data source to display, which is set to Datagrid_data.json to indicate that the data source is this JSON file, placed in the Webroot directory;

Loadmsg represents the information displayed during the loading of data;

Queryparams represents the parameters passed back to the background, which is not used here, because we have not yet been associated with the background, just display a JSON file, will be used later;

Fitcolums set to True to indicate horizontal automatic expansion, adaptive grid width, so set, the horizontal direction will not have a scroll bar, and do not have to set the width;

width is wide, if the data is too long to display, the horizontal direction will appear scroll bar;

striped is set to true to show the zebra crossing, this is a display style, try to know;

nowrap set to true means that when the data is not wrapped, otherwise a row of data will be changed, will be more ugly;

pagination is set to true to open paging functionality;

When Singleselect is set to True, only one line is allowed, the full selection function fails, and is used primarily for the check box in the first column;

Frozencolums is to set a frozen column, and the columns set in Frozencolums do not change size. If the inside is set {field: ' checkbox ', checkbox:true}, which means that this is a check box column, to the user tick, if set up the above Singleselect, then can only select one, can not choose all;

Rowstyler is the style of all rows, two parameters are row index and row, the above set is the even row is white, odd row is yellow.

Wait a minute...... There are other properties of the DataGrid control that you can refer to Easyui's technical documentation and are not explained here.

4. Effect of DataGrid data display

All right After completing the query.jsp, we restart Tomcat, then go backstage, click category Management on the left menu bar, a Category Management tab appears on the right, and then the JSON data that we specify, the Jason data we put in the Webroot directory, and we'll put JSON and struts consolidation, dynamically capturing JSON data from the background.

(Note: In the end I will provide the entire project source download!) Welcome everyone to collect or share

Original address: http://blog.csdn.net/eson_15/article/details/51322262

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.