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("请先选择操作主机！");
}

},

效果展示

中文教程和中文API  :   http://api.btboys.com/