Write your own Java EE framework-Change the skin for Jqgrid and add it to my frame

Software 151 Su Yao

Today let me daoteng half a day incredibly not write my Java EE frame, but replace jqgrid skin. I'm pretty nasty. Jqgrid's default skin, it always reminds me of always want to learn and have not learned the ExtJS, see more of that light blue skin too much absolute visual fatigue, so this blog post from the Jqgrid to talk about it, the process found on the network less information, So my blog today is still very useful. No more nonsense, let's start!

First we fill in the address of the browser address: http://www.trirand.com/blog/?page_id=6, this is the Jqgrid download interface, such as:

Click on the demo files link to download the latest Jqgrid_demo40.zip tarball, and after extracting the sample program into the Htdocs directory of Apache server, launch the Apache Web server.

Then I fill in the address in the browser address: http://localhost/jqgrid_demo40/jqgrid.html, the interface is as follows:

This is what I call the disgusting skin, I now change jqgrid skin, here is the use of jquery UI program, we fill in the browser address Http://jqueryui.com/themeroller, we choose our favorite skin here, I prefer Baidu and Google that kind of concise page style, so my first UI is smoothness and overcast two kinds, smoothness before I used, today I choose overcast (color is a bit dark, But with my blog skin still a little match), the effect such as:

The name of the downloaded UI tarball is Jquery-ui-1.8.16.custom.zip, and after decompression we find the overcast package under the Jquery-ui-1.8.16.custom\development-bundle\themes path, Copy this package and copy it to the Jqgrid_demo40\themes path.

Here we modify the code of the navigation page in the JQGRID_DEMO40 sample code, and here is a special reminder that we have a JavaScript script introduced in the jqgrid.html page of the Jqgrid demo code downloaded from the website:

<script src= "Js/jquery.js" type= "Text/javascript" ></script>

And in fact, there is no Jquery.js file JS package, there is only jquery.min.js file, we will modify this code to:

<script src= "Js/jquery.min.js" type= "Text/javascript" ></script>

The sample code under the Apache Web server will then display correctly.

Next we import new skin, very simple, as long as the following code to replace it (the original code, the following is the new code, the original code to be commented out):

<link rel= "stylesheet" type= "text/css" media= "screen" href= "Themes/redmond/jquery-ui-1.8.2.custom.css"/>
-----------------------------------------------------------------------------
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Themes/overcast/jquery-ui-1.8.16.custom.css"/>  
<!--<link rel= "stylesheet" type= "text/css" media= "screen" href= "THEMES/REDMOND/JQUERY-UI-1.8.2.CUSTOM.CSS"/ >-->

　　

We then fill in the address in the browser address: http://localhost/jqgrid_demo40/jqgrid.html, the interface is as follows:

Haha, finally replaced with my favorite skin ~ ~ ~.

I will add the Jqgrid component to my Java EE framework. I import the JS package and the file under the themes package in the Jqgrid demo program into the project, such as:

Set up the Main.jsp page under the WebContent package, this will be the main page of my project, the main.jsp code is as follows:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Main Page </title>
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Themes/overcast/jquery-ui-1.8.16.custom.css"/>
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Themes/ui.jqgrid.css"/>
<script src= "Js/jquery.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery-ui-1.8.2.custom.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.layout.js" type= "Text/javascript" ></script>
<script src= "Js/i18n/grid.locale-en.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.jqgrid.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.tablednd.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.contextmenu.js" type= "Text/javascript" ></script>
<script src= "Js/ui.multiselect.js" type= "Text/javascript" ></script>
<body>
<table id= "DataGrid" ></table>
</body>
<script type= "Text/javascript" >
JQuery (document). Ready (function () {
JQuery ("#dataGrid"). Jqgrid ({
DataType: "Local",//data type
height:250,//height
colnames:[' number ', ' Date ', ' Customer ', ' quantity ', ' tax ', ' total amount ', ' Remarks '],//column name
colmodel:[
{name: ' id ', index: ' id ', width:60, sorttype: ' int '},
{name: ' invdate ', index: ' Invdate ', width:90, SortType: ' Date '},
{name: ' name ', index: ' Name ', width:100},
{Name: ' Amount ', Index: ' Amount ', width:80, align: "Right", SortType: "Float"},
{name: ' tax ', Index: ' tax ', width:80, align: ' right ', SortType: ' Float '},
{Name: ' Total ', index: ' Total ', width:80,align: "Right", SortType: "Float"},
{name: ' Note ', index: ' Note ', width:150, Sortable:false}
],
multiselect:true,//supports multiple options
Caption: "Jqgrid Test"//list title
});
var MyData = [
{ID: "1", Invdate: "2007-10-01", Name: "Test", note: "Note", Amount: "200.00", Tax: "10.00", Total: "210.00"},
{ID: "2", Invdate: "2007-10-02", Name: "Test2", note: "Note2", Amount: "300.00", Tax: "20.00", Total: "320.00"},
{ID: "3", Invdate: "2007-09-01", Name: "Test3", note: "Note3", Amount: "400.00", Tax: "30.00", Total: "430.00"},
{ID: "4", Invdate: "2007-10-04", Name: "Test", note: "Note", Amount: "200.00", Tax: "10.00", Total: "210.00"},
{ID: "5", Invdate: "2007-10-05", Name: "Test2", note: "Note2", Amount: "300.00", Tax: "20.00", Total: "320.00"},
{ID: "6", Invdate: "2007-09-06", Name: "Test3", note: "Note3", Amount: "400.00", Tax: "30.00", Total: "430.00"},
{ID: "7", Invdate: "2007-10-04", Name: "Test", note: "Note", Amount: "200.00", Tax: "10.00", Total: "210.00"},
{ID: "8", Invdate: "2007-10-03", Name: "Test2", note: "Note2", Amount: "300.00", Tax: "20.00", Total: "320.00"},
{ID: "9", Invdate: "2007-09-01", Name: "Test3", note: "Note3", Amount: "400.00", Tax: "30.00", Total: "430.00"}
];//test Data
for (Var i=0;i<=mydata.length;i++)
JQuery ("#dataGrid"). Jqgrid (' Addrowdata ', i+1,mydata[i]);

});
</script>

We fill in the address in the browser address: http://localhost:8080/ssiprj/main.jsp, the page is displayed as follows:

Oh, the effect is good ah!

Below I will fetch the data from the server and then use the main.jsp page to show it. The modified main.jsp file code is as follows:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Main Page </title>
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Themes/overcast/jquery-ui-1.8.16.custom.css"/>
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Themes/ui.jqgrid.css"/>
<script src= "Js/jquery.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery-ui-1.8.2.custom.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.layout.js" type= "Text/javascript" ></script>
<script src= "Js/i18n/grid.locale-en.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.jqgrid.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.tablednd.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.contextmenu.js" type= "Text/javascript" ></script>
<script src= "Js/ui.multiselect.js" type= "Text/javascript" ></script>
<body>
<br/>
<br/>
<table id= "DataGrid" ></table>
<div id= "Pager" ></div>
</body>
<script type= "Text/javascript" >
JQuery (document). Ready (function () {
JQuery ("#dataGrid"). Jqgrid ({
URL: ' Queryproductlist.action ',
DataType: "JSON",//data type the value returned by the server is JSON type
height:250,//height
colnames:[' number ', ' name ', ' description ', ' Creation time ', ' Modified time ', ' status '],//column name
colmodel:[
{name: ' id ', index: ' id ', align: ' right ', width:60, sorttype: ' int '},
{name: ' name ', index: ' Name ', width:120},
{name: ' desc ', index: ' desc ', width:130},
{name: ' create_date ', index: ' Create_date ', Width:150,sorttype: ' Date '},
{name: ' modify_date ', index: ' Modify_date ', Width:150,sorttype: ' Date '},
{name: ' status ', index: ' Status ', Width:80,sorttype: ' int '}
],
rownum:10,//Default display of rows
ROWLIST:[10,20,50],
jsonreader:{
Root: ' Results ',
Repeatitems:false
},
Pager: ' #pager ',//pagination
multiselect:true,//supports multiple options
Sortname: ' id ',//Sort field
SortOrder: "desc",//Sort mode
Caption: "Jqgrid Test"//list title
});
JQuery ("#dataGrid"). Jqgrid (' Navgrid ', ' #pager ', {edit:false,add:false,del:false});

});
</script>

We also want to modify the Queryproductlist method under the Productaction.java class, the code is as follows:

    Public String queryproductlist () throws Exception
    {
        map<string, object> map = new hashmap<string, object> ();
        
        map.put ("name", Namequery);
        jsonobject jsonobject = new Jsonobject (jsonquery);//Convert query parameters to JSON objects
        map.put ("name", Jsonobject.get ("Namequery"));
        
        Results = this.productService.queryProductList (map);
        
        Flag = "Success";
        msg = "The query operation succeeded!" ";
        Welcome = "Your query operation has been completed!" ";
        
        return SUCCESS;
    }

Comment out the JSON parsing code I wrote yesterday, otherwise it will be an error.

We fill in the address in the browser address: http://localhost:8080/ssiprj/main.jsp, page display such as:

The data is displayed correctly, I think some children's shoes on the use of Jqgrid is not familiar with it, next I will jqgrid basic properties do a brief introduction, because of limited time, want to learn more about the use of Jqgrid, you can check Baidu.

　　

Properties	Description
Url	The Jqgrid control uses this parameter to get the data that needs to be displayed, and the specific return value allows the XML to be JSON as well.
	This parameter is used to set the data type that will be obtained. My most common use is "JSON", and the rest of the types include: XML, XMLString, local, JavaScript, function.
Mtype	Defines which method to use to initiate a request, get or post
Height	The height of the grid, can accept the number,% value, auto, the default value is 150.
Width	The width of the grid, if not set, should be the sum of all column widths, and if the width is set, the width of each column will be set according to the setting of the ShrinkToFit option.
ShrinkToFit	This option calculates the algorithm for each column width based on width. The default value is true. If ShrinkToFit is true and the width value is set, the widths of each column are scaled according to width, and if ShrinkToFit is false and the width value is set, the widths of each column are not scaled proportionally, but the grid will have the Horizontal scroll bar.
Autowidth	The default value is False. If set to True, the width of the grid is automatically calculated based on the width of the parent container. The re-calculation occurs only at the stage of the grid initialization, and if the size of the parent container changes and the size of the grid needs to be changed, you need to call the Setgridwidth method in your own code to do so.
Pager	Define page number control bar page bar
Sortname	Specifies the default row sequence, which can be either a column name or a number. This parameter is passed to the server side.
Viewrecords	Sets whether the total number of all records is displayed in pager bar.
Caption	Sets the title of the grid table, if it is not set, the title area is not displayed.
Caption	The title of the grid. If set, it will be displayed in the header layer of the grid.
RowNum	Used to set the number of rows displayed at one time in the grid, with a default value of 20. It is this option to pass the parameter rows (set in Prmnames) to the Server through a link set by the URL option. Note If the number of data rows returned by the server exceeds the RowNum setting, the grid displays only the number of rows set by RowNum.
Rowlist	An array that sets the rownum values that the grid can accept. For example [10,20,30].
Colnames	An array of strings that specifies the header text for each column, corresponding to the order of the columns.
Colmodel	One of the most important arrays that sets the parameters for each column. (Detailed later)
Prmnames	This is an array that sets the name of the parameter that Jqgrid will pass to the server. (Detailed later)
Jsonreader	This is again an array that sets how to parse the JSON data sent back from the server side. (Detailed later)

Prmnames is an important option for Jqgrid to set the name of the parameter that Jqgrid will pass to the server. The default value is:

Prmnames: {  
    Page: "Page",    //Parameter name that represents the page number of the request  
    Rows: "Rows",    //parameter names representing the number of request lines  
    Sort: "Sidx",//name of the parameter that represents the column name used for sorting  
    Order: "Sord",//Parameter name that indicates the sort method used  
    Search: "_search",//Indicates whether the parameter name of the search request  
    Nd: "nd",//Parameter name indicating the number of times the request has been sent  
    ID: "id",//indicates the name of the ID used when sending data in the Edit data module  
    Oper: "Oper",    //operation parameter name (I don't use it yet)  
    Editoper: "Edit",//when submitting data in edit mode, the name of the action  
    Addoper: "Add",//when submitting data in Add mode, the name of the action  
    Deloper: "Del",//when data is submitted in delete mode, the name of the action  
    Subgridid: "id",//Data name passed when clicking to load data into child table  
    Npage:null,   
    Totalrows: "Totalrows"//indicates the name of the parameter to get the total number of rows of data from the server, see Rowtotal in Jqgrid options  
}  

Jsonreader is an important option for Jqgrid to set up how to parse JSON data sent back from the server side. The default value is:

Jsonreader: {  
    Root: "Rows",   //The entry in JSON that represents the actual model data   
    Page: "Page",   //data representing the current page number in JSON   
    Total: Data that represents the number of pages in the JSON   
    Records: "Records",//data representing the total number of rows of data in JSON   
    Repeatitems:true,//If set to False, Jqgrid will search for the corresponding data element according to name when parsing the JSON (that is, the elements in the JSON can be out of order), and the name used is from the name setting in Colmodel.   
    Cell: "Cell",  
    ID: "id",  
    UserData: "UserData",  
    Subgrid: {  
        Root: "Rows",   
        Repeatitems:true,   
        Cell: "Cell"  
    }  
}  

Important options for Colmodel

Formatter: The default type or the name of a custom function used to format the column. Common preset formats are: integer, date, currency, number, etc.

Well, today the content is finished, the framework is becoming more and more perfect, I think the next step is to add a navigation to main.jsp, and then do the operation of charting, which I will use Velocity template language. Today, Bo friends asked me to drill down into JavaScript in the next article of the construction of the appropriate, my next blog post to complete the piece of content.

Write your own Java EE framework-Change the skin for Jqgrid and add it to my frame