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