Ztree新增角色和編輯角色回顯問題的解決
更新時(shí)間：2016年10月25日 14:47:04 作者：woonu
這篇文章主要介紹了Ztree新增角色和編輯角色回顯問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近在項(xiàng)目中使用到了ztree，在回顯時(shí)候費(fèi)了點(diǎn)時(shí)間，特記錄下來供下次參考。
1、新增角色使用ztree加載權(quán)限，由于權(quán)限不多，所以使用直接全部加載。
效果圖：
具體涉及ztree代碼：
jsp中導(dǎo)入：/js/ztree/zTreeStyle.css和js/ztree/jquery.ztree.all-3.5.js
頁(yè)面加入
<ul id="functionTree" class="ztree"></ul>
js代碼（此js中加入了layer彈框效果）：
<script>
$(function() {
// 授權(quán)樹初始化
var setting = {
data : {
key : {
title : "t"
},
simpleData : {
enable : true
}
},
check : {//使用ztree選中效果
enable : true,
}
};
$.ajax({
url : '${pageContext.request.contextPath}/rest/sys/getAllFunction',//發(fā)送ajax請(qǐng)求加載權(quán)限數(shù)據(jù)
type : 'get',
dataType : 'json',
success : function(data) {//data就是服務(wù)端返回的權(quán)限數(shù)據(jù)
//var zNodes = eval("(" + data + ")");
//使用權(quán)限數(shù)據(jù)初始化ztree
$.fn.zTree.init($("#functionTree"), setting, data);
},
error : function(msg) {
alert('樹加載異常!');
}
});
//確定添加按鈕
$("#btn_submit").click(function() {
if(checkHousetype()){
//獲得ztree對(duì)象
var treeObj = $.fn.zTree.getZTreeObj("functionTree");
//獲得當(dāng)前ztree對(duì)象選中的節(jié)點(diǎn)數(shù)組
var nodes = treeObj.getCheckedNodes(true);//在提交表單之前將選中的checkbox收集
//循環(huán)數(shù)組，獲得節(jié)點(diǎn)的ID，拼接成字符串使用逗號(hào)分隔
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 }/rest/sys/addRole",
// data : $("#formproject").serialize(),
data:formData,
contentType: false,
processData: false,
statusCode : {
201 : function() {
layer.msg('新增角色成功!', {icon: 6,time:1500},function(){
location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist";
})
},
400 : function() {
layer.msg('提交的參數(shù)不合法', {time:1500});
},
500 : function() {
layer.msg('網(wǎng)絡(luò)異常，請(qǐng)稍候再試!', {time:1500});
}
}
});
}
});
});
//校驗(yàn)
function checkHousetype(){
var flag = true ;
//關(guān)鍵字
if($("#code").val()==''){
flag = false ;
layer.msg('請(qǐng)輸入關(guān)鍵字', {time:1500});
return flag ;
}
//名稱
if($("#name").val()==''){
flag = false ;
layer.msg('請(qǐng)輸入角色名稱', {time:1500});
return flag ;
}
return flag ;
}
</script>
權(quán)限中Ztree格式：
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;
//ztree組件需要格式
public String getpId() {
return this.pid==null?"0":this.pid;
}
......
2、編輯角色回顯Ztree
js代碼：
<script>
var zNodes;
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
//當(dāng)頁(yè)面加載完畢，向后臺(tái)發(fā)送ajax請(qǐng)求，獲取用戶id為1的用戶所擁有的權(quán)限
//（這里要顯示所有權(quán)限，該id用戶的權(quán)限回顯時(shí)，被自動(dòng)選中）,這里的用戶id為1僅做測(cè)試使用，實(shí)際開發(fā)中會(huì)傳值
function loadPower(roleId){
$.ajax({
type:"post",
url:"${pageContext.request.contextPath }/rest/sys/queryFunByRoleId",
data:{"roleId":roleId},
async:false,
dataType:"json",
success:function(data){
zNodes=data;
}
})
}
$(function() {
// 授權(quán)樹初始化
var setting = {
data : {
key : {
title : "t"
},
simpleData : {
enable : true
}
},
check : {//使用ztree選中效果
enable : true,
}
};
//頁(yè)面加載完畢時(shí)加載此方法
$(document).ready(function(){
var id = $("#roleId").val();
loadPower(id);
$.fn.zTree.init($("#functionTree"), setting, zNodes);
});
//確定添加按鈕
$("#btn_submit").click(function() {
if(checkHousetype()){
//獲得ztree對(duì)象
var treeObj = $.fn.zTree.getZTreeObj("functionTree");
//獲得當(dāng)前ztree對(duì)象選中的節(jié)點(diǎn)數(shù)組
var nodes = treeObj.getCheckedNodes(true);//在提交表單之前將選中的checkbox收集
//循環(huán)數(shù)組，獲得節(jié)點(diǎn)的ID，拼接成字符串使用逗號(hào)分隔
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 }/rest/sys/eidtRole",
// data : $("#formproject").serialize(),
data:formData,
contentType: false,
processData: false,
statusCode : {
201 : function() {
layer.msg('編輯角色成功!', {icon: 6,time:1500},function(){
location.href = "${pageContext.request.contextPath }/rest/sys/page/rolelist";
})
},
400 : function() {
layer.msg('提交的參數(shù)不合法', {time:1500});
},
500 : function() {
layer.msg('網(wǎng)絡(luò)異常，請(qǐng)稍候再試!', {time:1500});
}
}
});
}
});
});
//校驗(yàn)
function checkHousetype(){
var flag = true ;
//關(guān)鍵字
if($("#code").val()==''){
flag = false ;
layer.msg('請(qǐng)輸入關(guān)鍵字', {time:1500});
return flag ;
}
//名稱
if($("#name").val()==''){
flag = false ;
layer.msg('請(qǐng)輸入角色名稱', {time:1500});
return flag ;
}
return flag ;
}
</script>
java后臺(tái)：
controller:
/**
* 編輯角色，回顯角色權(quán)限
* @param roleId
* @return
*/
@RequestMapping(value = "queryFunByRoleId", method = RequestMethod.POST)
public ResponseEntity<List<Map<String, Object>>> queryFunByRoleId(String roleId) {
try {
if(StringUtils.isBlank(roleId)){
// 返回400
return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null);
}
return ResponseEntity.ok(sysService.queryFunByRoleId(roleId));
} catch (Exception e) {
e.printStackTrace();
}
// 出錯(cuò) 500
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
service：
由于List中的contains方法校驗(yàn)老是失敗，也沒糾結(jié)什么原因，自己寫的根據(jù)id校驗(yàn)
/**
* zTree v3回顯
* 初始化化權(quán)限樹
* 拼接treeNode屬性
*/
@Transactional(readOnly=true)
public List<Map<String, Object>> queryFunByRoleId(String roleId) {
//查詢所有權(quán)限
List<AuthFunction> functions = queryAllAuthFunction();
//查詢指定角色的權(quán)限
List<AuthFunction> functionsByRoleId = findFunctionByRoleId(roleId);
//包裝zTree
List<Map<String, Object>> list =new ArrayList<Map<String, Object>>();
Map<String, Object>map=null;
for(int 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());
//判斷指定用戶的角色是否在所有角色中包含，有則設(shè)置checked=true.
if(functionsByRoleId != null && functionsByRoleId.size()>0 && ListIsContainsObj(functionsByRoleId,fun)){
map.put("checked",true);
}else {
map.put("checked",false);
}
list.add(map);
}
return list;
}
//校驗(yàn)全部權(quán)限中是否有某個(gè)權(quán)限，有返回true
private boolean ListIsContainsObj(List<AuthFunction> functions, AuthFunction fun) {
if(fun == null || functions == null || functions.size()<=0){
return false;
}
for (AuthFunction authFunction : functions) {
if(fun.getId().equals(authFunction.getId())){
return true;
}
}
return false;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
jquery插件jTimer(jquery定時(shí)器)使用方法
很多時(shí)候我們需要按時(shí)間間隔執(zhí)行一個(gè)任務(wù),當(dāng)滿足一定條件時(shí)停止執(zhí)行.此插件旨在解決這一經(jīng)常遇到的問題2013-12-12
下面小編就為大家?guī)硪黄啿サ暮?jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
jquery根據(jù)一個(gè)值來選中select下的option實(shí)例代碼
下面小編就為大家?guī)硪黄猨query根據(jù)一個(gè)值來選中select下的option實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
JQuery 改變頁(yè)面字體大小的實(shí)現(xiàn)代碼(實(shí)時(shí)改變網(wǎng)頁(yè)字體大小)
分別定義三個(gè)class為increaseFont、decreaseFont、resetFont 的元素。為其click事件添加事件2012-03-03
jQuery的Ajax用戶認(rèn)證和注冊(cè)技術(shù)實(shí)例教程(附demo源碼)
這篇文章主要介紹了jQuery的Ajax用戶認(rèn)證和注冊(cè)技術(shù),結(jié)合完整實(shí)例較為詳細(xì)的分析講解了jQuery中ajax方法實(shí)現(xiàn)用戶驗(yàn)證與注冊(cè)的相關(guān)技巧與注意事項(xiàng),并附帶了demo源碼供讀者下載,需要的朋友可以參考下2015-12-12
jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標(biāo)就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。2014-07-07
formValidator3.3的ajaxValidator一些異常分析
ajaxvalidator是大家問的最多的問題，修正一個(gè)bug（感謝網(wǎng)友“じ龍峸√”），并把大家最關(guān)心的問題，再做一次闡述。2011-07-07
jquery實(shí)現(xiàn)垂直手風(fēng)琴菜單
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)垂直手風(fēng)琴菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
關(guān)于query Javascript CSS Selector engine
本篇文章，小編將為大家介紹，關(guān)于query Javascript CSS Selector engine，有需要的朋友可以參考一下2013-04-04
jQuery實(shí)現(xiàn)類似滑動(dòng)門切換效果的層切換
滑動(dòng)門切換效果想必大家都有見到過吧，在本文為大家介紹下jQuery是如何實(shí)現(xiàn)層切換的2013-09-09