Jquery easyui 实现datagrid的单元格点击跳出弹出框

最新推荐文章于 2023-07-19 11:27:16 发布

Sano_pan

最新推荐文章于 2023-07-19 11:27:16 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Sano_pan/article/details/77447685

本文介绍了如何使用Jquery EasyUI在Datagrid中实现单元格点击后直接弹出详细信息窗口，以满足用户对便捷查看的需求。原本需要先选中行再查看详情，现在改为每行的特定操作后即可弹出详细信息，同时保持选择框功能以支持删除操作。最终效果为每行添加查看按钮，用户点击按钮即可查看详细内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最开始，页面布局如图，我们需要选中一行后再点击查看详情才可以，若点中两行，则跳出的弹出框。

然后呢，客户为了方便，要求直接在每一行操作后即可查看详情。所以，我就开始了吭哧吭哧改页面之路。

刚开始，我是想做成点击后直接下拉框内有详情的样子，如

这个样子的。可是呢，好像和我们想展示的周报详情有点不太符合，毕竟周报内容比较多，同时为了方便删除，我保留了选择框。

最后决定做成每一行添加按钮，可以直接点击按钮查看的样子。

如图所示。

下面我把主要代码分享上来。

<!-- 弹出框 -->
  	<div id="weekly_view_dlg">
		<div style="padding: 5px" class="main">
			

				<table id="table1" border="1" cellpadding="1" cellspacing="0"
					class="list_process" width="100%">

					<tr>
						<td align="center" style="width: 100px;">创建者</td>
						<td style="width: 200px;"><label name="creator"></label></td>
						<td align="right">创建时间</td>
						<td style="width: 200px;"><label name="createTime"></label></td>
						<!-- <td><input id="createTime" name="createTime" style="width: 150px;" readonly="true" /></td> -->
						
					</tr>
					
					
					<tr>
						<td align="center">周报标题 </td>
						<td colspan="3"><label name="title"></label></td>
						<