Maison > Article > interface Web > Un exemple de l'effet d'arborescence multi-sélection implémenté par le plug-in jQuery zTree
Un exemple de l'effet d'arborescence multi-sélection implémenté par le plug-in jQuery zTree
- 小云云original
- 2018-01-23 09:42:211974parcourir
Cet article présente principalement l'effet d'arbre à sélection multiple réalisé par le plug-in jQuery zTree. Il analyse les étapes de fonctionnement spécifiques et les précautions associées du plug-in d'arbre à sélection multiple zTree pour réaliser l'effet d'arbre à sélection multiple sous forme d'exemples. . Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
Cet article décrit l'effet d'arborescence multi-sélection implémenté par le plug-in jQuery zTree. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
1 Code d'implémentation :
<!DOCTYPE html>
<html>
<head>
<title>多选树</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="zTree_v3/css/demo.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
<script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="zTree_v3/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript">
<!--
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "s", "N": "ps" }
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"湖北省", open:true},
{ id:11, pId:1, name:"武汉市", open:true},
{ id:111, pId:11, name:"汉口"},
{ id:112, pId:11, name:"武昌"},
{ id:12, pId:1, name:"黄石市", open:true},
{ id:121, pId:12, name:"黄石港区"},
{ id:122, pId:12, name:"西塞山区"},
{ id:2, pId:0, name:"湖南省", open:true},
{ id:21, pId:2, name:"长沙市"},
{ id:22, pId:2, name:"株洲市", open:true},
{ id:221, pId:22, name:"天元区"},
{ id:222, pId:22, name:"荷塘区"},
{ id:23, pId:2, name:"湘潭市"}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeMultiple"), setting, zNodes);
});
//-->
</script>
</head>
<body>
<p class="content_wrap" style="text-align: center;">
<p class="zTreeDemoBackground left">
<ul id="treeMultiple" class="ztree" style="height: 300px; width:150px; overflow-y: auto"></ul>
</p>
</p>
</body>
</html>2. >
L'attribut N définit la situation après que la case soit décochée ;
"p" indique que l'opération affectera le nœud parent ;
"s" indique que l'opération affectera le nœud enfant.
chkboxType: { "Y": "s", "N": "ps" }
Explication détaillée de l'implémentation jquery ztree de la fonction de collecte par clic droit
Comment utiliser le plug-in d'arbre jQuery zTree correctement
Ztree implémente la fonction d'affichage horizontal des autorisations pour partager des exemples
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!