zoukankan      html  css  js  c++  java
  • jquery直接把数组写入到表格

    1.
    [root@yyjk templates]# cat readmq.html 
    <head>
    	<title>运维平台</title>
    	<link rel="stylesheet" type="text/css" href="/static/Css/Monitor/readmq.css">
    	<link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css">
    	<link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css">
    </head>
    <body>
    	<include file="Public:header"/>
    	<div class="content">
    		<include file="Public:menu"/>
    		<div class="con fl">
    			<label class="condition">应用</label>
    			<select name="app" class="monitor">
    				
    			</select>
    			<label class="condition">队列管理器</label>
    			<select name="qmgr" class="monitor">
    				
    			</select>
                            <label class="condition">队列</label>
                            <select name="queue" class="monitor">
                            </select>
    			<!--<input type="submit" value="read_mq_message" class="monitor_add">-->
    			<input type="submit" value="read_mq_message" class="readmq">
    			<!--<input type="submit" value="get_mq_message" class="monitor_start">-->
    			<input type="submit" value="get_mq_message" class="getmq">
    		</div>
                    	<table class="gridtable fr">
    			<tr><th>消息</th></tr>
    		</table>
    	</div>
    </body>
    <script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
    <script type="text/javascript" src="/static/Js/Monitor/readmq.js"></script>
    <!script type="text/javascript" src="/static/Js/Public/menu.js"><!/script>
    <script type="text/javascript" src="/static/Js/Public/ajax.js"></script>
    </html>
    <html>
    
    
    2.
    [root@yyjk Monitor]# cat readmq.js
    $(function(){
    	var _env_select = $("select[name='env']");
    	var _app_select = $("select[name='app']");
    	var _qmgr_select = $("select[name='qmgr']");
    	var _queue_select = $("select[name='queue']");
    	var _sub_btn = $(".readmq");
    	var _qmgr_btn = $(".getmq");
    	
    	
    	getapp("pro");
    	getqmgr("pro");
    	getqueue("pro")
    	
    	function getapp(env){
    		var data = {};
    		var successfn = function(jdata){
    			var _HTML = "";
    			_app_select.html("");
    			$.each(jdata,function(i,val){
    				_HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
    			});
    			_app_select.html(_HTML);
    		};
    		var errorfn = function(jdata){
    			alert("数据返回出错");
    		};
    		
    		$.ajax({
                type: "get",
                data: data,
                url: "/api/getmqapp",
    			dataType: "json",
                success: function(d){
                    successfn(d);
                },
                error: function(e){
                    errorfn(e);
                }
            });
    
    	}
    	
    	function getqmgr(env){
    		var data = {};
    		var successfn = function(jdata){
    			console.log(jdata);
    			var _HTML = "";
    			_qmgr_select.html("");
    			$.each(jdata,function(i,val){
                                    if (jdata[i][0] == 'QMEMBFE'){
    				_HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
                              };
    			});
    			_qmgr_select.html(_HTML);
    		};
    		var errorfn = function(jdata){
    			alert("数据返回出错");
    		};
    		
    		$.ajax({
                type: "get",
                data: data,
                url: "/api/getqmgrlist",
    			dataType: "json",
                success: function(d){
                    successfn(d);
                },
                error: function(e){
                    errorfn(e);
                }
            });
    
    	}
    	
    	
    	
    		function getqueue(env){
    		var data = {};
    		var successfn = function(jdata){
    			console.log(jdata);
    			var _HTML = "";
    			_queue_select.html("");
    			$.each(jdata,function(i,val){
                                    
    				_HTML = _HTML + "<option value="+jdata[i]+">"+jdata[i]+"</option>";
                              
    			});
    			_queue_select.html(_HTML);
    		};
    		var errorfn = function(jdata){
    			alert("数据返回出错");
    		};
    		
    		$.ajax({
                type: "get",
                data: data,
                url: "/api/getmqqueue",
    			dataType: "json",
                success: function(d){
                    successfn(d);
                },
                error: function(e){
                    errorfn(e);
                }
            });
    
    	}
    	
    	
    	
    	_env_select.on("change",function(){
    		env = _env_select.val();
    		getapp(env);
    	});
    	
    	
    	_env_select.on("change",function(){
    		env = _env_select.val();
    		getqmgr(env);
    	});
    	
    	_env_select.on("change",function(){
    		env = _env_select.val();
    		getqueue(env);
    	});
    	
    	
    	_sub_btn.on("click",function(){
    		var env = _queue_select.val();
    		var app = _app_select.val();
    		var qmgr = _qmgr_select.val();
    		var queue = _queue_select.val()
    		
    		var data = {};
    		data.env = env;
    		data.app = app;
    		data.qmgr = qmgr;
    		data.queue=queue;
    		var successfn = function(jdata){
                          console.log(jdata);
                        var jdata = eval(jdata);
                  $(".gridtable").empty();
                  var _HTML="<tr><th>read_mq_message</th></tr>";
                    _HTML=_HTML+"<tr><td>"+jdata+"</td></tr>";
                $(".gridtable").html(_HTML);
    		};
    		var errorfn = function(jdata){
    			alert("数据返回出错");
    		};
    		$.ajax({
                type: "get",
                data: data,
                url: "/api/readmqmessage",
                dataType: "text",
                success: function(d){
                    successfn(d);
                },
                error: function(e){
                    errorfn(e);
                }
            });
    	});
    	
    		_qmgr_btn.on("click",function(){
    		var env = _queue_select.val();
    		var app = _app_select.val();
    		var qmgr = _qmgr_select.val();
    		var queue = _queue_select.val();
    		var data = {};
    		data.env = env;
    		data.app = app;
    		data.qmgr = qmgr;
    		data.queue=queue;
    		var successfn = function(jdata){
                   console.log(jdata);
                   var jdata = eval(jdata);
                   $(".gridtable").empty();
                   var _HTML="<tr><th>get_mq_message</th></tr>";
                   _HTML=_HTML+"<tr><td>"+jdata+"</td></tr>";
                   $(".gridtable").html(_HTML);
    		};
    		var errorfn = function(jdata){
    			alert("数据返回出错");
    		};
    		$.ajax({
                type: "get",
                data: data,
                url: "/api/getmqmessage",
                dataType: "json",
                success: function(d){
                    successfn(d);
                },
                error: function(e){
                    errorfn(e);
                }
            });
    	});
    	
    });

  • 相关阅读:
    Unity HDRP BentNormal的理解
    c语言变长数组VLA的变通实现
    中间件目录索引:redis,git,grpc等
    MYSQL插入脚本
    Polly是一个.NET弹性和瞬态故障处理库
    grpc的.net core使用
    基于PaddleOCR实现AI发票识别的Asp.net Core应用
    Clean Architecture For RazorPage 实现多语言和本地化
    easyui-datagrid 主从表(一对多)表结构,明细在前端存json,一键保存至数据库
    下拉框级联
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13349337.html
Copyright © 2011-2022 走看看