Easyui前端知识点收集

1、数据加载中····效果实现：

    //弹出加载层
	 function load() {  
	     $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");  
	     $("<div class=\"datagrid-mask-msg\"></div>").html("正在加载，请稍等...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });  
	 }  
	   
	 //取消加载层  
	 function disLoad() {  
	     $(".datagrid-mask").remove();  
	     $(".datagrid-mask-msg").remove();  
	 }

2、弹出模态框，显示具体信息：

	//弹出一个模态框，显示具体的msg信息
	function openWindow(msg){
		var new_msg = $(msg).text()
  		 $("#win").window({
  			  title : "显示信息",
  			  top : 50,
              width : 450,
              height : 500,
              content : new_msg
  		 });
  	 }

3、弹出提示消息

$.messager.alert({  
	            title: '提示信息',  
	            msg: '调用链ID不能为空',  
	            icon: 'warning',
	        }); 

其中icon有info、warning、error、 question四种。

4、数据表格

			//初始化source数据表格
			$('#sourceTable').datagrid( {
					title : "SOURCE",
			    	checkOnSelect : true,
			    	rownumbers : true,
			    	singleSelect : true,
					columns : [[ {
						field:'sourceName',
			        	title:'组件名',
			        	width:"10%",
					},{
						field:'startTime',
			        	title:'启动时间',
			        	width:"12.5%",
					},{
						field:'stopTime',
			        	title:'状态',
			        	width:"12.5%",
					},{
						field:'ip',
			        	title:'Ip',
			        	width:"7.5%",
					},{
						field:'port',
			        	title:'端口号',
			        	width:"5%",
					},{
						field:'eventReceivedCount',
			        	title:'成功收到数量',
			        	width:"7.5%",
					},{
						field:'openConnectionCount',
			        	title:'打开连接数',
			        	width:"7.5%",
					},{
						field:'appendBatchAcceptedCount',
			        	title:'放入批量数',
			        	width:"7.5%",
					},{
						field:'appendBatchReceivedCount',
			        	title:'追加批量数',
			        	width:"7.5%",
					},{
						field:'eventAcceptedCount',
			        	title:'接收日志数量',
			        	width:"7.5%",
					},{
						field:'appendReceivedCount',
			        	title:'追加日志数量',
			        	width:"7.5%",
					},{
						field:'appendAcceptedCount',
			        	title:'追加的数量',
			        	width:"7.5%",
					} ]]
					
				});
    $("#sourceTable").datagrid('loadData',flumedata);

5、访问url获取数据

（1）、$.getJSON(URL,function(data){ });或者$.getJSON(URL,params,function(){ });

		$.getJSON(url_queryAction,function(data){
			var newdata = new Object();
			newdata.rows = new Array(data.length);
			newdata.total = data.length;
			for (var i = 0; i < data.length; i++) {
				var array = data[i].split(":");
				var tmp = new Object();
				tmp.ip = array[0];
				tmp.port = array[1];
				tmp.address = "http://"+data[i]+"/metrics"
				newdata.rows[i] = tmp;
			}
			$("#monitorConfigTable").datagrid('loadData',newdata);
		});
		
	 });

（2）、$.ajax({ });

		$.ajax({
			type: "POST",
			url : url_searchAction,
			data : params,
			dataType: "json",
			success: function(data){
				 if (data == null) {
					disLoad();
					return;
				}
				 $("#panel").empty();
				 for(var i=0;i<data.rows.length;i++){
						//var panelHeader = "title" + i;
						var title = data.rows[i].title;
						var table_string = "<table class='easyui-datagrid' id=" + "'" + title + "' data-options='collapsible:true'" + " style='width:99%;'></table>";
					    $("#panel").append(table_string);
					    $('#panel').append('<div style="margin-top:10px;clear:both"></div>');
					    var newObject = new Object();
					    newObject.rows = data.rows[i].rows;
					    newObject.total = data.rows[i].rows.length;
					    $("#" + title).datagrid({
					    	title : title,
					    	checkOnSelect : true,
					    	rownumbers : true,
					    	singleSelect : true,
							columns : [ [ {
								field : 'cid',
								title : '调用链',
								resizable : true
							}, {
								field : 'srv',
								title : '服务名',
								resizable : true
							}, {
								field : 'lvl',
								title : '等级',
								width : "5%",
								formatter : function(value,row,index){
									if (value == "ERROR") {
										return '<span style="color:red;">'+value+'</span>';
									} else {
										return value;
									}
								}
							}, {
								field : 'msg',
								title : '信息',
								width : "20%",
								formatter : function(value,row,index){
									if (typeof(value)=="undefined") {
										return;
									}
									return '<a href="javascript:void(0)" id="href" onclick="openWindow(this)">'+value
							    	+'</a>';
								}
							},{
								field : 'etc',
								title : '耗时',
								width : "5%",
								formatter : function(value,row,index){
									if (value > 5) {
										return '<span style="color:red;">'+value+'</span>';
									}else {
										return value;
									}
								}
							},{
								field : 'fn',
								title : '方法名称',
								width : "5%",
							},{
								field : 'dir',
								title : '路径展示',
								width : "5%",
							},{
								field : 'logtime',
								title : '记录时间',
								width : "10%",
							},{
								field : 'tid',
								title : '线程号',
								width : "10%",
								resizable : true
							},{
								field : 'pid',
								title : '进程号',
								width : "5%",
							},{
								field : 'ip',
								title : 'IP地址',
								width : "5%",
								resizable : true
							}] ]
					    });
					    $("#" + title).datagrid('loadData',newObject);
						}  
				 disLoad();
			 },
		error : function(){
			disLoad();
			return;
		}
			
		});

6、input框获取值和设值

     //获取值
			var value = $("#cid").val();
			//设值：1、普通的input框
			$("#cid").val(value);
			//$('input[name="cid"]').val(cid);
			//设值：2、时间框
			$("#startTime").datetimebox({
				value : startTime
			});