Thinkcmf 后台弹框页面代码

2023-10-27

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);
            });
        });
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Thinkcmf 后台弹框页面代码 的相关文章

  • ThinkPHP 大D方法思想下的JDBC操作数据库D类

    这里我封装出来的D 类 xff0c 是根据 ThinkPHP 中的 D 方法中做出来的 xff0c 其中有些出入的地方 xff0c 我进行了一些个性化的修正 xff0c 如 xff1a ThinkPHP 中操作数据库时 xff0c 需要在配
  • ThinkPHP中的create方法与自动令牌验证

    转载自 xff1a Thinkphp中Create方法深入探究 ThinkPHP中的create方法与自动令牌验证实例教程 Thinkphp中Create方法深入探究 由于工作原因在thinkPHP的create 方法上遇到了问题 xff0
  • ThinkPHP中数据库操作返回值总结

    转载自 xff1a ThinkPHP中数据库操作返回值总结 关键字 xff1a Thinkphp 返回值 数据库操作 select返回值 add返回值 setDec返回值 Thinkphp中的Think Model类提供了数据库的基本CUR
  • layer 弹框 cropper 裁剪上传图片,thinkphp 3 使用 CropAvatar.class.php

    最近要做一个上传裁剪图片功能 xff0c 但是网上收出来的东西 xff0c 知识点都是对的 但是就是没说清楚 xff0c 也无法连续起来用 经过自己整理出来的一套代码 xff0c 亲测可用 xff01 不用多说 xff0c 直接上菜 PS
  • ThinkPHP接入EasyWechat

    使用EasyWechat接入用户登录 获取用户信息 官方文档 span class hljs preprocessor lt php span span class hljs keyword namespace span span clas
  • thinkphp根据时间戳查询时间范围内的记录

    这是获取当月月初和月末的时间戳 beginThismonth 61 mktime 0 0 0 date 39 m 39 1 date 39 Y 39 endThismonth 61 mktime 23 59 59 date 39 m 39
  • Thinkphp修改密码的实现

    密码修改是开发中很基础的一个功能 密码修改的HTML代码如下 span span lt form method 61 post class 61 form horizo ntal action 61 gt span span span st
  • Thinkcmf 后台弹框页面代码

    thinkcmf是基于layer做的弹出层 https www layui com doc modules layer html 可以看layer的文档学习 选择信息 列表展示 html页面
  • tp6整合腾讯云cos上传

    1 创建一个名为 composer json的文件 内容如下 require qcloud cos sdk v5 gt 2 0 2 执行以下命令 使用 Composer 安装 php composer update 3 复制代码 我这里目录
  • thinkphp volist遍历获取数组下标

    thinkphp volist循环遍历获取数组下标 key 直接使用 key ul volist name list id item li item li ul
  • thinkphp5 访问不了多模块

    thinkphp5 访问不了多模块 只能访问默认模块 可能是nginx文件配置问题 更改nginx conf文件 在server段内添加如下代码段 location try files uri uri args if e request f
  • TP5.1使用JWT进行Token令牌生成与验证

    传统互联网项目在实现保持登录状态 退出登录 接口请求等功能时会使用Session 但是众所周知Session数据在产生后会存储与服务器端 所以当用户量达到一定程度会相应影响到服务器的性能 且Session在前后端分离的项目中或是多服务器项目
  • 【thinkphp5学习笔记之一 】安装

    一 安装composer 1 点此下载composer 然后运行 2 打开cmd 按行分别输入以下代码 要求php安装并且路径配置完毕 php r copy https install phpcomposer com installer c
  • tp5中树状图数据格式的返回

    1 条件 数据库中的数据必须是无限递归数据 2 数据处理 public function treeListApi list this gt db class gt field id name parent id gt where is de
  • TP5 Fatal error: Class 'think\Route' not found

    1 使用验证码了时 使用Composer安装think captcha扩展包 composer require topthink think captcha 报错 Fatal error Class Route not found in D
  • ThinkPHP怪现象:数据表新增字段后开发模式可更新运行模式无法更新

    一 情况说明 一个已经发布的程序中 数据库原有表article 字段原有id content title三个字段 原程序可以正常运行 通过大D方法可以正常的更新数据库 现在要对这个程序进行更新 数据库表article现在增加字段media
  • thinkphp6 模型中name字段冲突

    在模型中 修改user表中的id 1的记录 将其name命名为 test user User find 1 user gt name test user gt save 上面的代码将失败 这是由于 name 与 think Model 中的
  • thinkphp6 入门(6)--中间件是什么 怎么用

    一 什么是中间件 当客户端发送请求至服务器时 HTTP请求会经过多个中间件 最后返回响应给客户端 中间件可以 在请求到达目标控制器或动作之前对请求进行操作 可以在响应离开目标控制器或动作之前对响应进行操作 二 中间件的作用 我们可以在不修改
  • TP5使用predis

    1 安装 composer require predis predis 2 使用 use use Predis Client class Index 使用predis public function index 配置连接的IP 端口 以及相
  • thinkphp5.0 常量

    预定义常量 EXT 类库文件后缀 php THINK VERSION 框架版本号 路径常量 DS 当前系统的目录分隔符 THINK PATH 框架系统目录 D phpStudy WWW my tadmin thinkphp ROOT PAT

随机推荐

  • Spring——Spring事务的实现方式及传播特性

    Spring事务的特性及隔离级别同事务 详情请见事务 什么是事务 事务的特性 事务的隔离级别 醉酒的戈多的博客 CSDN博客 一 Spring事务的实现方式及原理 1 实现方式 在使用Spring框架的时候 有以下两种事务的实现方式 编程式
  • c#通过一个程序控制另外四个程序同时启动

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 前言 一 初衷是什么 二 使用步骤 1 获取父体控件的坐标位置 3 界面点击实现代码 4 实现效果展示 5 源码下载链接 总结 前言 本篇文章主要是利用C 实现钩子
  • 【Verilog语法009】Verilog 6种延时

    一共6种组合 verilog有3种类型的赋值 阻塞赋值 非阻塞赋值和连续赋值 延时 1 写的位置有2种 2 3 6 当延时 1 写在整个表达式最前面时 三种类型的赋值 延时结果一致是 等待 忽略中间变化再计算 当延时 1 写在等于号 后面时
  • ESP8266 AT指令设置及51单片机的控制

    ESP8266 AT指令设置及51单片机的控制 献给正在学习路上的兄弟姐妹们 对于ESP8266模块好多刚接触的朋友们第一感觉就是价格的确很便宜 然而初次接触它时你也许会对它束手无策 因为关于怎样使用它 官方给出的资料很凌乱 我刚接触时就无
  • java字符串s-director_Gradle 2.0 用户指南翻译——第二十三章. Java 插件

    翻译项目请关注Github上的地址 https github com msdx gradledoc本文翻译所在分支 https github com msdx gradledoc tree 2 0 在线浏览地址 http gradledoc
  • linux内核使用make编译出错,编译Linux内核出现错误:make vexpress_defconfig & menuconfig...

    在编译Linux内核时出现错误 wit ubuntu home linux 5 4 14 make vexpress defconfig LEX scripts kconfig lexer lex c bin sh 1 flex not f
  • 服务启动后,一直连接本地nacos

    近期负责整改项目 让nacos只做服务注册和发现 不再做配置管理 踩了一个坑 记录一下 现象 服务的bootstrap文件或application文件中配置了nacos远程地址 但服务启动后一直连接localhost 8848 原因 nac
  • 汇编基础(1)--ARM32

    简介 ARM32位架构的回顾 汇编语言的定义和作用 寄存器 ARM32位架构中的寄存器 特殊寄存器的概述 寄存器的使用方法和规则 指令 指令的分类和指令格式 常用指令和用法 如数据传输指令 算术运算指令 条件分支指令等 指令的组合和控制流程
  • 事务的相关内容

    1 事务 事务 Transaction 是一系列对系统中数据进行访问与更新的操作所组成的一个程序执行逻辑单元 1 事务的语法 2 事务的特性 3 事务的并发问题 4 事务的隔离级别 1 1 事务的语法 1 开启事务 start transa
  • VMware Workstation 与 Device/Credential Guard 不兼容 解决方案

    win10专业版官方解决方案 https kb vmware com s article 2146361 win10家庭版解决方案 win10家庭版本身是不支持Hyper V服务的 但是如果是 win10预览体验家庭版 会在 服务 中发现有
  • Arduino - 看门狗定时器(WDT:Watch Dog Timer)

    看门狗定时器 WDT Watch Dog Timer 实际上是一个计数器 一般给看门狗一个大数 程序开始运行后看门狗开始倒计数 如果程序运行正常 过一段时间CPU应该发出指令让看门狗复位 令其重新开始倒计数 如果看门狗计数减到0 就认为程序
  • 针对于CentOS8安装docker与compose的教程

    针对安装持续报错问题 为了避免掉坑 请跟着教程一步步来 安装完centOS 8系统之后 我们先配置一个国内的yum源 先确保网络的连通 这是我的版本号 1 首先进入 etc yum repos d 目录下 新建一个bak目录 用于保存系统中
  • ArgumentException:Input Axis vertical is not setup.

  • Windows下通过远程桌面连接向远程电脑传输文件

    一 打开远程桌面连接 在搜索框中输入 远程桌面连接 进入下面的界面 二 配置连接 点击显示选项 选择本地资源 查看详细信息 选择要使用的磁盘 我要使用D盘中的文件 所以勾选了D盘 确定后点击连接 三 传输文件 连接到远程服务器 打开文件管理
  • 在STM32上运行ROS节点——rosserial&stm32开发及调试方法

    近期接手了一些ROS机器人项目 这里将开发中遇到的问题和解决方法记录下来 stm32强大的外设资源为机器人底层设备控制带来了极大的便利 本文简述借助rosserial项目在stm32中运行ROS节点的方法 基本原理 ref http wik
  • 什么是数据湖 Data Lake

    什么是数据湖 Data Lake 背景 随着近几年机器学习的兴起对数据的需求更加灵活 如果从数据仓库中提数会有一些问题 比如 数据都是结构化的 做算法的经常要理解数仓模型 甚至要深入到做了什么业务处理 很多处理都不是他们想要的 数据是经过处
  • 转置矩阵(matrix transpose)和逆矩阵(matrix inverse)的相关公式

    转载自 https blog csdn net yinhun2012 article details 84236202 这一篇是为了后面着色效果的数学基础做积累 之前我们使用矩阵的大部分情况都是直接的仿射空间变换 就是仿射空间A变换到仿射空
  • Android:ARouter原理源码解析

    文章目录 前言 一 ARouter使用 二 ARouter初始化 init 函数 整体 LogisticsCenter初始化 拦截器初始化 三 跳转解析 跳转 总结 前言 一 ARouter使用 ARouter的基本使用请参考这篇博客 AR
  • 分治03--二叉搜索树和双向链表

    分治03 二叉搜索树和双向链表 jz26 题目概述 解析 参考答案 注意事项 说明 题目概述 算法说明 输入一棵二叉搜索树 将该二叉搜索树转换成一个排序的双向链表 要求不能创建任何新的结点 只能调整树中结点指针的指向 测试用例 输入 10
  • Thinkcmf 后台弹框页面代码

    thinkcmf是基于layer做的弹出层 https www layui com doc modules layer html 可以看layer的文档学习 选择信息 列表展示 html页面