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" οnclick="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
});
});