Layui彈框中數據表格中可雙擊選擇一條數據的實現(xiàn)
更新時間：2020年05月06日 14:37:56 作者：披甲上戰(zhàn)場
這篇文章主要介紹了Layui彈框中數據表格中可雙擊選擇一條數據的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
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="http://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', width:80, title: '用戶名'}
,{field:'sex', width:80, title: '性別', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', title: '簽名', minWidth: 100}
,{field:'experience', width:80, title: '積分', sort: true}
,{field:'score', width:80, title: '評分', sort: true}
,{field:'classify', width:80, title: '職業(yè)'}
,{field:'wealth', width:135, title: '財富', sort: true}
]]
,page: true
});
//頭工具欄事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id); //獲取選中行狀態(tài)
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data; //獲取選中行數據
layer.alert(JSON.stringify(data));
break;
};
});
});
</script>
</body>
實際需求實例
- 點擊 【選擇】 按鈕，出現(xiàn)彈框
- 彈框里有數據表格
- 點擊圓圈為選中當前條數據
- 點擊彈框中【確認】把選中條數據帶到主頁面
實際代碼實例
主頁面代碼（底，都為自動帶出的輸入框）
靜態(tài)部分
<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')
}
彈窗頁面代碼
彈窗頁面中–靜態(tài)部分
<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() {
//雙擊行 即可執(zhí)行函數（行數據被選中：radio為checked）
$("table tbody tr").dblclick(function(i) {
$(this).find("input[type='radio']").prop("checked", true)
});
//圓圈改變狀態(tài)即可執(zhí)行函數
$("#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;
//鎖定行（循環(huán)遍歷找到被選中的行）
$("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彈框中數據表格中可雙擊選擇一條數據的實現(xiàn)的文章就介紹到這了,更多相關Layui彈框雙擊數據內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議，它可以讓客戶端和服務器之間進行實時的雙向通信，這篇文章主要介紹了前端使用websocket發(fā)送消息的示例代碼,需要的朋友可以參考下2023-07-07
所謂工廠函數，就是指這些內建函數都是類對象，當你調用他們時，實際上是創(chuàng)建了一個類實例。這篇文章主要介紹了JavaScript工廠函數,需要的朋友可以參考下2017-03-03
今天小編就為大家分享一篇JS判斷字符串是否為整數的方法--簡單的正則判斷，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了javascript日期驗證之輸入日期大于等于當前日期，需要的朋友可以參考下2015-12-12
JavaScript檢查數據中是否存在相同的元素（兩種方法）
這篇文章主要介紹了JavaScript檢查數據中是否存在相同的元素（兩種方法）,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關于如何利用JS響應式修改vue實現(xiàn)頁面的input值，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
FileReader是前端進行文件處理的一個重要的API,特別是在對圖片的處理上,這篇文章主要給大家介紹了關于Js中FileReader相關操作方法的相關資料,需要的朋友可以參考下2024-07-07
BetterScroll 是一款重點解決移動端各種滾動場景需求的開源插件（ GitHub地址 ），非常不錯，下面腳本之家小編給大家分享BetterScroll 在移動端滾動場景的應用，一起看看吧2017-09-09
javascript 從定義到執(zhí)行，你應該知道的那些事，本文為大家一一列舉，希望對大家的學習有所幫助2016-06-06
這篇文章主要介紹了微信小程序實現(xiàn)watch監(jiān)聽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06