Hello______world
- 浏览: 17860 次
-
最新评论
dongtaitianjia.js
$(function() {
var addKeyAlarmNote = function(){
var node = "<div id='keyAlarm' class='keyAlarmBox'>"
+"<span>共有</span>"
+"</div>";
$("#box").append($(node));
$("#gs_container").append($(node).show());
}
addKeyAlarmNote();
//将告警拼成html
var getList = function(data){
var lis ="";
if(data && data.data.list.length > 0){
for(var i = 0; i <data.data.list.length;i++){
console.log("2");
var li = getAlarmLi(data.data.list[i]);
lis += li;
}
}
return lis;
}
$.ajax({url:'MineJs/ajax3.json',
type:'post',
async:true,
success:function(data){
var lis = getList(data);
$("#keyAlarmContent").append(lis);
}});
//获取电站类型对应的图片
var getStationTypeImg = function(type){
if(type == 1){
return "image/map_point_1X0.png";
}else if(type = "2"){
return "image/map_point_220.png";
}
}
var getAlarmLi = function(item){
var node = "<li class='stationsAlarm' sId ='"+item.stationCode+"'>"
+ "<img src='" + getStationTypeImg(item.cominedType) + "'/>"
+"<p class = 'descr'>"
+"<span>[</span>"
+" <span class='stationType' style='font-weight:800;'>" + (item.cominedType)+"</span>"
+"<span>]</span>"
+ "<span class='stationName'>" + item.stationName + "</span>"
+ "<input type='hidden' name='sid' value='" + item.stationCode + "' />"
+ "</p>"
+ "<div class='alarmNums'>"
+ "<div class='alarmLevel levle2' style='border-radius: 5px 0 0 5px;'>" + item.severityLevel['2'] + "</div>"
+ "<div class='alarmLevel levle3'>" + item.severityLevel['3'] + "</div>"
+ "</div>"
+"</li>";
return node;
}
});
dongtaitianjia.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="MineJs/dongtaitianjia.js"></script>
<script type="text/javascript" src="MineJs/ajax.js"></script>
</head>
<body>
<div class="alarm" id="box">
<span>第一条数据</span>
<div id="keyAlarmContent" style="height:800px;width:500px">
</div>
</div>
</body>
</html>
ajax3.json
{"success":true,"message":null,"data":{"list":[{"id":null,"optimisticLockVersion":null,"stationCode":"D5EEAB8D1FD72BC6E70F2FB050DD9EC8","stationName":"qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"BE6C528112A8ABF22F12D4DF25F9EBE5","stationName":"hyhy","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"C77CF68F638F06443F8AF1F02DE1B0E3","stationName":"kl","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"DEC0A66791F9943CE286855C78EEDD6A","stationName":"gx","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"73D46007AFD40281125B3AD9E57268D5","stationName":"CSL","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}},{"id":null,"optimisticLockVersion":null,"stationCode":"4C60F42E449C2D3B05ACD3108225AF8E","stationName":"一个很长的狮吼功内容可以显示一些什么内容大家经鉴定该基地及国际景点基金降低基金","generatingCapacity":null,"cominedType":"2","severityLevel":{"1":0,"2":0,"3":0}}],"totalMap":{"1":0,"2":0,"3":0},"total":8,"pageNo":1,"pageSize":6,"pageCount":2},"errorMsg":{}}
分享到：
发表评论
-
springMvc 前台
2017-03-30 19:17 472App.js /** * 1，定制组件 ... -
Spring4 MVC json问题(406 Not Acceptable)
2017-03-29 22:51 499http://www.aichengxu.com/java/2 ... -
style
2017-03-07 16:27 0/* ============================ ... -
main/index
2017-03-06 19:08 0<!--header begin--> < ... -
2.22
2017-03-06 18:45 0/** vim: et:ts=4:sw=4:sts=4 * ... -
jsonss
2017-03-04 18:20 1419alarmModel.json { "q ... -
html11
2017-03-04 18:08 371index.html <!DOCTYPE html ... -
html
2017-03-04 18:06 0hp index.html <div id= ... -
zTree
2017-03-04 18:02 0zTreeStyle.css /*----------- ... -
vddd
2017-03-03 17:40 0登录 index.html <!DOCTYP ... -
view
2017-03-03 17:40 0index.js App.Module('home','首页 ... -
zTree
2017-03-03 17:16 0/*----------------------------- ... -
ValidateForm
2017-03-03 17:15 0引用/*! jQuery Validation Plugin ... -
MultiSelect
2017-03-03 17:14 0.MultiSelect { padding: 0p ... -
111
2017-03-03 17:09 0jquery.base64.js /*! * jquer ... -
inputTree
2017-03-03 17:12 0/** * 树的扩展 - 搜索框点击之后出现的树 * ... -
GridTable
2017-03-03 17:11 0.GridTableDiv { cursor: de ... -
ExpandTable
2017-03-03 17:05 0div.tableGridofExpand{ height ... -
ECharts.js.txt
2017-03-03 17:08 0(function () { "use s ... -
Cookies.txt
2017-03-03 17:04 0var Cookies = {}; var sessionI ...
相关推荐
在JavaScript中，动态生成table是一种常见的网页交互功能，它允许我们根据需求在页面上实时创建、添加或删除表格行（tr）和单元格（td）。这个功能在数据展示、表格编辑或者用户交互丰富的应用场景中非常实用。下面...
本文将深入探讨如何利用JavaScript动态生成HTML页面元素，包括使用innerHTML属性和DOM（Document Object Model）方法两种主要方式，以及在不同浏览器环境下的兼容性问题。 ### 1. 使用innerHTML属性 `innerHTML`...
在处理动态生成的元素时，jQuery提供了强大的选择器和方法，这使得开发者能够以简洁的方式操作这些元素，包括为它们添加事件监听器。 2. 动态生成元素的事件处理难题：在Web开发中，经常遇到需要动态生成页面元素的...
在网页开发中，JavaScript（简称JS）是一...总结起来，动态生成JS tab页的关键在于理解HTML结构、JavaScript事件处理和CSS样式控制。通过结合这三个部分，我们可以构建出灵活、响应式的用户界面，提升网站的用户体验。
综上所述，JS和HTML动态生成的树主要依赖于HTML的基础结构、JavaScript的DOM操作以及可能的外部库，如JSTree，来实现丰富的交互和数据展示。在实际开发中，根据项目需求选择合适的方法和工具，可以有效地提升用户...
在JavaScript编程中，动态生成`select`元素中的`option`是一项常见的需求，特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，同时结合提供的`autoSelect.html`和`autoselect.txt`...
在前端开发中，动态生成表单是一个常见的需求，特别是在数据录入、编辑或验证场景下。本教程将聚焦于如何利用jQuery和layui库来实现这样的功能。jQuery是一个强大的JavaScript库，它简化了DOM操作，事件处理，动画...
在JavaScript（JS）中动态生成表格是一项常见的任务，特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能，以及相关的源码和工具。 首先，我们要明白HTML表格的基本结构，它由`<table>`、`...
总结来说，"JS动态生成二维码"是通过利用jQuery库和相关的插件，结合HTML和CSS，实现网页上的动态生成和下载二维码的功能。这种技术广泛应用于分享链接、名片交换、产品追踪等多种场景，极大地丰富了Web应用的交互性...
首先，动态生成JS（JavaScript）意味着在用户请求网页时，服务器会根据特定条件或配置生成相应的JavaScript代码，并将其嵌入到HTML页面中。这种方式的好处在于，站长可以根据不同的时间、用户行为或者用户群体定制...
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。在网页设计中，菜单是用户与网站交互的重要部分，动态生成的菜单可以根据用户需求或数据变化实时更新，提供更加灵活和个性化的用户...
### JS动态生成文本框并实现删除功能的知识点 在现代Web开发中，动态地操作DOM（文档对象模型）是常见的需求之一。通过JavaScript可以轻松地实现这一目标。本篇文章将详细解析如何使用JavaScript来动态创建文本框，...
JavaScript动态生成CSS是一种常见的前端开发技术，它允许我们在运行时创建、修改或删除CSS样式，以实现更加灵活和动态的页面样式控制。这种方式通常用于响应式设计、动画效果、主题切换或者在某些特定条件下需要调整...
这个程序包“asp网站代码数据库添加删除编辑程序 将动态程序生成html”显然涉及到ASP技术在构建网站时的关键功能，即与数据库交互以及静态页面的生成。 在ASP中，开发者可以使用VBScript或JScript等脚本语言编写...
"js移动端页面生成图片demo(基于html2Canvas.js).zip"是一个示例项目，它演示了如何利用html2Canvas.js这个JavaScript库在移动端实现这一功能。下面我们将深入探讨相关知识点。 1. **html2Canvas.js**: 这是一个...
在Web开发中，动态生成HTML标签是一项常见的任务，特别是在构建数据驱动的用户界面时。`.NET`框架提供了强大的工具和库来支持这种功能，而Web应用程序通常使用ASP.NET技术进行开发。本文将深入探讨如何在ASP.NET中...
本文介绍的使用JavaScript动态生成表格并为每个单元格添加单击事件的方法是Web开发中一项基础而重要的技能。通过这种方式，我们可以根据实时数据创建表格，并允许用户与表格中的数据进行交互。这不仅使页面变得更加...
标题“spreadjs_动态添加表头及数据绑定-demo.zip”所指的，是使用SpreadJS库创建的一个示例，该示例演示了如何在JavaScript环境中动态地添加表格表头并实现数据绑定。SpreadJS是一款强大的JavaScript电子表格组件，...
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在动态生成内容方面表现得尤为强大。本文将深入探讨如何使用JS动态生成二维码图片，这是一个常见的需求，特别是在移动互联网时代，二维码作为数据...
总结来说，动态创建iframe并动态添加js执行代码是Web开发中的重要技术，它能够帮助我们实现异步加载、跨域通信等功能，但同时也需要注意相关的安全问题。通过熟练掌握这些技术，开发者能够构建更复杂、更灵活的Web...