Ajax实例，选择table中要处理的内容，点击button，确认是否删除并返回值，有弹窗

最新推荐文章于 2021-10-26 08:36:42 发布

Sparks550

最新推荐文章于 2021-10-26 08:36:42 发布

阅读量412

点赞数

分类专栏：前端文章标签： ajax html javascript

本文链接：https://blog.youkuaiyun.com/Sparks550/article/details/120716594

版权

前端专栏收录该内容

16 篇文章

订阅专栏

这是一个关于前端样式和交互实现的示例，涉及layui框架的使用。用户可以输入iccid、卡号，选择运营商、处理状态和处理方式。‘处理完成’按钮触发确认对话框，通过AJAX将选择的数据发送到后台`TmpFlowChangePackage/ProcessingComplete`接口，完成处理并显示操作结果。如果选择的数据为空，会提示用户选择套餐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端样式：

在这里插入图片描述

前端代码：

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">发货前，改套餐需求</div>
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">iccid</label>
                            <div class="layui-input-block">
                                <input name="iccid" placeholder="请输入" autocomplete="off" class="layui-input"
                                       type="text">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">卡号</label>
                            <div class="layui-input-block">
                                <input name="msisdn" placeholder="请输入" autocomplete="off" class="layui-input"
                                       type="text">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">运营商</label>
                            <div class="layui-input-block">
                                <select name="operatorId" lay-verify="">
                                    <option>全部</option>
                                    {volist name="OperatorName" id="OperatorName"}
                                    <option value="{$OperatorName.id}">{$OperatorName.name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">处理状态</label>
                            <div class="layui-input-block">
                                <select name="taskStatus" lay-verify="">
                                    <option>全部</option>
                                    <option selected="selected" value="0">未处理</option>
                                    <option value="1">已处理</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">处理方式</label>
                            <div class="layui-input-block">
                                <select name="executeWay" lay-verify="">
                                    <option>全部</option>
                                    <option value="1">系统</option>
                                    <option value="2">人工</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit=""
                                    lay-filter="LAY-user-front-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>

                        <div style="display: none">
                            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit=""
                                    lay-filter="export_all" id="export_all">
                                导出
                            </button>
                        </div>

                    </div>
                </div>
                <div class="layui-card-body">
                    <script type="text/html" id="toolbar">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="isSuccess">处理完成</button>
                            <input type="hidden" name="ycid" value="true">
                        </div>
                    </script>
                    <table class="layui-hide" id="test-table-page" lay-filter="test-table-page"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__STATIC__/js/get_excel.js"></script>
<script>
    layui.config({
        base: '__STATIC__/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form','laydate','excel'], function () {
        var admin = layui.admin
            , form = layui.form
            , layer = layui.layer
            , table = layui.table
            , excel = layui.excel;

        //监听搜索
        form.on('submit(LAY-user-front-search)', function (data) {
            var field = data.field;

            //执行重载
            table.reload('test-table-page', {
                where: field,page: {curr: 1}
            });
        });

        let data_cols = [[
            {type: 'checkbox'},
            {field: "id", title: "业务流水号", width:200},
            {field: "account", title: "用户名", width:200},
            {field: "iccid", title: "iccid", width:200},
            {field: "msisdn", title: "卡号", width:200},
            {field: "operatorName", title: "运营商", width:200},
            {field: "operatorCity", title: "所属地", width:200},
            {field: "packageType", title: "卡类型", width:200},
            {field: "packageCodeSys", title: "套餐编码", width:200},
            {field: "packageName", title: "变更套餐", width:400},
            {field: "taskStatus", title: "处理状态", width:200},
            {field: "executeWay", title: "处理方式", width:200},
            {field: "addTime", title: "创建时间", width:200},
        ]];

        //导出表格
        let url='{:Url("showList")}';
        getExcel(form,excel,url,data_cols);

        table.render({
            elem: '#test-table-page'
            , url: '{:Url("showList")}'
            , toolbar: "#toolbar"
            , limit: 10
            , limits: [10, 20, 40, 80, 160, 500, 1000, 5000, 10000]
            , defaultToolbar: ['filter', 'print',{
                title: '导出全部'
                ,layEvent: 'EXPORT_ALL'
                ,icon: 'layui-icon-export'
            }]
            , cols: data_cols,
            page: true
        });

        //头工具栏事件-处理完成
        table.on('toolbar(test-table-page)', function (obj) {
            if (obj.event == 'EXPORT_ALL') {
                document.getElementById("export_all").click();
            }
            //layui数据表格监听按钮
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event == 'isSuccess') {
                var data = checkStatus.data;
                layer.confirm('确定这'+data.length+'张卡的套餐修改完成了吗，确定则无法撤销？', {
                    btn: ['确定','我再检查一下']
                }, function(){
                    $.ajax({
                        'url':'{:Url("TmpFlowChangePackage/ProcessingComplete")}',
                        'data':JSON.stringify(data),
                        'success':function(data){
                            if (data.code === 1) {
                                parent.layer.alert(data.msg,{
                                    title: '成功'
                                });
                                location.reload();
                            } else {
                                parent.layer.alert(data.msg,{
                                    title: '失败'
                                });
                                location.reload();
                            }
                        },
                        'dataType':'json',//返回的格式
                        'type':'post',//发送的格式
                    });
                }, function(){
                    layer.msg('谢谢，小心驶得万年船',{
                        time: 20000, //20s后自动关闭
                            btn: ['知道了']
                    });
                });
            }
        });

    });
</script>

代码解析：

关注【处理完成】button。

  <div class="layui-card-body">
        <script type="text/html" id="toolbar">
               <div class="layui-btn-container">
               //'isSuccess',定义触发点击事件
                   <button class="layui-btn layui-btn-sm" lay-event="isSuccess">处理完成</button>
               </div>
           </script>
          //这个table用来获取值，也就是这个button需要控制的内容
           <table class="layui-hide" id="test-table-page" lay-filter="test-table-page"></table>
   </div>

JS代码

  //头工具栏事件-处理完成
        table.on('toolbar(test-table-page)', function (obj) {//锁定button控制的页面范围
            if (obj.event == 'EXPORT_ALL') {
                document.getElementById("export_all").click();
            }
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event == 'isSuccess') {
                var data = checkStatus.data;//获取选择table里的内容数据
                layer.confirm('确定这'+data.length+'张卡的套餐修改完成了吗，确定则无法撤销？', {
                    btn: ['确定','我再检查一下']
                }, function(){
                    $.ajax({
                        'url':'{:Url("TmpFlowChangePackage/ProcessingComplete")}',//控制器地址
                        'data':JSON.stringify(data),
                        'success':function(data){//返回内容
                            if (data.code === 1) {
                                parent.layer.alert(data.msg,{
                                    title: '成功'
                                });
                                location.reload();//页面重载
                            } else {
                                parent.layer.alert(data.msg,{
                                    title: '失败'
                                });
                                location.reload();//页面重载
                            }
                        },
                        'dataType':'json',//返回的格式
                        'type':'post',//发送的格式
                    });
                }, function(){
                    layer.msg('谢谢，小心驶得万年船',{//点击【'确定','我再检查一下'】button的弹出窗口
                        time: 20000, //20s后自动关闭
                            btn: ['知道了']
                    });
                });
            }
        });

js动画

后端处理代码

    /**
     * 发货前改套餐--处理完成button
     */
    public function ProcessingComplete()
    {
        $data = $this->request->getInput();//获取ajax传递的值
        $json_data = json_decode($data, true);

		//判断没有选择table的内容判断
        if (empty($json_data)) {
            $this->error('请选择套餐！');
        }
        $id = array();
        //获得业务流水号。因为$json_data获取的数据是一整条table数据，因此需要遍历拿出来他们的id，拼成一个新数组
        foreach ($json_data as $value) {
            array_push($id, $value['id']);
        }
        //重新拼成一个数组，这个是和java接口方，沟通好的数据格式
        $requestData = array(
            'taskIdList' => $id,
            'taskDealStatus' => 'true',
            "businessType" => 'DGD_CHG_PKG'
        );

        //处理完成button
        $OperatorName = Paas::request('/sim/home/disposeOfData', $requestData);

		//根据接口的返回值，判断是否处理成功
        if ($OperatorName['status'] == 0) {
            $this->success('处理完成');
        } else {
            $this->error('处理失败');
        }
    }