1. 程式人生 > >隨筆:ajax傳遞數組,layui父子頁面傳值,下來菜單賦值,父頁面數據獲取,表格數據替換為字符串

隨筆:ajax傳遞數組,layui父子頁面傳值,下來菜單賦值,父頁面數據獲取,表格數據替換為字符串

形式 子頁面 html title NPU 傳遞 form 開啟 設置

一.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父子頁面傳值,下來菜單賦值,父頁面數據獲取,表格數據替換為字符串