zTree cliquez sur le texte pour cocher la case-js tutoriel-php.cn

zTree cliquez sur le texte pour cocher la case

黄舟

Libérer： 2017-02-18 13:23:40

original

2182 Les gens l'ont consulté

1. Contexte du problème

Le système utilise le plug-in zTree pour générer une arborescence de vérification déroulante, cliquez sur le texte pour cocher la case

2. Code source d'implémentation

<!DOCTYPE html>
<html>
<head>
    <title>zTree点击文字勾选复选框</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //初始化树
            zTree = $.fn.zTree.init($("#treeSelect"), setting, datas);
        });
     
        //设置
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: { 
                onClick: function (e, treeId, treeNode, clickFlag) { 
                    zTree.checkNode(treeNode, !treeNode.checked, true); 
                } 
            },
        }, zTree;
 
        //数据
        var datas =[
            { id:1, pId:0, name:"树", open:true},
            { id:11, pId:1, name:"松树", open:true},
            { id:12, pId:1, name:"樟树", open:true},
            { id:2, pId:0, name:"花", checked:true, open:true},
            { id:21, pId:2, name:"梅花"},
            { id:22, pId:2, name:"桃花", open:true}
        ];
    </script>
</head>
 
<body>
    <p style="vertical-align: middle; text-align: center;">
        <p>
            <ul id="treeSelect" class="ztree"></ul>
        </p>
    </p>
</body>
</html>

Copier après la connexion

3. Résultat de la mise en œuvre

zTree cliquez sur le texte pour cocher la case

Ce qui précède est le contenu de zTree en cliquant sur le texte pour cocher la case, plus connexe Veuillez faire attention au site Web PHP chinois (www.php.cn) pour le contenu !