Thinkcmf 后台弹框页面代码

最新推荐文章于 2023-03-23 19:28:16 发布

节节竹

最新推荐文章于 2023-03-23 19:28:16 发布

阅读量2.2k

点赞数 2

分类专栏： Thinkphp

本文链接：https://blog.csdn.net/qq_32289849/article/details/105789175

版权

Thinkphp 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

thinkcmf是基于layer做的弹出层
https://www.layui.com/doc/modules/layer.html 可以看layer的文档学习

选择信息，列表展示

Thinkcmf 弹框选择信息

html页面

<input type="text" readonly style="cursor: pointer" class="form-control"  onclick="doSelect();" placeholder="请选择">

/*选择商品*/
function doSelect(){
    var selectedCategoriesId = $('#js-categories-id-input').val();
    openIframeLayer("{:url('mall/AdminItem/select')}?ids=" + selectedCategoriesId, '请选择分类', {
        area: ['700px', '400px'],
        btn: ['确定', '取消'],
        yes: function (index, layero) {
            //do something

            var iframeWin          = window[layero.find('iframe')[0]['name']];
            var selectedCategories = iframeWin.confirm();
            console.log('又返回么',selectedCategories);
            if (selectedCategories.selectedCategoriesId.length == 0) {
                layer.msg('请选择商品');
                return;
            }
            $('.use_way_id2').find('input').eq(1).val(selectedCategories.selectedCategoriesId);
            $('.use_way_id2').find('input').eq(0).val(selectedCategories.selectedCategoriesName);
            //console.log(layer.getFrameIndex(index));
            layer.close(index); //如果设定了yes回调，需进行手工关闭
        }
    });
}

php代码

	/**
     * 弹框选择商品
     */
    public function select(){
        $keyword = $this->request->param('keyword');
        $where = [];
        if(isset($keyword) && $keyword != ''){
            $where[] = ['title','like','%'.$keyword.'%'];
        }
        $model = new MallItemModel();
        $data = $model->where($where)->order('create_time desc')->paginate();
        $this->assign([
            'data' => $data,
            'page' => $data->render()
        ]);
        return $this->fetch();
    }

对应的select页面

<include file="public@header"/>
<style>

</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <!--页面搜索-->
    <form class="well form-inline margin-top-20" method="post" action="{:url('select')}">
        商品名称:
        <input type="text" class="form-control" name="keyword" style="width: 200px;display: inline-block"
               value="{$keyword|default=''}" placeholder="请输入关键字">
        <button class="btn btn-primary">搜索</button>
    </form>
    <!--页面搜索结束-->
    <form method="post" class="js-ajax-form" action="" novalidate="novalidate">
        <table class="table table-hover table-bordered table-list">
            <thead>
                <tr>
                    <th width="50">
                        选择
                    </th>
                    <th width="50">ID</th>
                    <th>商品名称</th>
                </tr>
            </thead>
            <tbody>
            <foreach name="data" item="vo">
                <tr class="data-item-tr">
                    <td>
                        <input type="radio" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="id" value="{$vo.id}" data-name="{$vo.title}">
                    </td>
                    <td>{$vo.id}</td>
                    <td>{$vo.title}</td>
                </tr>
            </foreach>
            </tbody>
        </table>
        <div class="pagination">{$page}</div>
    </form>
</div>
<!--js操作-->
<script src="__STATIC__/js/admin.js"></script>
<!--js操作结束-->
<script>
	/*单选*/
    $('.data-item-tr').click(function (e) {
        console.log(e);
    })
    function confirm() {
        var selectedCategoriesId = $('input:radio[name=id]:checked').val();
        var selectedCategoriesName = $('input:radio[name=id]:checked').attr('data-name');
        return {
            selectedCategoriesId: selectedCategoriesId,
            selectedCategoriesName: selectedCategoriesName
        };
    }
    /*复选*/
    $('.data-item-tr').click(function (e) {

        console.log(e);
        var $this = $(this);
        if ($(e.target).is('input')) {
            return;
        }

        var $input = $this.find('input');
        if ($input.is(':checked')) {
            $input.prop('checked', false);
        } else {
            $input.prop('checked', true);
        }
    });

    function confirm() {
        var selectedCategoriesId   = [];
        var selectedCategoriesName = [];
        var selectedCategories     = [];
        $('.js-check:checked').each(function () {
            var $this = $(this);
            selectedCategoriesId.push($this.val());
            selectedCategoriesName.push($this.data('name'));

            selectedCategories.push({
                id: $this.val(),
                name: $this.data('name')
            });
        });

        return {
            selectedCategories: selectedCategories,
            selectedCategoriesId: selectedCategoriesId,
            selectedCategoriesName: selectedCategoriesName
        };
    }
</script>
</body>
</html>

弹框设置数值

Thinkcmf弹框设置

html代码

<a class="btn btn-xs btn-info js-ajax-btn" onclick="setScore({$vo.id})">设置积分</a>

//设置积分
    function setScore(id){
        var url = "{:url('AdminCat/setScore')}";
        Wind.use("layer", function () {
            layer.prompt({title: '设置积分(可为负值)', formType: 2}, function(text, index){
                $.post(url,{id:id,score:text},function(e){
                            layer.msg(e.msg,function(){
                                window.location.reload();
                            });
                        }
                )
                layer.close(index);
            });
        });
    }