Use Ztree to add roles and edit role echo.

Use Ztree to add roles and edit role echo.

Ztree was recently used in the project, and it took some time to display it back. It was recorded for reference next time.

1. added the ztree loading permission for the role. because there are not many permissions, the role can be loaded directly.

:

 

Specific ztree code:

Jsp import:/js/ztree/zTreeStyle.css and js/ztree/jquery. ztree. all-3.5.js

Page Addition

<ul id="functionTree" class="ztree"></ul>

Js Code (this js contains the layer bullet box effect ):

<Script> $ (function () {// authorization tree initialization var setting = {data: {key: {title: "t"}, simpleData: {enable: true }}, check :{// enable: true, }};$. ajax ({url: '$ {pageContext. request. contextPath}/rest/sys/getAllFunction ', // send an ajax request to load permission data type: 'get', dataType: 'json', success: function (data) {// data is the permission data returned by the server // var zNodes = eval ("(" + data + ")"); // use the permission data to initialize ztree $. fn. zTree. init ($ ("# functionTree"), s Etting, data) ;}, error: function (msg) {alert ('tree loading exception! ') ;}}); // Confirm the Add button $ ("# btn_submit "). click (function () {if (checkHousetype () {// obtain the ztree object var treeObj = $. fn. zTree. getZTreeObj ("functionTree"); // obtain the node array var nodes = treeObj selected by the current ztree object. getCheckedNodes (true); // collect the selected checkbox array before submitting the form. // obtain the node ID and splice it into a string using commas to separate var Array = new array (); for (var I = 0; I <nodes. length; I ++) {array. push (nodes [I]. id);} var ids = array. join (","); $ ("input [name = funcitonIds]"). val (ids); var form Data = new FormData ($ ("# formproject") [0]); $. ajax ({type: "POST", url: "$ {pageContext. request. contextPath}/rest/sys/addRole ", // data: $ (" # formproject "). serialize (), data: formData, contentType: false, processData: false, statusCode :{ 201: function () {layer. msg ('Role added successfully! ', {Icon: 6, time: 1500}, function () {location. href = "$ {pageContext. request. contextPath}/rest/sys/page/rolelist ";})}, 400: function () {layer. msg ('invalid submitted parameter ', {time: 1500}) ;}, 500: function () {layer. msg ('network exception. Please try again later! ', {Time: 1500}) ;}}}) ;}}) ;}); // check function checkHousetype () {var flag = true; // keyword if ($ ("# code "). val () = '') {flag = false; layer. msg ('Enter the keyword ', {time: 1500}); return flag;} // name if ($ ("# name "). val () = '') {flag = false; layer. msg ('Enter the role name', {time: 1500}); return flag;} </script>

Ztree format in permission:

Private String id; private String name; private String code; private String description; // private String page; // private String generatemenu; // private String zindex; private String pid; private boolean isParent; // The ztree component must be in the public String getpId () {return this. pid = null? "0": this. pid ;}......

　　

 

2. Edit role echo Ztree

Js Code:

<Script> var zNodes; var setting = {check: {enable: true}, data: {simpleData: {enable: true }}; // when the page is loaded, send an ajax request to the backend to obtain the permissions of a user with a user id of 1 // (all permissions are displayed here, And the permissions of this user id are automatically selected when they are displayed ), here, the user ID is 1 for testing only. In actual development, the value of function loadPower (roleId) {$. ajax ({type: "post", url: "$ {pageContext. request. contextPath}/rest/sys/queryFunByRoleId ", data: {" roleId ": roleId}, async: false, dataType:" json ", success: function (data) {zNo Des = data ;}} $ (function () {// authorization tree initialization var setting = {data: {key: {title: "t"}, simpleData: {enable: true }}, check :{// use ztree to select enable: true ,}}; // load this method when the page is loaded $ (document ). ready (function () {var id = $ ("# roleId "). val (); loadPower (id); $. fn. zTree. init ($ ("# functionTree"), setting, zNodes) ;}); // click the Add button $ ("# btn_submit "). click (function () {if (checkHousetype () {// obtain the ztree object var treeObj = $. fn. zTree. ge TZTreeObj ("functionTree"); // obtain the node array var nodes = treeObj selected by the current ztree object. getCheckedNodes (true); // collect the selected checkbox array before submitting the form. // obtain the node ID and splice it into a string using commas to separate var Array = new array (); for (var I = 0; I <nodes. length; I ++) {array. push (nodes [I]. id);} var ids = array. join (","); $ ("input [name = funcitonIds]"). val (ids); var formData = new FormData ($ ("# formproject") [0]); $. ajax ({type: "POST", url: "$ {pageContext. request. contextPath}/r Est/sys/eidtRole ", // data: $ (" # formproject "). serialize (), data: formData, contentType: false, processData: false, statusCode :{ 201: function () {layer. msg ('Role edited successfully! ', {Icon: 6, time: 1500}, function () {location. href = "$ {pageContext. request. contextPath}/rest/sys/page/rolelist ";})}, 400: function () {layer. msg ('invalid submitted parameter ', {time: 1500}) ;}, 500: function () {layer. msg ('network exception. Please try again later! ', {Time: 1500}) ;}}}) ;}}) ;}); // check function checkHousetype () {var flag = true; // keyword if ($ ("# code "). val () = '') {flag = false; layer. msg ('Enter the keyword ', {time: 1500}); return flag;} // name if ($ ("# name "). val () = '') {flag = false; layer. msg ('Enter the role name', {time: 1500}); return flag;} </script>

 

Java Background:

Controller:

/*** Edit the role and echo the role permission * @ param roleId * @ return */@ RequestMapping (value = "queryFunByRoleId", method = RequestMethod. POST) public ResponseEntity <List <Map <String, Object> queryFunByRoleId (String roleId) {try {if (StringUtils. isBlank (roleId) {// return 400 return ResponseEntity. status (HttpStatus. BAD_REQUEST ). body (null);} return ResponseEntity. OK (sysService. queryFunByRoleId (roleId);} catch (Exception e) {e. printStackTrace ();} // Error 500 return ResponseEntity. status (HttpStatus. INTERNAL_SERVER_ERROR ). body (null );}

Service:

Because the contains method validation in the List is always failed, there is no need to worry about the reason, write your own id-based verification

/*** ZTree v3 echo * initialize permission tree * splice treeNode attributes */@ Transactional (readOnly = true) public List <Map <String, object> queryFunByRoleId (String roleId) {// query all permissions List <AuthFunction> functions = queryAllAuthFunction (); // query the permission List of a specified role <AuthFunction> functionsByRoleId = findFunctionByRoleId (roleId); // wrap the zTree List <Map <String, Object> list = new ArrayList <Map <String, object >>> (); Map <String, Object> map = null; for (I Nt I = 0; I <functions. size (); I ++) {map = new HashMap <> (); // Role role = functions. get (I); AuthFunction fun = functions. get (I); map. put ("id", fun. getId (); map. put ("pId", fun. getpId (); map. put ("name", fun. getName (); map. put ("isParent", fun. getIsParent (); // determines whether the specified user's role is included in all roles. If yes, set checked to true. if (functionsByRoleId! = Null & functionsByRoleId. size ()> 0 & ListIsContainsObj (functionsByRoleId, fun) {map. put ("checked", true);} else {map. put ("checked", false);} list. add (map) ;}return list ;}// check whether a permission exists in all permissions. A trueprivate boolean ListIsContainsObj (List <AuthFunction> functions, AuthFunction fun) is returned) {if (fun = null | functions. size () <= 0) {return false;} for (AuthFunction authFunction: functions) {if (fun. getId (). equals (authFunction. getId () {return true;} return false ;}