master

分支 (1)

标签 (2)

管理

管理

master

v1.0.5.snapshot

v1.0.4

treeselect
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>树形下拉选择器</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <script src="assets/layui/layui.js"></script>
    <script src="module/common.js"></script>
    <style wjw>

    </style>
</head>
<body style="padding: 25px;">
   <div  class="layui-container layui-form">
        <div class="layui-form-item">
            <label for="" class="layui-form-label">使用文档</label>
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-primary" href="https://wujiawei0926.gitee.io/treeselect/docs/doc.html">点击打开</a>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">测试1的相关操作</label>
            <div class="layui-input-block">
                <button class="layui-btn" id="btnDestory">销毁</button>
                <button class="layui-btn" id="btnRevoke">撤销选中节点</button>
            </div>
        </div>
       <div class="layui-form-item">
           <label for="" class="layui-form-label">测试1</label>
           <div class="layui-input-block">
               <input type="text" id="tree" lay-filter="tree" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
           <label for="" class="layui-form-label">测试2</label>
           <div class="layui-input-block">
               <input type="text" id="tree2" lay-filter="tree2" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
            <label for="" class="layui-form-label">layer</label>
            <div class="layui-input-block">
                <button id="layer" class="layui-btn">点击打开</button>
            </div>
        </div>
   </div>

    <script>
    layui.use(['treeSelect', 'form', 'layer'], function () {
        var treeSelect= layui.treeSelect,
            form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;

        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: 'data/data3.json',
            // 请求头
            headers: {},
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '修改默认提示信息',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
                treeSelect.checkNode('tree', 3);

                console.log($('#tree').val());

//                获取zTree对象，可以调用zTree方法
               var treeObj = treeSelect.zTree('tree');
               console.log(treeObj);

//                刷新树结构
               treeSelect.refresh('tree');
            }
        });

        treeSelect.render({
            // 选择器
            elem: '#tree2',
            // 数据
            data: 'data/data3.json',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '占位符',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            style: {
                folder: {
                    enable: false
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
//                treeSelect.checkNode('tree', 3);

//                获取zTree对象，可以调用zTree方法
//                var treeObj = treeSelect.zTree('tree');
//                console.log(treeObj);

//                刷新树结构
//                treeSelect.refresh('tree');
            }
        });


        // 通过layer打开
        $('#layer').click(function(){
            layer.open({
                type: 1,
                title: 'Layer',
                content: $('.layui-container'),
                area: ['500px', '300px']
            });
        });

        $('#btnDestory').click(function(){
            treeSelect.destroy('tree');
        });

        $('#btnRevoke').click(function(){
            treeSelect.revokeNode('tree', function(d){
                console.log(d);
                console.log(d.treeId);
            });
        });


    });
    </script>
</body>
</html>