点击表格中的某个列,弹出一个div层

通常有一种业务场景,数据库中某个字段的长度非常长,为了美观,不可以将该字段的所有内容展现在页面上。这个时候,一般会通过弹出层来解决这个问题。在这里必要提一下,这个长字段的内容是在展现列表数据的时候,使用hidden域存储起来呢?还是使用ajax请求,当点击列的时候,去数据库中取出来。如果是企业级后台应用,两种都可以。如果是访问量很大的页面,就不要使用每次从数据库中取的方式了。


html 代码

<pre name="code" class="html"><span style="font-size:18px;"><p class="showbtn"></p>
<div id="bg"></div>
<div class="box" style="display:none">
<span style="white-space:pre">	</span><h2>操作内容明细<a class="close">关闭</a></h2>
<span style="white-space:pre">	</span><div class="list" style="padding-left:0px;">
<span style="white-space:pre">		</span><div>
<span style="white-space:pre">		</span>  <table id="detailContentTable" class="tab" cellspacing="0" cellpadding="0">
<span style="white-space:pre">		</span>  </table>
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">	</span></div>
</div></span>

 

Jquery代码-弹出div层

$("#bg").css({
   display: "block", height: $(document).height()
});
点击某个列的时候,触发上面的代码。


Jquery代码-关闭弹出层

$(".close").click(function () {
   $("#bg,.box").css("display", "none");
});


弹出层搞定后,必须把后台数据展现到这个弹出层中,本文中,后台的数据格式是json的,如下:

var table = $("#detailContentTable");
var jsonObj;
try{
  jsonObj = <strong><span style="color:#ff0000;">$.parseJSON(content);</span></strong>
}
catch(ex){
  jsonObj = 'noValidJson';	
}

if (jsonObj == 'noValidJson') {
    table.append("<tr><td style='white-space: normal'>"+content+"</td></tr>");
}
else {
   $.each(jsonObj, function(k, v) {
	   table.append("<tr><td>"+k+"</td><td>"+v+"</td></tr>");
   });
}

content是存储在hidden中的json字符串。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值