隨筆:ajax傳遞數組,layui父子頁面傳值,下來菜單賦值,父頁面數據獲取,表格數據替換為字符串
阿新 • • 發佈:2018-10-25
形式 子頁面 html title NPU 傳遞 form 開啟 設置 一.Ajax向後臺傳遞數組問題:(聲明前臺我使用的layui框架)
例:我們要多前臺一個數據表格進行批量刪除操作,我們通過復選框選中數據id,將id存入一個數組中,然後利用ajax傳遞給後臺,完成批量刪除,再過程中我們需要加上traditional : true
代碼如下:
例:我們要多前臺一個數據表格進行批量刪除操作,我們通過復選框選中數據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父子頁面傳值,下來菜單賦值,父頁面數據獲取,表格數據替換為字符串