First, the project front desk Easyui
A set of UI class libraries based on jquery
1. Write HTML directly, set class attribute for HTML element-----automatically be rendered by Easyui
2, write JS script code, generate page HTML element
Entire page layout layout------------Home web-inf/common/index.jsp
Easyui need to introduce files
Engineering needs to introduce locale plugins themes, easyloader.js, Easyui-min.js, jquery.js
Page content introduces Themes/default/easyui.css, Themes/icon.css, Easyui-min.js, Jquery.js, locale/easyui-lang-zh_cn.js
<body class= "Easyui-layout" > The overall use of the layout layout (cardinal)
<div data-options= "Region:west" > Western layout structure ================== <div region= "West" >
1. North Drop-down custom Menu <a class= "Easyui-menubutton" data-options= "menu: ' #layout_north_pfMenu ' > Replace skin </a>
Easyui-menubutton the link into a drop-down menu
Data-options= "menu: #layout_north_pfMenu" drop-down menu displays content #layout_north_pfMenu definition
<div id= "Layout_north_pfmenu" >
<div> Menu One </div>
<div> Menu Two </div>
</div>
Changing the Skin code principle: Dynamic Link a new CSS file
2, North in the Control Panel drop-down menu corresponding function effect
Modify password: Make div as window (mask effect)------------<div class= "Essyui-window" >
$ (' #editPwdWindow '). Window ({
Title: ' Modify password ',----window title bar
width:300,-----width
Modal:true,-----Mask
Shadow:true,-----shadows.
Closed:true,-----'s closed.
height:160,------height
Resizable:false-----cannot be resized
});
Click Modify Password
function Editpassword () {
$ (' #editPwdWindow '). Window (' open ');
}
$ ("#id"). Window ({key:value,key:value ...}); ------------{} To set Easyui object properties
$ ("#id"). Window (' open '); ------passing a string directly in a Window object represents a method of executing an object
Contact admin: $.messager.alert ("Home Urgent Send v1.0", "Design: yuyang<br/> Admin mailbox: yuyang@itcast.cn <br/> qq:117038615");
$.messager provides alter hints, confirm confirmations, prompt inputs, progress
Exit System: $.messager.confirm ("Exit system", "confirm exit"). ", function (b) {
if (b) {
Exit code
}
});
3, landing the home page, the lower right corner pop-up prompt window
$.messager.show ({
Title: Titles
Msg: Content
timeout:5000------------5 seconds after window disappears automatically
});
=============================================================================================================== ==================
Second, the left menu click on the page, the right side display effect
Left accordion effect Retractable panel
<div class= "Easyui-accordion" >
<div title= "Information One" > Panel info </div>
<div title= "Information II" > Panel information two </div>
</div>
How to make a tree-shaped menu in accordion. Ztree
Ztree is an enterprise mainstream tree-shaped menu making technology, function more powerful than Easyui
Go to the official website to download the latest Ztree plug-in package
Ztree Extract Directory js directory and CSS Directory import project can be
Import css/ztreestyle/* Import Project
JS Directory core features (do not need to use the selection, editing, hiding and other functions), using all the features
<link rel= "stylesheet" type= "Text/css"
href= "${pagecontext.request.contextpath}/js/ztree/ztreestyle.css" >
<!--use Ztree-->
<!--Ztree is a dependent jquery tree menu-->
<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/js/jquery-1.8.0.min.js" ></script >
<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/js/ztree/jquery.ztree.core-3.5.js" > </script>
The page needs to use the ztree spanning tree place
<div id= "Mytree" class= "Ztree" >
In JS through
$.fn.ztree.init ($ ("#mytree"), setting, znodes); Initializing the tree setting is some configuration, Znodes is the node data
var setting = {
Data: {
Key: {
Title: "T"-------mouse resting on the node, prompting information
},
Simpledata: {------------simple data, no asynchronous, the ID in the data indicates that the node uniquely represents the PID: The parent node uniquely identifies
Enable:true
}
},
Callback: {
ONCLICK:ABC------When you click on the tree node, perform the function ABC
}
};
In the main page, the tree is initialized, the data is dynamic, the AJAX program is carried out to get the data of the tree, and the trees are initialized.
$.ajax ({
URL: ' ${pagecontext.request.contextpath}/menu.json ',-------------This can be changed to server-side action
Type: ' POST ',------submission method
DataType: ' text ',------data type
Success:function (data) {------callback function
var znodes = eval ("+ Data +")); -------------eval can convert the return JSON string to a JS object
$.fn.ztree.init ($ ("#treeMenu"), setting, znodes); -----------Initialize the tree
},
Error:function (msg) {
Alert (' Menu loading exception! ');
}
});
Through click and page control, whether the node has a click Effect, click on the Jump page
{id:11, pid:0, Name: "Base File", T: "", click:false},------click:false the node is a parent node, not processed after clicking
{id:111, pid:11, Name: "Base file Settings", T: "Base File Settings", page: "Page_base_jichudangan.action"},----page, click to jump to page
The click attribute is official, page is my custom
Click on the left side menu to show tab
<div class= "Easyui-tabs" id= "tabs" >
<div title= "title one" > Content one </div>
<div title= "Title II" > Content two </div>
</div>
Click on the menu, onclick function, in the function to determine whether the Click property is False, do not handle, not false add add
function OnClick (event, Treeid, TreeNode, Clickflag) {
if (Treenode.click!= false) {
Open (Treenode.name, treenode.page);
}
}
To determine whether the tab exists, select Select Tab if present
If it does not exist, Easyui the Tab object Add method, embed the IFRAME in the div for local refresh
function open (text, URL) {
if ($ ("#tabs"). Tabs (' exists ', text)) {
$ (' #tabs '). Tabs (' select ', text);
} else {
var content = ' <div style= ' Width:100%;height:100%;overflow:hidden; > '
+ ' <iframe src= '
+ URL
+ ' "scrolling=" Auto "style=" width:100%;height:100%;border:0; "></iframe></div>";
$ (' #tabs '). Tabs (' Add ', {
Title:text,
Content:content,
Href:url
Closable:true
});
}
}
=============================================================================================================== =========================
Third, the first batch of functions
Landing
Modify password
Query displays user information (multi-criteria query)
Delete User
Add user
View Modify User
User Object Design (number, name, password, sex, birthday, unit, payroll, telephone)
Using annotations to configure entity classes @OnetoMang @ManytoOne and Javaee.jar javax.persistence Package conflicts (Package conflict error: Nosuchmethoderror, classcast)
Write entity class domain complete build table
Import Genericdao-----General DAO
Write a service to test with six features------------Spring test
1, landing function
Verification Code Technical principle: Generate the verification code, put into session, the picture way display to the user, the user according to the picture display content input, submits, the server compares the user input verification code and the session whether is consistent
Server-side Input checksum validation
2, modify the password
Homepage Related display Perfect
index.jsp [<strong>${existuser.username}</strong>], welcome you. You use [<strong>${pagecontext.request.remoteaddr}</strong>]ip login.
home.jsp the bottom right corner prompts to change to do ${existuser.username}
Exit Login
function Logoutfun () {
$.messager
. Confirm (' System prompt ', ' Are you sure you want to exit this login? ', function (isconfirm) {
if (isconfirm) {
Location.href = ' ${pagecontext.request.contextpath}/invalidate.jsp ';
}
});
}
Invalidate.jsp to destroy session, redirect login.jsp
<div id= "Editpwdwindow" > uses Easyui window technology to pop windows out of the mask
Modify Password Confirm button Btnep Click, the new password in AJAX mode, transport server, modify, close window prompt to modify password successfully
Introducing Common.js Custom AJAX error Display information ... Process JSON return result must return JSON format string at action
$.post (' ${pagecontext.request.contextpath}/user_editpassword.action?password= ' + $newpass. Val (), function (msg) {
$.post (' ${pagecontext.request.contextpath}/user_editpassword.action? ', {password: $newpass. val ()}, function (msg) {
The above two kinds of writing are equivalent
3. User Admin page userindex.jsp view user list
Layout layout East is a query Form center query result (using IFRAME)------userlist.jsp (List results page)
userlist.jsp Add button------link effect, iframe jump userinfo.jsp (Add and modify features)
Easyui frame with data verification function <input type= "text" class= "Easyui-validatebox" required= "true"/>
To generate a checksum for a target using HTML code
<input id= "VV" required= "true" validtype= "email" class= "Easyui-validatebox" >
Using JS code to generate a checksum for a target
$ (' #vv '). Validatebox ({
Required:true,
Validtype: ' length[0,5] '
});
User Add feature userinfo.jsp rewrite as Struts2 label
4, the user list displays the DataGrid component
Write directly HTML <table> element-----<table class= "Easyui-datagrid" style= "Height:auto" > Add class= to Table Easyui-datagrid "
For example, home page announcements, alert information, with office information
Using HTML to make data tables is not very common
Generate table with JS code (very common)
Generate a dynamic table for the table element with ID grid in the page <table id= "Grid" ></table>
$ (' #grid '). DataGrid ({
Iconcls: ' Icon-forward ',
Fit:true,//fit the parent element size
Border:false,//No Border
Rownumbers:true,//set to True will show number of rows
Striped:true,//set to True will alternately display row backgrounds
PageList: [30,50,100],//selectable number of records per page
Pagination:true,//Set TRUE displays the paging toolbar at the bottom of the data table **********
Toolbar:toolbar,//toolbars display a line of tool buttons above the table add, view, delete
URL: "Users.json",//data source, Users.json to load data---change to action
IDfield: ' id ',//primary key column, return data with ID uniquely identified
Frozencolumns:frozencolumns,//frozen columns, when many columns appear to scroll horizontally, frozen columns will not be hidden
Columns:columns,//Normal column
Onclickrow:onclickrow,/Click a row to trigger an event
Ondblclickrow:dodblclickrow//Double-click a row to trigger an event
});
Request Parameters: Page page number rows how many pages per page
Return Data:
{
Total: Number of records,
Rows: [
{},
{}...
]
}
Write userlistaction receive request parameters, return the corresponding result data
Define paging all related data as paging data bean------> Pagebean
* Pagebean Store paging related data page rowsperpage total result condition
Carry Condition data Query
User Name Query-----fuzzy Query
Sex query------equivalence query
Birthday Range Query
5, the user deletes
Select multiple lines in the page, how to get multiline check ID in JS
getselected None returns the first selected row record or null.
Getselections None returns all selected rows, and an empty array is returned when no records are selected.
var items = $ (' #grid '). DataGrid (' Getselections '); Get all selected rows
The For loop gets each of the IDs to be stored in an array. Connect multiple IDs together via JS Join method 1,2,3
$.post ("${pagecontext.request.contextpath}/user_delete.action", {IDs, Ids.join (",")}, function (data) {
$ (' #grid '). DataGrid (' reload ');
$ (' #grid '). DataGrid (' Uncheckall '); Remove all element selection effects
});
6, User modification
Use ID to query data, echo back to JSP-----------userinfo.jsp
If multiple is selected, the first getselected is modified by default
Doview method, by clicking the query-----location.href = "${pagecontext.request.contextpath}/user_view.action?id=" +item.id;
