关闭

Easyui前端知识点收集

标签: easyuidatagrid combobox
668人阅读 评论(0) 收藏 举报
分类:

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
			});


7、下拉选择框combobox

		$('#queryNum').combobox({
		    url:'${ctx}/view/elasticsearch/queryNum.json',
		    valueField:'id',
		    textField:'text'
		});
或者:
									$('#field').combobox({
										data : fieldObject.rows,
										textField:'field',
										valueField:'field',
										onSelect:function(data){}
									});

其中onSelect选择时触发事件,其中下拉数据json格式:
[{
	"id":1,
	"text":"must",
	"selected":true  
},{
	"id":2,
	"text":"must_not"
},{
	"id":3,
	"text":"should"
}]

获取combobox的选择值:
		var index =  $('#index').combobox('getValue');

8、easyui通过js动态加载组件的时候,easyui样式失效,解决办法:

		var targetObj = $('#'+conditionId);
		$.parser.parse(targetObj);

通过id获取这个组件,然后重新渲染这个组件。

9、js中栈可以用var fieldIdArray= new Array(); 实现

	var fieldIdArray = new Array(); 
	//数据进栈
	fieldIdArray.push(data);
	//数据出栈
	var data = fieldIdArray.pop();

10、datagrid动态列实现

$.getJSON(url,function(data){
	var columns = [];
	var col = [];
	for(var i=0;i<data.length;i++){
		var data_one = data[i];
		var oneColumn = {title:data_one.title,field:data_one.field,resizable:true};
		col.push(oneColumn);
	}
	columns[0] = col;
	$('#EsDataTable').datagrid({
		checkOnSelect : true,
    	rownumbers : true,
    	singleSelect : true,
    	fitColumns : false,
    	columns : columns
	});

});


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:204069次
    • 积分:2481
    • 等级:
    • 排名:第16689名
    • 原创:72篇
    • 转载:25篇
    • 译文:0篇
    • 评论:33条
    博客专栏
    最新评论