Layui彈框中資料表格中可雙擊選擇一條資料的實現
阿新 • • 發佈：2020-05-08
Layui提供的功能如下（預覽）
可自行檢視：layui官網此模組的連結
著急看雙擊選中 直接看標黃色部分
假設這是個彈窗裡的表格和資料點選圓圈，圓圈變綠則為選中，選中後點擊上方檢視資料按鈕（實際中是確認按鈕，實際中點選確認按鈕後會關閉彈窗並把json串帶到原本頁面中）
Layui提供的程式碼如下（檢視程式碼）
<body>
<!-- 表格空架子 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 確認（檢視資料按鈕） -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">獲取選中行資料</button>
</div>
</script>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 -->
<script>
layui.use('table',function(){
var table = layui.table;
table.render({
elem: '#test',url:'/demo/table/user/',toolbar: '#toolbarDemo',cols: [[
{type:'radio'},{field:'id',width:80,title: 'ID',sort: true},{field:'username',title: '使用者名稱'},{field:'sex',title: '性別',{field:'city',title: '城市'},{field:'sign',title: '簽名',minWidth: 100},{field:'experience',title: '積分',{field:'score',title: '評分',{field:'classify',title: '職業'},{field:'wealth',width:135,title: '財富',sort: true}
]],page: true
});
//頭工具欄事件
table.on('toolbar(test)',function(obj){
var checkStatus = table.checkStatus(obj.config.id); //獲取選中行狀態
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data; //獲取選中行資料
layer.alert(JSON.stringify(data));
break;
};
});
});
</script>
</body>實際需求例項
- 點選 【選擇】 按鈕，出現彈框
- 彈框裡有資料表格
- 點選圓圈為選中當前條資料
- 點選彈框中【確認】把選中條資料帶到主頁面
實際程式碼例項
主頁面程式碼（底，都為自動帶出的輸入框）
靜態部分
<div> <div> <span>客戶姓名：</span> <form:input path="customerName" readonly="true"/> <span onclick="onclick()" title="選擇"> <input id="selectCustomer" class="btn" type="button" value="選擇" /></span> </div> <div> <span>客戶性別：</span> <form:input path="customerSex" readonly="true"/> </div> <div> <span>客戶年齡：</span> <form:input path="customerYears" readonly="true"/> </div> </div>
【選擇】按鈕的彈窗事件
function onclick(){
var width = window.screen.availWidth*0.8;
var height = window.screen.availHeight*0.65;
var iTop=(window.screen.availHeight-30-height)/2;
var iLeft=(window.screen.availWidth-30-width)/2;
var url="${xxx}/vvvv/rrrrr/getCustomerList"; //後端程式碼就不介紹了
window.open(url,'客戶資訊','height='+height+',width='+width+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no')
} 彈窗頁面程式碼
彈窗頁面中–靜態部分
<table id="contentTable" class="layui-table">
<thead>
<tr>
<th></th>
<th>客戶姓名</th>
<th>客戶性別</th>
<th>客戶年齡</th>
<th>...</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="customerMain">
<tr>
<td align="center"><input name="customerId" type="radio" value="${customerMain.id}"></td>
<td>${customerMain.customerName}</td>
<td>${customerMain.customerSex}</td>
<td>${customerMain.customerYears}</td>
<td class="hide" >${customerMain.....}</td>
</tr>
</c:forEach>
</tbody>
</table>
彈框頁面上-- == 單擊單選圓圈的事件+雙擊行選中 ==
$(document).ready(function() {
//雙擊行 即可執行函式（行資料被選中：radio為checked）
$("table tbody tr").dblclick(function(i) {
$(this).find("input[type='radio']").prop("checked",true)
});
//圓圈改變狀態即可執行函式
$("#contentTable tbody tr input").change(function () {
var ischecked = $(this).prop("checked");
var index=$(this).parent().parent().index()
var tr=$("#contentTable tbody tr")
if(ischecked){
for(var i=0;i<tr.length;i++){
if(i!=index){
$("#contentTable tbody tr:eq("+i+") input").prop("checked",!ischecked);
}
}
}
})
});
彈框頁面上–選擇好資料後帶回主頁面的函式
<script>
//給彈框中【確認】按鈕繫結事件
function toSubmit(){
//此方法在下方
var data=getRowData();
if(data==null){
layer.alert("請先選擇一位客戶")
return ;
}
window.opener.getCustomerData(data);//呼叫主頁面上的方法，給主頁面賦值，最下方有具體方法過程
window.close();//關閉彈窗
}
//給彈框中【返回】按鈕繫結事件
function closed(){
window.close();
}
//獲取行物件
function getRowData(){
var row = null;
//鎖定行（迴圈遍歷找到被選中的行）
$("table tbody tr").each(function(){
var radio = $(this).find("td").eq(0).find("input[type='radio']:checked").val();
if(radio){
row = $(this) ;
}
});
//如果此行有資料則拼接
if(row){
var customerId = row.find("td").eq(0).find("input[type='radio']:checked").val();
var customerName = row.find("td").eq(1).text();
var customerSex = row.find("td").eq(2).text();
var customerYears = row.find("td").eq(3).text();
//拼接模板 $.trim() jQuery.trim()函式用於去除字串兩端的空白字元。該函式可以去除字串開始和末尾兩端的空白字元(直到遇到第一個非空白字串為止)。它會清除包括換行符、空格、製表符等常見的空白字元。
var data = "[{\"customerId\":\""+$.trim(customerId)
+"\",\"customerName\":\""+$.trim(customerName)
+"\",\"customerSex\":\""+$.trim(customerSex)
+"\",\"customerYears\":\""+$.trim(customerYears)
+"\"}]";
}
return data ;
}
</script>
呼叫主頁面上的給主頁面賦值的方法
<script>
function getCustomerData(data){
var json = JSON.parse(data);
$("#customerId").val(json[0].customerId);
$("#customerName").val(json[0].customerName);
$("#customerSex").val(json[0].customerSex);
$("#customerYears").val(json[0].customerYears);
....
}
</script>
到此這篇關於Layui彈框中資料表格中可雙擊選擇一條資料的實現的文章就介紹到這了,更多相關Layui彈框雙擊資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！