1、文件引人
<link href="http://hovertree.com/texiao/js/4/hvtcss4.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/texiao/js/4/hvtjs4.js"></script>
2、CSS 布局
<style>
a {
color: blue;
}
.hvtcenter {
width: 760px;
margin: 0px auto;
}
td {
font-size: 6px;
}
th {
font-size: 8px;
}
</style>
3、页面调用
<div class="float_layer_hovertree" id="hovertree_float_layer" style="z-index:10001;">
<h2>
<b>异常数据预警</b>
<a id="btn_min" href="javascript:;" class="min" target="_self"></a> <a id="btn_close" href="javascript:;" class="close" target="_self"></a>
</h2>
<div class="content" style="width:320px; height:280px; overflow:scroll; overflow-x:hidden;">
<div class="wrap">
<table class="table table-striped table-bordered table-hover table-condensed dataTable_wrapper">
<thead id="alarmmsghead">
<tr class="info">
<th width="40px" style="text-align:center">序号</th>
<th width="80px">名称</th>
<th width="70px">昨日值</th>
<th width="60px">单位</th>
<th width="40px">状态</th>
</tr>
</thead>
<tbody id="alarmmsgbody"></tbody>
</table>
</div>
</div>
</div>
4、JS传值
function getalarmdata(){
$.getJSON("/DataBrowser/GetAlarmExceptionData", function (data) {
var len = data.length;
//if(len==0){
// $("#hovertree_float_layer").hide();
//}
if (data != null) {
var newRow = "";
if (len > 0) {
for (var i = 0; i < len; i++) {
var color=data[i].Type=="偏高"?"red":"green";
newRow += "<tr>";
newRow += "<td style='text-align:center'>" + (i+1)+ "</td>";
newRow += "<td>" + data[i].Name + "</td>";
newRow += "<td>" + data[i].ItemValue.toFixed(2) + "</td>";
newRow += "<td>" + data[i].Unit + " </td>";
newRow += "<td>" + '<font color="'+color+'">'+data[i].Type+'</font>' + "</td>";
newRow += "</tr>";
}
}
else{
newRow += '<tr>';
newRow += '<td align="center" colspan=5>';
newRow += '<label class="control-label" >' + "没有记录" + '</label>';
newRow += '</td>';
newRow += '</tr>';
}
$("#alarmmsgbody").html(newRow);
}
//var dialog = $("#avghour").removeClass('hide').dialog({
// modal: true,
// title: "平均工时统计：" + params.name + '(' + beginstr + '~' + endstr + ')',
// title_html: true,
// width: 700,
// height: 250,
// buttons: []
//});
});
}
5、效果显示
展开效果
隐藏效果