请问用layui如何实现在弹出列表窗口中多选,然后返回并带回选中的所有值。

提问 未结 18 513
Gamebook
Gamebook 2019-10-3
悬赏:20飞吻
版本:layui 浏览器:
如题。希望可以有完整可用的示例代码,谢谢!
回帖
  • HTML部分:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <style>
    .container {
    padding: 30px
    }

    .items {
    width: 500px;
    }

    .items input:hover {
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <form class="layui-form">
    <div class="layui-form-item">
    <label class="layui-form-label">选中的项</label>
    <div class="layui-input-block items">
    <input name="items" id="items" readonly class="layui-input"/>
    </div>
    </div>
    </form>

    <div id="dataDiv" style="display: none;padding: 20px">
    <table id="dataTable"></table>
    </div>
    </div>
    <script src="../js/jquery-1.11.0.js"></script>
    <script src="../layui/layui.all.js"></script>
    <script>
    (function() {
    var view = {
    data: {
    //表格数据
    items: [
    { id: 1, name: '北京' },
    { id: 2, name: '上海' },
    { id: 3, name: '广州' },
    { id: 4, name: '深圳' },
    { id: 5, name: '天津' },
    { id: 6, name: '南京' },
    { id: 7, name: '杭州' },
    { id: 8, name: '成都' },
    { id: 9, name: '石家庄' },
    { id: 10, name: '济南' },
    { id: 11, name: '沈阳' },
    ],
    //选中的值
    selectItems:[],
    },
    //模块引入
    plugins: {},
    openDialog: function() {
    var _this = this;

    layer.open({
    type: 1,
    title: '选择城市',
    content: $('#dataDiv'),
    area: ['500px',' 440px'],
    success: function() {
    _this.initTable();
    },
    btn: ['确定', '取消'],
    btnAlign: 'c',
    yes: function(index) {
    var selectItems = _this.plugins.table.checkStatus('dataTable').data;
    console.log("选择的选项: " + JSON.stringify(selectItems));

    if(selectItems.length == 0) {
    layer.msg('请选择城市', {icon: 2});
    return;
    }

    var items = [];
    $(selectItems).each(function(index, item) {
    items.push(item.id)
    })

    _this.data.selectItems = items;

    layer.close(index)
    },
    end: function() {
    $('#dataDiv').hide();
    }
    })
    },
    initTable: function() {
    var _this = this;

    //模拟异步请求
    _this.plugins.table.render({
    elem: '#dataTable',
    url: 'city.json',
    cols: [[
    {type: 'checkbox'},
    {field: 'id', title:'ID', width: 80},
    {field: 'name', title:'名称'},
    ]],
    parseData: function(res) {
    var data = res.data;

    //判断是否有选中项
    $(data).each(function(index, item) {
    if(_this.data.selectItems.length > 0 && _this.data.selectItems.indexOf(item.id) != -1) {
    item.LAY_CHECKED = true;
    }
    })

    return {
    code: 0,
    data: data,
    msg: '',
    count: res.count
    }
    },
    })
    },
    bindEvent: function() {
    var _this = this;

    $('#items').click(function() {
    _this.openDialog();
    })
    },
    init: function() {
    var _this = this;
    var mods = ['form', 'table', 'jquery'];
    layui.use(mods, function() {
    for(var i = 0; i < mods.length;i++) {
    var plName = mods[i];
    _this.plugins[plName] = layui[plName];
    }

    //绑定事件
    _this.bindEvent();
    })
    }
    }

    view.init();
    })();
    </script>
    </body>
    </html>

    JSON部分:
    {"code": "0", "msg": "success", "data": [
    { "id": 1, "name": "北京" },
    { "id": 2, "name": "上海" },
    { "id": 3, "name": "广州" },
    { "id": 4, "name": "深圳" },
    { "id": 5,"name": "天津" },
    { "id": 6, "name": "南京" },
    { "id": 7, "name": "杭州" },
    { "id": 8, "name": "成都" },
    { "id": 9, "name": "石家庄" },
    { "id": 10, "name": "济南" },
    { "id": 11, "name": "沈阳" }
    ], "count": 11}
    0 回复
  • Gamebook
    2019-10-4
    谢谢回复!我试试!顺祝国庆假期快乐![微笑]
    0 回复
  • Gamebook
    2019-10-4

    @希望的曙光 您好!为什么会出现这个错误呢?请不吝赐教!
    0 回复
  • Gamebook
    2019-10-4

    这个地方我把您的代码里的 [[ 和 ]] 改为 [ 和 ] 了!
    0 回复
  • @Gamebook 这里是二维数组[[]] 文档里有
    0 回复
  • Gamebook
    2019-10-5
    谢谢回复,但是我一改回 [[]] 调试就会返回错误:数据接口请求异常:parsererror
    0 回复
  • Gamebook
    2019-10-5
    正如这个帖子说的:https://fly.layui.com/jie/46024/ 走不到parseData方法就直接显示‘数据接口请求异常:parsererror’ 了
    0 回复
  • @Gamebook 请求返回的json格式是否正确
    0 回复
  • Gamebook
    2019-10-6
    谢谢回复!我调用的后台php代码这样写是否正确?
    if($type=="city_json"){
    $json_data = json_decode('{"code": "0", "msg)": "success", "data": [
    { "id": 1, "name": "北京" },
    { "id": 2, "name": "上海" },
    { "id": 3, "name": "广州" },
    { "id": 4, "name": "深圳" },
    { "id": 5,"name": "天津" },
    { "id": 6, "name": "南京" },
    { "id": 7, "name": "杭州" },
    { "id": 8, "name": "成都" },
    { "id": 9, "name": "石家庄" },
    { "id": 10, "name": "济南" },
    { "id": 11, "name": "沈阳" }
    ], "count": 11}', true);

    echo $json_data;
    }

    $json_data 打印出来是这样的:array (
    'code' => '0',
    'msg)' => 'success',
    'data' =>
    array (
    0 =>
    array (
    'id' => 1,
    'name' => '北京',
    ),
    1 =>
    array (
    'id' => 2,
    'name' => '上海',
    ),
    2 =>
    array (
    'id' => 3,
    'name' => '广州',
    ),
    3 =>
    array (
    'id' => 4,
    'name' => '深圳',
    ),
    4 =>
    array (
    'id' => 5,
    'name' => '天津',
    ),
    5 =>
    array (
    'id' => 6,
    'name' => '南京',
    ),
    6 =>
    array (
    'id' => 7,
    'name' => '杭州',
    ),
    7 =>
    array (
    'id' => 8,
    'name' => '成都',
    ),
    8 =>
    array (
    'id' => 9,
    'name' => '石家庄',
    ),
    9 =>
    array (
    'id' => 10,
    'name' => '济南',
    ),
    10 =>
    array (
    'id' => 11,
    'name' => '沈阳',
    ),
    ),
    'count' => 11,
    )
    前端还是报错:parsererror

    改为:
    if($type=="city_json"){
    $json_data = json_encode(json_decode('{"code": "0", "msg)": "success", "data": [
    { "id": 1, "name": "北京" },
    { "id": 2, "name": "上海" },
    { "id": 3, "name": "广州" },
    { "id": 4, "name": "深圳" },
    { "id": 5,"name": "天津" },
    { "id": 6, "name": "南京" },
    { "id": 7, "name": "杭州" },
    { "id": 8, "name": "成都" },
    { "id": 9, "name": "石家庄" },
    { "id": 10, "name": "济南" },
    { "id": 11, "name": "沈阳" }
    ], "count": 11}', true));

    echo $json_data;
    }

    $json_data打印出来是:
    '{"code":"0","msg)":"success","data":[{"id":1,"name":"\\u5317\\u4eac"},{"id":2,"name":"\\u4e0a\\u6d77"},{"id":3,"name":"\\u5e7f\\u5dde"},{"id":4,"name":"\\u6df1\\u5733"},{"id":5,"name":"\\u5929\\u6d25"},{"id":6,"name":"\\u5357\\u4eac"},{"id":7,"name":"\\u676d\\u5dde"},{"id":8,"name":"\\u6210\\u90fd"},{"id":9,"name":"\\u77f3\\u5bb6\\u5e84"},{"id":10,"name":"\\u6d4e\\u5357"},{"id":11,"name":"\\u6c88\\u9633"}],"count":11}'

    前端还是报错:parsererror
    0 回复
  • @Gamebook msg后面多了个)
    0 回复