前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >点击table的td单元格出现dialog弹窗,获取值后将值放回td单元格

点击table的td单元格出现dialog弹窗,获取值后将值放回td单元格

作者头像
全栈程序员站长
发布2022-06-30 11:37:40
2.3K0
发布2022-06-30 11:37:40
举报
文章被收录于专栏:全栈程序员必看
代码语言:javascript
复制
用dialog做个弹窗,做了一天一夜终于在各种百度下一点一点试出来了。
 $("#table1  td").on('click',function () {             
  	<!--获取所点击单元格td的id-->
 	var eachTdId=$(this).attr("id");
 	<!--此为难点,下面一步可以根据所点击的id与已存在的列id比较,可为table中的哪几列执行弹窗事件,-->
 	if(eachTdId=="tdoriCodeBk" || eachTdId=="tdoriCodeBk2" || eachTdId=="tdoriCodeBk3"){
              	<!--获取所点击单元格的列数-->
		var tdSeq = $(this).parent().find("td").index($(this));       
                <!--获取所点击单元格的行数-->
 		var trSeq = $(this).parent().parent().find("tr").index($(this).parent());
                <!--dialog插件-->
		var d = dialog({
         	title: '备用元数据添加',
 		<!--跳出的弹窗链接到控制器-->
 			url: '${base}/cis/cisDataItemDef/itemDefList',
			 <!--关闭弹出后执行的function函数-->
 			onclose:function(){
 			<!--难点,将子界面传来的值放回到所点击的单元格input框中,在tr:eq("+trSeq+")  比较是,必须用+号才能将var类型装成数字比较-->
 			$("#table1 tr:eq("+trSeq+") td:eq("+tdSeq+") input").val($("#hide").val()); }}); d.height(450) d.width(750) d.showModal(); 
			} 
		});
 


控制器代码
@RequestMapping("/itemDefList")
    public String itemDefList(){
    	return "/cis/cisDataItemDef/cisDataItemDefList.ftl";
    }


控制器转到ftl页面,出现弹窗内容的jquery代码
<script>
	$("#save").on("click",function(){
 		<!--获取所点击行的内容-->
 		var rows = $('#table').bootstrapTable('getSelections'); 
		var code = []; 
		for(var i=0;i<rows.length;i++){ 
					code.push(rows[i]['oriCode']); 
				}
 				if(code.length==0){ 
					alert("请选择要添加的元素"); 
					return false;
				 } 
				window.returnvalue=rows;
				$("aa").value=rows; 
				var d = ar_.getDialog(parent);/* parent.dialog.get(window); */
 		<!--将处理的值放到父页面的一个隐藏域中-->
 		$(window.parent.$("#hide").val(code));
 		<!--关闭弹窗-->
 		d.close(); 
		}
	});

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/106388.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年7月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档