基于ztree的城市树形联动

工作中有了需求,需要做三级联动里面的数据要作为树形的展示
哈哈,那就找找有没有现成的,遗憾,费了不少功夫,因为想要基于layui的树形联动
但是联动倒是有了,树形这个 贤心大神 还没有去做。
所以我就找其他的一些插件,网上有jstree和ztree,我觉得ztree倒是挺适合我这次的需求
作为抛砖引玉的代码
我做了一个demo,效果是:实现父级和子级都可以被选中,展示到一个input中,父级和子级呈树形展示
相当于是现在只是做了一个下拉单选框,哈哈,抛砖引玉,直接上代码:

html:

html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - checkbox select menuTITLE>
    <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">
        
    SCRIPT>
    <style type="text/css">
    style>
HEAD>

<BODY>
<h1>带 checkbox 的多选下拉菜单  -- zTreeh1>
<h6>[ 文件路径: super/select_menu_checkbox.html ]h6>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul class="list">
            <li class="title">  <span class="highlight_red">勾选 checkbox 或者 点击节点 进行选择span>li>
            <li class="title">  Test: <input id="citySel" type="text" readonly value="" style="width:120px;" οnclick="showMenu();" />
            li>
        ul>
    div>
    <div class="right">
        <ul class="info">
            <li class="title"><h2>实现方法说明h2>
                <ul class="list">
                    <li>用 checkbox 也可以轻松实现多选的下拉菜单li>
                    <li>此 Demo 主要用于 和 其他下拉菜单进行对比li>
                ul>
            li>
        ul>
    div>
div>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;">ul>
div>
BODY>
HTML>

js相关的文件就到ztree官网上下载吧

 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

    zTree 是开源免费的软件(MIT 许可证)。

zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能

最后我想说,其实文档里面讲的很详细,大家可以多看看,比较容易理解

转载于:https://www.cnblogs.com/hanlei525/p/9613017.html

你可能感兴趣的:(基于ztree的城市树形联动)