ZTREE DEMO

来源：互联网发布：心动的感觉知乎编辑：程序博客网时间：2024/05/17 02:11

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - radio</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-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>

<SCRIPT type="text/javascript">
  <!--
  var setting = {
   check: {
    enable: true,
    chkStyle: "radio",
    radioType: "level"
   },
   data: {
    simpleData: {
     enable: true
    }
   },
   callback: {
    onClick: onClick
    //onCheck: onCheck
   }
  };

  function onClick(e, treeId, treeNode) {
   var zTree = $.fn.zTree.getZTreeObj("treeDemo");
   zTree.checkNode(treeNode, !treeNode.checked, null, true);
   return false;
  }

<BODY>
<h1>Radio 勾选操作</h1>
<h6>[ 文件路径: excheck/radio.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
  <ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
  <ul class="info">
   <li class="title"><h2>1、setting 配置信息说明</h2>
    <ul class="list">
    <li class="highlight_red">使用 radio，必须设置 setting.check 中的各个属性，详细请参见 API 文档中的相关内容</li>
    <li><p>radio 分组范围：<input type="radio" id="level" class="radio first" name="radioGroup" checked /><span>同一级内</span>
      <input type="radio" id="all" class="radio" name="radioGroup"/><span>整棵树内</span><br/>
      <ul id="code" class="log" style="height:20px;"></ul></p>
    </li>
    </ul>
   </li>
   <li class="title"><h2>2、treeNode 节点数据说明</h2>
    <ul class="list">
    <li class="highlight_red">1)、如果需要初始化默认节点被勾选，请设置 treeNode.checked 属性，详细请参见 API 文档中的相关内容</li>
    <li class="highlight_red">2)、如果某节点不显示 radio，请设置 treeNode.nocheck 属性，详细请参见 API 文档中的相关内容</li>
    <li class="highlight_red">3)、如果更换 checked 属性，请参考 API 文档中 setting.data.key.checked 的详细说明</li>
    <li>4)、其他请参考 API 文档中 treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus 的详细说明</li>
    </ul>
   </li>
  </ul>
</div>
</div>
</BODY>
</HTML>