master

分支 (1)

管理

管理

master

treeSelect_old1
/
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>
    	.layui-form-item .layui-form-checkbox[lay-skin=primary] {margin-top: 0px;}
    </style>
</head>
<body style="padding: 25px;">
       <div class="layui-form-item">
           <label for="" class="layui-form-label">基本演示</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">常规用法</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">无连线风格</label>
           <div class="layui-input-block">
               <input type="text" id="tree3" lay-filter="tree3" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
           <label for="" class="layui-form-label">手风琴模式</label>
           <div class="layui-input-block">
               <input type="text" id="tree4" lay-filter="tree4" class="layui-input">
           </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/data.json',
            // 请求头
            headers: {},
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '请选择',
            //多选
            showCheckbox: true,
            //连线
            showLine: true,
            //选中节点(依赖于 showCheckbox 以及 key 参数)。
		    checked: [11, 12],
		    //展开节点(依赖于 key 参数)
		    spread: [1],
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
            }
        });

        treeSelect.render({
            // 选择器
            elem: '#tree2',
            // 数据
            data: 'data/data.json',
            // 请求头
            headers: {},
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '请选择',
            //连线
            showLine: true,
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
            }
        });

        treeSelect.render({
            // 选择器
            elem: '#tree3',
            // 数据
            data: 'data/data.json',
            // 请求头
            headers: {},
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '请选择',
            //无连线
            showLine: false,
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
            }
        });

        treeSelect.render({
            // 选择器
            elem: '#tree4',
            // 数据
            data: 'data/data.json',
            // 请求头
            headers: {},
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '请选择',
            //手风琴
  			accordion: true,
            //无连线
            showLine: true,
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
            }
        });

    });
    </script>

  <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?0d1b5ce014f106db865e11518d135c08";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>