Layui弹框中数据表格中可双击选择一条数据的实现

Layui提供的功能如下（预览）

可自行查看：layui官网此模块的链接
着急看双击选中 直接看标黄色部分

假设这是个弹窗里的表格和数据点击圆圈，圆圈变绿则为选中，选中后点击上方查看数据按钮（实际中是确认按钮，实际中点击确认按钮后会关闭弹窗并把json串带到原本页面中）

Layui提供的代码如下（查看代码）

实际需求实例

• 点击 【选择】 按钮，出现弹框
• 弹框里有数据表格
• 点击圆圈为选中当前条数据
• 点击弹框中【确认】把选中条数据带到主页面

实际代码实例

主页面代码（底，都为自动带出的输入框）

静态部分

	
		客户姓名：
			
		
			
	
	
		客户性别：
		
	
	
		客户年龄：
		
	

【选择】按钮的弹窗事件

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')
} 

弹窗页面代码

弹窗页面中–静态部分

 			

 	

 		

 			

 			
客户姓名
 			
客户性别
 			
客户年龄
 			
...
 		
 	
 	

 		

 				

 				
${customerMain.customerName}
 				
${customerMain.customerSex}
 				
${customerMain.customerYears}
 				
${customerMain.....}
 			
 		
 	

弹框页面上-- == 单击单选圆圈的事件+双击行选中 ==

$(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

弹框页面上–选择好数据后带回主页面的函数



调用主页面上的给主页面赋值的方法



到此这篇关于Layui弹框中数据表格中可双击选择一条数据的实现的文章就介绍到这了,更多相关Layui弹框双击数据内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！