jquery Easy UI 1.5 The latest version simple permission assignment

jquery Easy 1.5 MAVEN+SERVLET+JSP+JDBC implementation Rights Management assignment

first of all, I first explain, I am just a rookie, I just on the programming road groping a small yards of farmers. Three years of development, it seems to be my first time to write a blog. Previously exposed to DWZ like the jquery Easy UI, it was the UI framework used by my first company. So use the easy UI to feel quick to get started. is a jquery-based UI framework. All right, don't talk nonsense. I wrote this project with the most basic JSP+SERVLET+JDBC, and also joined Maven to manage the jar package and publish it. should be well understood.

1. Preparatory work

Download the source code from the official website first: Click the Open link,

After the download is complete, look at the following directory entries: Locale myself and SRC are components of the Js,easy UI to encapsulate these JS, so we don't need to consider these.

Then we need to build the project environment, my project to use Maven, about the MAVEN environment to build everyone can find some information on the Internet to see, here is not more than repeat. Paste the Pom.xml configuration specific

<dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId> <version>2.5</version><scope>provided</scope></dependency><!--join MySQL driver dependency Package-- ><dependency><groupid>mysql</groupid><artifactid>mysql-connector-java</ Artifactid><version>5.1.27</version></dependency><dependency><groupid>jstl </groupId><artifactId>jstl</artifactId><version>1.2</version></dependency> <dependency><groupId>taglibs</groupId><artifactId>standard</artifactId>< version>1.1.2</version></dependency><!--Introducing JSON package--><dependency><groupid> org.apache.commons</groupid><artifactid>commons-lang3</artifactid><version>3.1</ Version></dependency><dependency><groupid>commons-beanutils</groupid><artifactid >commons-beanutils</artifactId><version>1.8.3</version></dependency><dependency><groupid>commons-logging </groupid><artifactid>commons-logging</artifactid><version>1.1.1</version></ Dependency><dependency><groupid>commons-collections</groupid><artifactid> Commons-collections</artifactid><version>3.2.1</version></dependency><dependency ><groupId>net.sf.ezmorph</groupId><artifactId>ezmorph</artifactId><version>            1.0.6</version></dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> </depend Ency>

<build><plugins><plugin><artifactId>maven-compiler-plugin</artifactId>< version>2.3.2</version><configuration><source>1.6</source><target>1.6</ Target></configuration></plugin><plugin><artifactid>maven-war-plugin</artifactid ><version>2.2</version><configuration><version>3.0</version>< Failonmissingwebxml>false</failonmissingwebxml></configuration></plugin><plugin> <groupid>org.apache.tomcat.maven</groupid><artifactid>tomcat7-maven-plugin</artifactid ><version>2.1</version><configuration><server>tomcat7</server><port> 8000</port><url>http://localhost:8000/manager/text</url><!--Port number--><uriEncoding> Utf-8</uriencoding><path>/zycweb</path><username>admin</username><password >admin</password></configuration></plugin></plugins></build> 

When everything is ready, first consider the logic of our authority management framework, the user login to query the role of the user, and then query the role of the menu module. At the same time, the administrator can assign which modules the role owns, as well as the so-called additions and deletions. This is what we need to do, the database is based on MySQL. Table structure as follows, because just a simple permission control module, do not consider adding or deleting these permissions control operations (if you have time to add it later), if the database only used five tables.

2. Login to get permission menu

User name Login to get what menu? First get the menu information that is owned by the user role. The easy UI returns JSON-formatted data to the client, so we log in successfully to the main page in JSON format to give us the results we want. What is the interface after login? First, from the Downloaded Easyui Demo folder, find the Layout folder in this component, find a demo, you will see how they introduced JS and CSS. So, copy, introduce its JS CSS from full.html.

The

introduces the introduced CSS JS into this project. I have introduced all the JS CSS in the project to a public page in taglib.jsp. Well, it should come out, too. Layout components in the top and bottom of the five-block area, we must first consider the West area, because this area is a tree menu. This is just beginning to be puzzled, in the end is all of a sudden loaded out of the tree, or click on the load out (that is, asynchronous loading, it should be easy to understand it, haha), considering that some projects may be many modules, response time can not be too long, or choose asynchronous loading. Asynchronous loading needs to consider loading the first level menu and the level two menu, and then the level two menu has no three level menu, need to make a judgment, if there is a return JSON format must have a status state: Closed. The specific server-side key code is as follows: (because the first write does not use the JSON third-party package is handwritten, so it is)

<span style= "FONT-SIZE:12PX;"  > if (newmodellist! = null && newmodellist.size () > 0) {//User rights have menu for (int i = 0; I < newmodellist.size ();                            i++) {Long rolemodelid = Newmodellist.get (i). Getmodelid ();  for (int j = 0; J < Listmodelbyparentid.size (); j + +) {//Query menu has this role menu for comparison TModel TModel                                = Listmodelbyparentid.get (j); if (tmodel.getid () = = Rolemodelid) {list<tmodel> Listsecond = Modeldao.getrolemo                                    Delbyparentid (Tmodel.getid ());                                    Jsonstr.append ("{\" id\ ":" + tmodel.getid () + ", \" text\ ": \" "+ tmodel.getname () +" \ ","); if (Listsecond! = null && listsecond.size () > 0) {jsonstr.append ("\"                                    State\ ": \" closed\ "");                       } else {                 Jsonstr.append ("\" state\ ": \" open\ ""); } if (Tmodel.geturl ()! = NULL &&! "".                                    Equals (Tmodel.geturl ())) {jsonstr.append (", \" url\ ": \" "+ tmodel.geturl () +" \ "); } else {//Jsonstr.append ("\" url\ ": \" Servlet/lo                                    Ginservlet\ "");                                } jsonstr.append ("},"); }}}} if (Jsonstr.tostring (). End                        Swith (",")) {String Newjson = jsonstr.tostring (). substring (0, jsonstr.tostring (). Length ()-1);                    Jsonstr.replace (0, jsonstr.tostring (). Length (), Newjson); } if (ParentID! = null && parentid.equals ("0")) {JSONstr.append ("]}]");                    } else {jsonstr.append ("]"); }</span>

The menu format returned by the full fetch should be as

The server has sent the JSON format data to the client, so how does the frontend implement asynchronous loading? The specific code is as follows:

<span style= "FONT-SIZE:12PX;" >   $ (' #tree '). Tree ({      URL: ' ${zyc}/servlet/treeservlet?parentid=0 ',      animate:true,      checkbox: False,      Lines:true,      onclick:function (node) {           if (node.url!= "" && typeof (Node.url)! = ' undefined ') {           AddTab (node.text, "${zyc}/" +node.url);              }             ,          onbeforeexpand:function (node,param) {                         $ (' # Tree '). Tree (' Options '). url = ". /servlet/treeservlet?parentid= "+ node.id;  Dynamic fetch node                 }       });</span>

Yes, the client is such a simple few lines of code to implement the asynchronous loading tree, is not very suitable for us to play with the rookie?

This is specifically explained here (the Onbeforeexpand function is the key meaning that the function is triggered before the load tree is expanded and the node is automatically appended)

3. Additions and deletions to check and change

Add and delete Check change is the Click menu, get the corresponding link address, this I explained under the Load JS tab bar, center area plus an initial tabs page the following code:

<div class= "Easyui-tabs" id= "tabs" fit= "true" border= "false" ><div title= "Welcome page" style= "Padding:20px;overflow: hidden; " > <div style= "margin-top:20px;" >
The tabs function is loaded when the tree menu is clicked.
   function AddTab (text,url) {if ($ ("#tabs"). Tabs (' exists ', text)} {//If the tab already exists, select the tab $ ("#tabs"            ). Tabs (' select ', text); } else {var content = "<iframe frameborder= ' 0 ' scrolling= ' auto ' style= ' width:100%;height:100% ' src="                     + URL + "></iframe>";                      $ ("#tabs"). Tabs (' Add ', {//Generate new tab, Title:text, Closable:true, Content:content, tools:[{iconcls: ' Icon-mini-refresh ', Handl                 Er:function () {//window.location.reload ("${zyc}/" +url); var tab = $ (' #tabs '). Tabs (' getselected ');                 Get the current tab var URL = $ (tab.panel (' Options '). Content). attr (' src ');                           $ (' #tabs '). Tabs (' Update ', {tab:tab, options: {         Href:url}});                                                  }                    }]                });        }         }
Additions and deletions I will not write, many examples on the Internet. As follows:


4 Module Management
Module management is the deletion and modification of the

Tree menu In fact, the west area of the connection address, in fact, this piece should be all the model, but I do not change the figure convenient, the meaning is the same. But this tree is all loaded, the specific key code is as follows:
var node = $ (' #tree '). Tree (' getselected '), if (node) {$ (' #tree '). Tree (' ExpandAll ', node.target);} else {$ (' #tree '). Tree (' ExpandAll ');}
It means to get each child node of the tree and expand it if it is not expanded. Modified Comboxtree The same is not the code here




5. Role Management
Role management also on the allocation of permissions complex point other is to delete and change.

The Treeggrid component used here, the logic bar JSON format specific reference in the demo format, and then return to the client, the properties are id,name (these two are not allowed to modify is required), so the returned property must have these two properties, Second, add the ischecked attribute because there is a list of checkboxes. The specific code I will not copy (feeling written a lot of not much to write!) Please forgive me)


In fact, there are a lot of things inside, but nothing is the components used, just look at the demo, and then find some information on the Internet should still be able to solve the lost. Because I have limited technical ability, can only write this way, look at everyone's opinion, do not like to spray! Can communicate with each other. Thank you!


jquery Easy UI 1.5 The latest version simple permission assignment