技術交流QQ羣【JAVA,C++,Python,.NET,BigData,AI】：170933152
判斷用戶有沒有選中節點:
var treeown = $('#tree_' + own).jstree(true);//獲得整個樹
if (treeown) {
var selectednode = _getCurrNode(own);
if (selectednode) {
//沒有勾選是否功能菜單
//$.modal.alertWarning("請先選中要刪除的菜單!!");
} else {
$.modal.alertWarning("請先選中要刪除的菜單!!");
return;
}
}
/**
* 獲取當前所選中的結點
*/
function _getCurrNode(own){
var ref = $('#tree_' + own).jstree(true),
sel = ref.get_selected();
console.log(sel);
if(!sel.length) {
console.log("----");
return false;
}
selsel = sel[0];
return sel;
}
判斷是否爲最末級菜單:
//獲取選中節點,判斷該節點有無子節點:
var treeown = $('#tree_' + own).jstree(true);//獲得整個樹
if (treeown) {
var selectednode = _getCurrNode(own);
if (util.isEmpty(variety)) {
//沒有勾選是否功能菜單
} else {
if (treeown.is_leaf(selectednode)) {
//如果是最末級別,可以選擇爲功能菜單
} else {
//否則不能勾選爲功能菜單
$.modal.alertWarning("請勾選末級菜單爲功能菜單!");
return;
}
}
}
判斷是否有子節點:
有3種方法:
-
用is_parent( node)方法, node傳節點ID或節點對象, 有下級節點則返回true.
-
用is_leaf(node)方法, 此方法表示是否爲最末級, 剛好和is_parent相反.
-
在事件中獲取node對象, 其中node.child爲包含所有直接子節點的數組, node.child.length === 0 則沒有下級節點.
示例:
html
|
1 |
|
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
補充:刷新樹
$('#tree_' + own).jstree(true).refresh();
需要導入這兩個文件:
<link href="../plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css" />
<script src="../plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
這裏需要注意:如果用jstree之前,一棵樹,不銷燬的話,繼續用是沒有效果的jstree,會還是之前構建的樹,用之前需要銷燬之前的.
需要調用:
$('#tab_1').jstree("destroy");
這樣來把之前的樹銷燬一下,重新生成新的纔行
1.定義:
其實定義一個id,就可以來初始化一個tree
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
</div>
<div class="tab-pane" id="tab_2">
</div>
<div class="tab-pane" id="tab_3">
</div>
<div class="tab-pane" id="tab_4">
</div>
<div class="tab-pane active" id="tab_5">
</div>
</div>
2. 初始化一棵樹
根據div的id初始化一棵樹:
$('#tab_'+own).jstree({
"core" : {
"themes" : {
"responsive": false
},
"check_callback" : true,
'data' : function (obj, callback) {
var jsonstr="[]";
var jsonarray = eval('('+jsonstr+')');
constant.ajax.get({ //傳給後臺的數據,以及訪問後臺的url
url:http://localhost:8081/sc-test/getmenu,
data:{curSystem:own,type:1,curroleId:curoleid},//傳給後臺的數據,根據需要寫
async: false,
success:function(result) { //只有這裏需要自己寫
var arrays= result.data.list;
for(var i=0 ; i<arrays.length; i++){
if(arrays[i].parentMenuid==null){
arrays[i].parentMenuid = 0;
}
var arr = {
"id":arrays[i].id,//樹節點的id
"parent":arrays[i].parentMenuid==0?"#":arrays[i].parentMenuid 父節點
"text":arrays[i].menuName,//顯示菜單名字
"state":{"selected":arrays[i].isselected}
//這裏,標識一個節點的CheckBox是否爲選中的狀態如果,樹
//沒有CheckBox,則不需要state":這個部分
}
jsonarray.push(arr);
}
}
})
callback.call(this, jsonarray);
}
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
},
"state" : { "key" : "demo2" },
"checkbox" : {
"keep_selected_style" : true
},
"plugins" : ["themes","contextmenu",'checkbox']
// "plugins":["themes","html_data","contextmenu"]
//這個是不帶CheckBox的,如需要CheckBox,使用上面的
});
3.根據選擇的樹的某一節點,的時候做什麼動作
$('#tab_'+own).on('changed.jstree',function(e,data){
//當前選中節點的id
var domId = data.instance.get_node(data.selected[0]).id;
//當前選中節點的文本值
//var value = data.instance.get_node(data.selected[0]).text;
if(domId!=undefined){
constant.ajax.get({
url:constant.url.sc_support.cmenu+"/"+domId,//根據選中的節點id去後臺取數據
data:{},
async:false,
success:function(data){
var result = data.data;
//console.log(result);
if(result!=null){
menuId = result.id;
debugger;
$('#parentMenuid'+own).val(result.parentMenuid);
$('#menuName'+own).val(result.menuName);
$('#menuUrl'+own).val(result.menuUrl);
$('#menuOrder'+own).val(result.menuOrder);
$('#menuIcon'+own).val(result.menuIcon);
if(result.variety=="1"){
//讓:<input id="isvariety" type="checkbox" style="margin-left: 10px;vertical-align: text-bottom;" name="isvariety" value="1">
//類似於上面這個選中,或非選中
$("#isvariety").prop("checked","checked");
}else{
$("#isvariety").prop("checked",false);
}
// if(own==dic.getByDictId("SYS_TYPE","SYS_PE").code)
// $("#variety").val(result.varIety);
// }
}
},
error:function(){
}
})
}
});
4.點擊保存的時候,獲取選中的節點值傳給後臺處理
$("#btnSaveRoleAccess").click(function () {//這裏有5顆樹,獲取每顆樹,上CheckBox被選中的部分
var slectedArray=[];
debugger;
var tab1 = $('#tab_1').jstree(true);//獲得整個樹
if(tab1){//如果樹不爲null
var tab1CheckedNodes = tab1.get_checked(true);
tab1CheckedNodes.forEach(function(e)
{
if(!!e.parent && e.parent!="#"){
slectedArray.push({"id":e.id,"text":e.text,"systype":"1"});
}
});
}
var tab2 = $('#tab_2').jstree(true);//獲得整個樹
if(tab2){
var tab2CheckedNodes = tab2.get_checked(true);
tab2CheckedNodes.forEach(function(e)
{
if(!!e.parent && e.parent!="#"){
slectedArray.push({"id":e.id,"text":e.text,"systype":"2"});
}
});
}
var tab3 = $('#tab_3').jstree(true);//獲得整個樹
if(tab3){
var tab3CheckedNodes = tab3.get_checked(true);
tab3CheckedNodes.forEach(function(e)
{
if(!!e.parent && e.parent!="#"){
slectedArray.push({"id":e.id,"text":e.text,"systype":"3"});
}
});
}
var tab4 = $('#tab_4').jstree(true);//獲得整個樹
if(tab4){
var tab4CheckedNodes = tab4.get_checked(true);
tab4CheckedNodes.forEach(function(e)
{
if(!!e.parent && e.parent!="#"){
slectedArray.push({"id":e.id,"text":e.text,"systype":"4"});
}
});
}
var slectedArrayStr=JSON.stringify(slectedArray);
var cmParam = {};
var role={}
role.rolename = $("#inputrolename").val();
role.roleintro = $("#inputroleintro").val();
role.roleid = curoleid;
cmParam.type = "addBusMenuAccess";
cmParam.mark = JSON.stringify(role);
cmParam.data = slectedArrayStr;//發給後臺處理
constant.ajax.post(constant.url.sc_support.rolebusmenuaccess,cmParam,
function (data){
if(data.data==0){
swal('操作成功','','success');
accessArray();
}else{
swal('請先添加這個權限','','warning')
}
//$("#btn-rolepermiss").trigger("click");
//$("a[class = 'jstree-anchor jstree-clicked']:contains('角色權限關聯')").trigger("click");
},
function (err){},
null
)
});