随笔:ajax传递数组,layui父子页面传值,下来菜单赋值,父页面数据获取,表格数据替换为字符串

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了随笔:ajax传递数组,layui父子页面传值,下来菜单赋值,父页面数据获取,表格数据替换为字符串相关的知识,希望对你有一定的参考价值。

一.Ajax向后台传递数组问题:(声明前台我使用的layui框架)
例:我们要多前台一个数据表格进行批量删除操作,我们通过复选框选中数据id,将id存入一个数组中,然后利用ajax传递给后台,完成批量删除,再过程中我们需要加上traditional : true
代码如下:

function batchDel() {
    var datas;
    var ids = new Array();// 声明数组
    layui.use(‘table‘, function() {
        var table = layui.table;
        var checkStatus = table.checkStatus(‘encryptionTable‘);// 声明复选框
        datas = checkStatus.data;
        for ( var i in datas) {
            ids[i] = datas[i].id;// 得到复选框的值
        }
        if (ids.length != 0) {
            $.ajax({
                url : "/admin/encryption/delete.json",
                type : "post",
                traditional : true,// 这里设置为true,不然后台接收到的参数会带上[],导致数据无法正常接收
                data : {
                    "ids" : ids
                },
                success : function(data) {
                    alert("删除成功");
                    table.reload("encryptionTable");
                    layer.close(index);
                }
            });
        } else {
            layer.open({
                title : ‘操作提示‘,
                content : ‘请至少选择一行数据要删除数据..‘
            });
        }
    });

}

二.Layui父页面给子页面传值
例如:我们需要获取父页面table中的数据id然后子页面需要根据这个id取查询此行数据的详细信息进行展示,完成查看的逻辑,此时我们就需要用到layui父页面值给子页面,子页面进行接收,我们需要在弹出子页面时url中将已经拿到的id传过去
代码:
弹出层:

                    var id=data.id;
                    //创建一个html 对象
                    var html = "see.html";
                    var url = "/admin/encryption/seeEncryption/"+html+".do?id="+id;
                    parent.layer.open({
                        title: [‘文件系统资源明细‘, ‘font-size:16px;background-color:#5FB878‘],
                        type: 2,
                        resize: false, // 禁止拉伸
                        move: true,
                        maxmin: false, // 开启最大化最小化按钮
                        skin: ‘layui-layer-rim‘, //样式类名
                        area: [‘740px‘, ‘300px‘],
                        content:url,
                        btn : [ "确定", "取消" ],
                        skin : ‘layui-layer-molv‘,
                        yes : function(index,layero) {

                            parent.layer.close(index)
                        },
                        end : function() { //iframe销毁后触发的函数

                        }
                    });

子页面中获取id,利用ajax传递给后台在获取后台返回的数据,然后根据id赋值给input表单中

layui.use(‘table‘, function() {
        var id = ${parameter.id}; //从父页面取到传过来的id,用ajax请求后台进行操作
        $.ajax({
            url : "/admin/encryption/see.json",
            type : "post",
            dataType : "json",
            data : {
                "id" :id 
            },
            success : function(data) {
                if(data!=null){
                    $("#edName").val(data.data.edName);
                    $("#edIdentification").val(data.data.edIdentification);
                    $("#edPlain").val(data.data.edPlain);
                    $("#edAlgorithm").val(data.data.edAlgorithm);
                    $("#edSecretKey").val(data.data.edSecretKey);
                }else{
                    alert("查询数据为空...");
                }
            }
        });

    });

三.父页面如何获取子页面的数据
例:例如我们的子页面中input文本框,select下拉选项框,还单选或多选的按钮,我们在父页面如何拿到这些输入的或是选中的参数
代码:

var edName = parent.layer.getChildFrame(‘#edName‘,index).val();
var edPlain = parent.layer.getChildFrame(‘#edPlain‘,index).val();
var edAlgorithm = parent.layer.getChildFrame(‘#edAlgorithm option:selected‘,index).val();//获取下拉菜单选中的值
var edSecretKey = parent.layer.getChildFrame(‘#edSecretKey‘,index).val();
var encryptionOutput = parent.layer.getChildFrame(‘#encryptionOutput input:checked‘,index).val();
var encryptionInput = parent.layer.getChildFrame(‘#encryptionInput input:checked‘,index).val();//获取选中按钮的值

四.Layui中表格数据的替换
例:我们在数据库中获取的状态status信息为0和1的形式,我们怎么能让他在前台显示是以“已发布”“已停用”形式的字符展示,前提我们
代码:

                {
                    field : ‘edStatus‘,
                    title : ‘状态‘,
                    toolbar :‘#statusDemo‘,
                    width : 110,
                    fixed : ‘left‘
                }
<script type="text/html" id="statusDemo">
        {{#if (d.edStatus == 0) { }}
         <span style="color:#FF5722;">已发布</span>
        {{# }else if(d.edStatus == 1){ }}
        <span>已停用</span>
        {{# } }}
</script>

五.如何拿到后台数据将其动态赋值给前台select下来菜单中
例:我们从后台数据中获取到了各种服务,需要将其赋值给下拉菜单
代码:

initSelect:function(){
            $.ajax({
                url : ‘/admin/configure/servnames.json‘,
                dataType : ‘json‘,
                type : ‘POST‘,
                success : function(data) {
                    $("#serviceName").append(‘<option value="">请选择服务</option>‘);
                    $.each(data.data, function(index, item) {
                        $("#serviceName").append(‘<option  value="‘+item.serviceName+‘">‘
                            + item.serviceName + ‘</option>‘);
                    });
                    form.render(‘select‘);//下拉菜单渲染 把内容加载进去 
                }
            });
        }

六.Layui中子页面的子页面怎么弹出
代码:

    parent.layer.open({
                                    title : ‘算法方案添加提示‘,
                                    content : ‘请将方案数据新增成功,是否继续添加?‘
    });

以上是关于随笔:ajax传递数组,layui父子页面传值,下来菜单赋值,父页面数据获取,表格数据替换为字符串的主要内容,如果未能解决你的问题,请参考以下文章

00022-layui 显示表单,iframe父子页面传值

00022-layui 显示表单,iframe父子页面传值

00022-layui 显示表单,iframe父子页面传值

layUI之DataTable组件V1.0(父子表管理传值/数据表格与select&laydate结合等)

layui使用layer弹出层父子页面事件相互调用方法

layui 弹窗的iframe 父子界面相互传值