在easyui中如何设置自带的弹窗,有输入框

这个就是带input的确认弹框($.messager.prompt)

javascript 复制代码
// 使用prompt并添加placeholder提示
$.messager.prompt('确认', '确定要将事故记录标记为' + statusText + '吗?', function(r) {
    if (r) {
        // r 包含用户输入的内容
        var remark = r.trim();
        
        // 验证输入不为空(可选)
        if (!remark) {
            $.messager.alert('提示', '请输入处理备注', 'info');
            return;
        }
        
        // 将备注添加到表单数据中
        formData.append('remark', remark);
        
        // 发送AJAX请求
        $.ajax({
            url: 'TMSPROC0050/updateStatus',
            method: 'POST',
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function(result) {
                console.log(result);
                $.messager.show({
                    title: '成功',
                    msg: result.message
                });
                searchAccidents();
            },
            error: function(error) {
                console.error('请求发生错误:', error);
                $.messager.alert('错误', '操作失败,请重试', 'error');
            }
        });
    }
});

// 为prompt对话框的输入框添加placeholder
setTimeout(function() {
    $('.messager-input').attr('placeholder', '请输入处理备注:');
}, 10);

如果想要自定义位置

javascript 复制代码
// 为prompt对话框的输入框添加placeholder
                    setTimeout(function() {
                        // 获取原有单行输入框
                        var input = $('.messager-input');
                        // 保存输入框的值(如果有)
                        var value = input.val();

                        // 替换为多行文本框 textarea
                        input.replaceWith('<textarea class="messager-input"  style="width:100%;height:100px;"></textarea>');

                        // 设置占位符和之前的值
                        $('.messager-input').attr('placeholder', '请输入处理备注:')
                            .val(value);
                        // 调整对话框宽度和高度
                        var dialog = $('.messager-body').parent();
                        dialog.css({
                            width: '600px',  // 调整对话框宽度
                            height: '300px',  // 调整对话框高度
                            top: '200px',  // 垂直位置
                            left: '500px', // 水平位置
                        });
                        var body = $('.messager-body');
                        body.css({
                            width: '96.5%',
                            height: '200px'
                        });
                        var title = $('.panel-header');
                        title.css({
                            width: '100%',
                        });
                        var button = $('.dialog-button');
                        button.css({
                            width: '98.2%',
                        });

                        // 调整输入框大小以适应对话框
                        $('.messager-input').css({
                            width: '97%',    // 输入框宽度
                            height: '120px', // 输入框高度,使其可以输入更多内容
                            'font-size': '14px', // 调整字体大小
                            'padding': '5px'   // 增加内边距
                        });


                    }, 5);

这个就是带不带input的确认弹框($.messager.confirm)

javascript 复制代码
// 修改确认对话框,添加输入框
$.messager.confirm('确认', '确定要将事故记录标记为' + statusText + '吗?\n请输入处理备注:', function(r) {
    if (r) {
        // r 包含用户输入的内容
        var remark = r.trim();
        
        // 验证输入不为空(可选)
        if (!remark) {
            $.messager.alert('提示', '请输入处理备注', 'info');
            return;
        }
        
        // 将备注添加到表单数据中
        formData.append('remark', remark);
        
        // 发送AJAX请求
        $.ajax({
            url: 'TMSPROC0050/updateStatus',
            method: 'POST',
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function(result) {
                console.log(result);
                $.messager.show({
                    title: '成功',
                    msg: result.message
                });
                searchAccidents();
            },
            error: function(error) {
                console.error('请求发生错误:', error);
                $.messager.alert('错误', '操作失败,请重试', 'error');
            }
        });
    }
});
相关推荐
+VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
半个落月2 小时前
LangChain.js Agent Memory 实战(下):用 Milvus 构建可检索的长期记忆
javascript·langchain
半个落月2 小时前
LangChain.js Agent Memory 实战(上):从内存对话、文件持久化到截断与摘要
javascript·langchain
Nicander3 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan5 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师5 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒6 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
卡布鲁6 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼6 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
步行cgn6 小时前
Spring p 命名空间注入详解
java·前端·spring