jquery easyui table 典型應用

主要介紹以下幾種功能的典型應用，並列出代碼提供參考

1. 動態加載數據
2. 字段修改樣式，使用styler
3. 字段修改文字
4. 長度自適應
5. 批量的操作

 

1，動態加載數據

$('#datagrid').getDataGrid( {
//url : encodeURI(object.listUrl),
listUrl : urlPath+"listservices.action?s_hostname="+$('#selecthost').val(),
refreshUrl : urlPath+"listservices.action?s_hostname="+$('#selecthost').val(),
pagination : true,
fitCoulumn : true,
rownumbers : false,
singleSelect : true,
pageSize: 15,
pageList: [15,30,45],
onLoadSuccess:function(){
s_count = '0';
s_hostObj = '0';
},
nowrap : false,
columns : [ [ {
field : 'host_display_name',
title : '主機名',
width : 70,
align : 'center',
formatter : function(val) {
return jQuery.showHost(val);
}
}, {
field : 'display_name',
title : '服務',
width : 115,
align : 'center'
}, {
field : 'action_url',
title : '監控圖',
width : 50,
align : 'center',
formatter:function(value,rec){
if(value == ""||value.indexOf("check_vms")>0){
return "";
}else{
return "<a href='javascript:void(0)' onclick='open2(\""+value+"\")'><img  src='../common_res/images/action.gif' BORDER=0 WIDTH=20 HEIGHT=20 ALT='圖形' TITLE='圖形'/></a>";
}
}
},{
field : 'current_state_str',
title : '當前狀態',
width : 55,
align : 'center',
styler:function(value,row,index){
if (value == '嚴重'){
return 'background-color:red;';
}else if (value == '警報'){
return 'background-color:yellow;';
}else if (value == '未知'){
return 'background-color:green;';
}
}
}, {
field : 'status_update_time',
title : '最近檢查時間',
width : 200,
align : 'center'

}, {
field : 'output',
title : '狀態信息',
width : 300,
align : 'center'

}, ] ],
tbdefault : []
});

2，字段修改樣式，使用styler

{
field : 'current_state_str',
title : '當前狀態',
width : (document.body.clientWidth - 370.5) *0.05,
align : 'center',
styler:function(value,row,index){
if (value == '嚴重'){
return 'background-image:url(../common_res/images/icon/monitorstate/orange_point.gif);';
}else if (value == '警報'){
return 'background-image:url(../common_res/images/icon/monitorstate/yellow_point.gif);';
}else if (value == '未知'){
return 'background-image:url(../common_res/images/icon/monitorstate/blue_point.gif);';
}else{
return 'background-image:url(../common_res/images/icon/monitorstate/green_point.gif);';
}
}

3，字段修改文字

{
field : servicename,
title : '服務名',
width : 70,
align : 'center',
formatter : function(val) {
return jQuery.service2cn (val);
}
}

 

jQuery.extend({

service2cn : function(val){
if(val == 'CPU_Usage'){
return "CPU使用率";
}else if(val == 'Current_Load'){
return "當前Load";
}else{
return val;
}
}

});

 

4，長度自適應

columns : [ [ {
field : 'host_display_name',
title : '主機名',
width : (document.body.clientWidth - 370.5) *0.1,
align : 'center',
formatter : function(val) {
return jQuery.showHost(val);
}
}, {
field : 'display_name',
title : '服務',
width : (document.body.clientWidth - 370.5) *0.1,
align : 'center',
formatter : function(val) {
return jQuery.service2cn(val);
}
}]]

5，批量的操作

postSelectedIds : function(url, list) {
var ids = [];
var rows = $('#datagrid').datagrid('getSelections');
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].id);
}
if (ids.toString() !== "") {
if (confirm("確認刪除嗎？"))
{
$.post(url, {
"deleteIds" : ids.toString()
}, function(data) {
if (data.msg.flag) {
alert("刪除成功!");
$('#datagrid').datagrid("reload");
} else {
alert("錯誤碼:" + data.msg.message);
$('#datagrid').datagrid("reload");
}
});
}
else
{
alert("您取消了.");
}
} else {
alert("請先選擇操作主機！");
}

},

效果圖