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

用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(); 
		}
	});

在Vue 3使用vxe-table组件库时,要点击单元格触发弹窗,你可以通过在单元格上绑定点击事件处理函数来实现这一功能。具体步骤如下: 1. 首先确保你的项目已经正确安装并引入了vxe-table组件库。 2. 在表格的配置项,找到需要触发弹窗的列(column),并在该列配置使用`render`函数来自定义渲染单元格内容,或者直接使用`formatter`属性格式化单元格内容。 3. 在`render`函数或`formatter`属性的回调函数,添加一个事件监听器(例如`click`),当单元格点击时触发。 4. 在事件处理函数,你可以使用vxe-table提供的API或者自定义方法来弹出一个模态(如使用Vue的v-model结合Dialog组件)。 下面是一个简单的示例代码: ```vue <template> <vxe-table :data="tableData" @cell-click="handleCellClick"> <!-- 定义列 --> <vxe-column field="name" title="姓名"></vxe-column> <vxe-column field="action" title="操作"> <!-- 自定义单元格内容 --> <template #cell="params"> <span @click="handleCellClick(params.row)">编辑</span> </template> </vxe-column> </vxe-table> <!-- 模态组件 --> <vxe-dialog v-model="dialogVisible" title="详情"> <!-- 弹窗内容 --> </vxe-dialog> </template> <script> import { ref } from 'vue'; import { VXETable } from 'vxe-table'; export default { components: { VXETable, // 其他组件 }, setup() { const tableData = ref([...]); // 表格数据源 const dialogVisible = ref(false); // 控制弹窗显示的变量 const handleCellClick = (params) => { // 打开弹窗 dialogVisible.value = true; // 可以根据params取到点击的行数据 // params.row }; return { tableData, dialogVisible, handleCellClick }; } }; </script> ``` 在上述代码,我们使用了`vxe-table`的`cell-click`事件来捕捉单元格点击事件,并在事件处理函数`handleCellClick`打开一个模态。具体的模态组件和弹窗逻辑需要根据你的实际需求进行配置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老马识途2.0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值