ThinkAdmin使用弹窗多选

在选择页面

<label class="layui-form-item block relative label-required-prev" id="SelectInviteCode" style="display: none !important;">
    <span class="help-label"><b>邀请码</b></span>
    <div class="select-body">
        <div class="select-body-input">
            <input class="layui-input" placeholder="请选择邀请码" name="invite_code" readonly value="">
        </div>
        <div class="layui-btn select-btn" select-modal-invitecode data-mulit="10" data-input-code="invite_code">选择</div>
    </div>
</label>

在script.js

/*! 注册 select-modal-invitecode 选择邀请码 事件行为 */
onEvent('click', '[select-modal-invitecode]', function () {
    var emap = this.dataset
        ,inputCode = $('input[name='+emap.inputCode+']')
        ,mulit = typeof emap.mulit == 'string' && !isNaN(parseInt(emap.mulit)) ? parseInt(emap.mulit) : 0
        , selected = inputCode ? inputCode.val() : '';
    let url ='/shop/invite_code/select.html?mulit='+mulit;
    if (selected) {
        url += '&selected_code='+selected;
    }
    top.window.setInviteCodeSelectValue = function (items) {
        console.log(items);
        inputCode.val(items.join(',') || '');
    };
    top.$.form.iframe(url, emap.title || '邀请码选择器', ['800px', '580px']);

    // 如果显示和提交的值不一样就多传一个 inputId 用于存放提交的参数
    // var emap = this.dataset
    //     ,inputId = typeof emap.inputId === 'string' ? $('input[name='+emap.inputId+']') : null
    //     ,inputCode = $('input[name='+emap.inputCode+']');
    // top.window.setInviteCodeSelectValue = function (item) {
    //     inputId && inputId.val(item.id || 0);
    //     inputCode.val(item.code || '');
    // };
    // top.$.form.iframe(url, emap.title || '邀请码选择器');
});

在选择弹窗页面控制器

public function select()
{
    $this->title = '邀请码选择器';

    $map = $this->_vali([
        'selected_code.default' => '', // 已选中的邀请码
        'mulit.default' => '0', // 多选的个数 0不限制
    ]);
    $selected_code = empty($map['selected_code']) ? [] : explode(',', $map['selected_code']);

    $data = ShopInviteCode::mk()->order('id desc')->select()->toArray();
    $code = [];
    foreach ($data as $value) {
        $item = [
            'name'      => $value['code'],
            'value'     => $value['code'],
            'selected'  => false,
        ];
        if (in_array($value['code'], $selected_code)) {
            $item['selected'] = true;
        }
        $code[] = $item;
    }
    $this->data = $code;
    $this->mulit = $map['mulit'];
    $this->fetch();
}

在选择弹窗页面html

{extend name="full"}

{block name="content"}
<div class="iframe-pagination" style="padding: 0px;">
    <div id="inviteCodeDiv"></div>
    <div class="layui-form-item text-center padding-right-20 margin-top-25">
        <button class="layui-btn" data-button-ok type='button'>确定选择</button>
    </div>
</div>
{/block}

{block name='script'}
<label class="layui-hide">
    <textarea id="DefaultData">{$data|raw|json_encode}</textarea>
</label>
<script>
    var data = JSON.parse($('#DefaultData').val() || '[]');
    var mulit = "{$mulit|default=0}";
    layui.use('xmSelect', function(xmSelect){
        var inviteCodeSelect = xmSelect.render({
            el: '#inviteCodeDiv',
            height: '100%',
            size: 'small',
            paging: true,
            filterable: true,
            max: mulit,
            toolbar: {
                show: true,
                showIcon: true,
            },
            model: {
                type: 'relative', //默认 absolute
            },
            language: 'zn',
            data: data
        });
        $('[data-button-ok]').on('click', function () {
            let values = inviteCodeSelect.getValue();
            console.log(values);
            let data = [];
            layui.each(values, function(index,item){
                data.push(item.value);
            });
            top.setInviteCodeSelectValue(data);
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });
    
</script>
{/block}