基于layui的无限级联选择器

分享 未结 精帖 173 9969
凉宫
凉宫 2018-7-26
悬赏:20飞吻
html元素
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<input type="text" id="a" class="layui-input" readonly="readonly">
</div>
</div>
js引用
layui.use(['form',"jquery","cascader"], function(){
var $ = layui.jquery;
var cascader = layui.cascader;

var data = [
{
value: 'A',
label: 'a',
children: [
{
value: 'AA1',
label: 'aa1',
},
{
value: 'BB1',
label: 'bb1'
}
]
},
{
value: 'B',
label: 'b',
}
]
cascader({
elem: "#a",
data: data,
// url: "/aa",
// type: "post",
// triggerType: "change",
// showLastLevels: true,
// where: {
// a: "aaa"
// },
value: ["A", "AA1"],
success: function (valData,labelData) {
console.log(valData);
console.log(labelData);
}
});
});
cascader参数说明
1. elem:input容器
2. data:需要的静态数据,类型为数组,
3. url:异步获取的数据,类型为数组,(data与url两个参数二选一)
4. type:异步获取的方式,默认get,可省略
5. where:异步传入的参数,可省略
6. triggerType:触发方式,不填或其他都为click,可选参数"change",即鼠标移入触发
7. showLastLevels:输入框是否只显示最后一级,默认false,即全显示
8. value:传入的初始值,类型为数组,值为data的value值
9. success:回调函数,选择完成之后的回调函数,返回值第一个参数为value数组,第二个参数为label数组
在线demo
github源码
回帖
  • 贤心
    贤心 (管理员)
    2018-7-26
    Demo 页面打开速度太慢
    2 回复
  • 小熊371
    2018-7-30
    功能不错,就是样式丑了点
    1 回复
  • DC
    2018-8-29
    @sdfgs label里面的值可以正常获取呀,因为绑定的elem为input所以选择后会给这个input赋值,获取这个这个input的值就好了
    1 回复
  • 凉宫
    2019-6-25
    @HLrain 我没有360浏览器,测试到ie9都是支持的,你看看控制台有没有报错
    1 回复
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    </head>
    <body>

    <div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
    <div class="layui-upload-list">
    <table class="layui-table">
    <thead>
    <tr><th>文件名</th>
    <th>大小</th>
    <th>状态</th>
    <th>操作</th>
    </tr></thead>
    <tbody id="demoList"></tbody>
    </table>
    </div>
    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
    </div>

    <script src="/layui/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use('upload', function(){
    var $ = layui.jquery
    ,upload = layui.upload;
    //多文件列表示例
    var demoListView = $('#demoList')
    ,uploadListIns = upload.render({
    elem: '#testList'
    ,url: '/upload.php/uploads'
    ,accept: 'file'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){
    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
    //读取本地文件
    obj.preview(function(index, file, result){
    var tr = $(['<tr id="upload-'+ index +'">'
    ,'<td>'+ file.name +'</td>'
    ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
    ,'<td>等待上传</td>'
    ,'<td>'
    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
    ,'</td>'
    ,'</tr>'].join(''));

    //单个重传
    tr.find('.demo-reload').on('click', function(){
    obj.upload(index, file);
    });

    //删除
    tr.find('.demo-delete').on('click', function(){
    delete files[index]; //删除对应的文件
    tr.remove();
    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
    });

    demoListView.append(tr);
    });
    }
    ,done: function(res, index, upload){
    if(res.code == 0){ //上传成功
    var tr = demoListView.find('tr#upload-'+ index)
    ,tds = tr.children();
    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
    tds.eq(3).html(''); //清空操作
    return delete this.files[index]; //删除文件队列已经上传成功的文件
    }
    this.error(index, upload);
    }
    ,error: function(index, upload){
    var tr = demoListView.find('tr#upload-'+ index)
    ,tds = tr.children();
    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
    });
    });
    </script>
    </body>
    </html>

    帮忙写一个php后台
    0 回复
  • 寻见欢
    2018-7-26
    @让自己变得值钱 这不是多文件上传,php后台谷歌很多啊。其实这个就是单图上传的,他是一个一个获取url地址的。
    0 回复
  • 凉宫
    2018-7-26
    @贤心 我服务器过期了,代码托管到github上面的,确实有点慢[太开心]
    0 回复
  • @寻见欢 给个能用的
    0 回复
  • 凉宫
    2018-7-26
    @让自己变得值钱 不好意思哈,我不是做php的[微笑]
    0 回复
  • 寻见欢
    2018-7-26
    @让自己变得值钱 不做php,java我倒是有
    0 回复