1.最简单和清晰的datagrid数据绑定方法，只需要添加table标签，设置其field字段，即可实现数据的绑定。列的格式化通过data-options属性指定格式化处理函数formatter，再通过获取datagrid中的值，可以实现各种数据格式化操作，笔者这里就状态字段进行格式化，当状态为2，即报警状态时，将会以绿色的报警字段显示其状态，而不是直接显示数字的方式，更加直观。
<!DOCTYPE html>
<html>
<head>
<title>故障详情</title>
<meta http-equiv="pragma" content="no-cache" />
<script src="/Scripts/loading.js" type="text/javascript"></script>
<link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
<script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
<script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
<script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid" title="报警机组" toolbar="#toolbar" rownumbers="true"
fitcolumns="true" singleselect="true">
<thead>
<tr>
<th field="Name" width="100" data-options="align:'center'">
机组名称
</th>
<th field="Status" width="100" data-options="align:'center',formatter:stateformater">
机组状态
</th>
</tr>
</thead>
</table>
<script type="text/javascript">
//机组状态格式化函数
function stateformater(val, row, index) {
var status = row.Status;
var res = '';
if (status == 1) {
return "正常";
} else if (status == 2) {
return "<font color='green'>报警</font>";
} else if (status == 3) {
return "<font color='red'>停机</font>";
}
}
$(function () {
var dgtotal = 0;
var dgwarn = 0;
$("#dg").datagrid({ url: '/JZ/JZHandler.ashx?action=GetAllGZJZInfo',
onLoadSuccess: function (data) {
var rows = $("#dg").datagrid("getRows");
dgtotal = data.total;
//统计报警个数[2代表报警]
for (var i = 0; i < rows.length; i++) {
if (rows[i].Status == 2) {
dgwarn = dgwarn + 1;
}
}
}
});
})
</script>
</body>
</html>2.通过js代码实现，设置更为灵活。
<!DOCTYPE html>
<html>
<head>
<title>机组详细信息管理界面</title>
<meta http-equiv="pragma" content="no-cache" />
<script src="/Scripts/loading.js" type="text/javascript"></script>
<link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
<script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
<script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
<script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
//表格宽度自适应，这里的#dg是datagrid表格生成的div标签
function fitCoulms() {
$('#dd').datagrid({
fitColumns: true
});
}
$(function () {
//初始加载，表格宽度自适应
$(document).ready(function () {
fitCoulms();
});
//浏览器窗口大小变化后，表格宽度自适应
$(window).resize(function () {
fitCoulms();
});
var datagrid; //定义全局变量datagrid
var editRow = undefined; //定义全局变量：当前编辑的行
var tmpRowData = undefined;
datagrid = $("#dd").datagrid({
url: '/JZ/JZHandler.ashx?action=GetAllJZInfo', //请求的数据源
title: '机组列表',
iconCls: 'icon-edit', //图标
pagination: true, //显示分页
pageSize: 10, //页大小
pageList: [10, 20, 30, 40], //页大小下拉选项此项各value是pageSize的倍数
fit: true, //datagrid自适应宽度
fitColumn: true, //列自适应宽度
striped: true, //行背景交换
nowap: true, //列内容多时自动折至第二行
border: true,
idField: 'Id', //主键
columns: [[//显示的列
{field: 'ck', checkbox: true },
{ field: 'Id', title: '机组编号', width: 100, sortable: true, align: 'center',
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'Name', title: '机组名称', width: 100, align: 'center',
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'JTName', title: '集团名称', width: 130, align: 'center',
editor: { type: 'combobox', options: {
valueField: 'text', textField: 'id', url: '/JT/JTHandler.ashx?action=GetAll', required: true,
onSelect: function (data) {
var target = $('#dd').datagrid('getEditor', { 'index': editRow, 'field': 'GCName' }).target;
target.combobox('clear'); //清除原来的数据
var url = '/GC/GCHandler.ashx?action=GetGC&jt=' + encodeURI(data.id);
target.combobox('reload', url); //联动下拉列表重载
},
onLoadSuccess: function () {
$(this).combobox('setValue', tmpRowData.JTName);
}
}
}
},
{ field: 'GCName', title: '工厂名称', width: 130, align: 'center',
editor: { type: 'combobox', options: {
valueField: 'text', textField: 'id', required: true,
onLoadSuccess: function () {
$(this).combobox('setValue', tmpRowData.GCName);
}
}
}
},
{ field: 'Boss', title: '负责人', width: 155, align: 'center',
editor: { type: 'combobox', options: {
required: true, url: '/User/UserHandler.ashx?action=GetAllJZBossName', valueField: 'text', textField: 'id',
onLoadSuccess: function () {
$(this).combobox('setValue', tmpRowData.Boss);
}
}
}
},
{ field: 'JW', title: '机组经纬度', width: 100, align: 'center',
editor: { type: 'text' }
},
{ field: 'Introduce', title: '机组描述', width: 100, align: 'center',
editor: { type: 'text' }
},
{ field: 'Status', title: '状态', width: 80, align: 'center',
formatter: function (val, row, index) {
var status = row.Status;
var res = '';
if (status == 1) {
return "正常";
} else if (status == 2) {
return "<font color='green'>报警</font>";
} else if (status == 3) {
return "<font color='red'>停机</font>"
}
}
}
]],
queryParams: { action: 'query' }, //查询参数
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
//添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {
}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值
editRow = 0;
//选中首行
datagrid.datagrid('unselectAll');
datagrid.datagrid('selectRow', 0); //选中该行
}
}
}, '-',
{ text: '删除', iconCls: 'icon-remove', handler: function () {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你确定要删除吗?", function (r) {
if (r) {
//获取所有要删除的用户的编号
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].Id);
}
//执行数据删除操作
$.ajax({
url: '/JZ/JZHandler.ashx?action=Delete',
type: 'POST',
data: {
Id: ids.join(',')
},
beforeSend: function () {
$.messager.progress({
text: '正在处理中...'
});
},
success: function (data) {
$.messager.progress('close');
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
if (data.Success) {
datagrid.datagrid('reload');
$.messager.show({
title: '操作提醒',
msg: data.Message
})
} else {
$.messager.alert('删除失败', data.Message, 'warning');
}
}
});
}
});
}
else {
$.messager.alert("提示", "请选择要删除的行", "error");
}
}
}, '-',
{ text: '修改', iconCls: 'icon-edit', handler: function () {
//修改时要获取选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作
if (rows.length == 1) {
//修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//当无编辑行时
if (editRow == undefined) {
//获取到当前选择行的下标
var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑
datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow
editRow = index;
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
}, '-',
{ text: '保存', iconCls: 'icon-save', handler: function () {
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit", editRow);
}
}, '-',
{ text: '取消编辑', iconCls: 'icon-redo', handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, '-'],
onBeforeEdit: function (index, row) {
tmpRowData = row;
},
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件
var inserted = datagrid.datagrid('getChanges', 'inserted');
var updated = datagrid.datagrid('getChanges', 'updated');
if (inserted.length < 1 && updated.length < 1) {
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = '';
if (inserted.length > 0) {
url = '/JZ/JZHandler.ashx?action=Add';
}
if (updated.length > 0) {
url = '/JZ/JZHandler.ashx?action=Update';
}
//更新数据库
$.ajax({
url: url,
type: 'POST',
data: {
'Id': rowData.Id,
'Name': rowData.Name,
'Introduce': rowData.Introduce,
'JTName': rowData.JTName,
'GCName': rowData.GCName,
'Boss': rowData.Boss,
'JW': rowData.JW,
'Status': rowData.Status
},
beforeSend: function () {
$.messager.progress({
text: '正在处理中...'
})
},
success: function (data) {
$.messager.progress('close');
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
if (data.Success) {
datagrid.datagrid("acceptChanges");
$.messager.show({
title: '操作提示',
msg: data.Message
});
editRow = undefined;
datagrid.datagrid("reload");
$('#addcheck').val(1);
} else {
datagrid.datagrid("beginEdit", editRow);
$.messager.alert('警告操作', '未知错误！请重新刷新后提交！', 'warning');
}
datagrid.datagrid("unselectAll");
}
});
},
onDblClickRow: function (rowIndex, rowData) {
datagrid.datagrid('unselectAll');
datagrid.datagrid('selectRow', rowIndex); //选中该行
//双击开启编辑行
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});
</script>
</head>
<body>
<table id="dd">
</table>
</body>
</html>