EasyUI DataGrid 基于 Ajax 自定义取值(loadData)
为 datagrid 加载数据分两种情况：
- 一种是基于 Ajax 请求获取数据然后通过"loadData"方法来赋值；
- 另一种是直接使用 datagrid 自带的"load"方法向服务端发起请求。
无论采取哪一种方式，通常建议将 datagrid 的定义（Init）和加载（Load）分作两个方法来撰写。
以下总结一下使用 Ajax 方法加载 datagrid 的使用过程。
一、纯JS本地赋值
这种方式没有 Ajax 异步请求，数据是来自于其他控件或者是在本地自行组织。
1、样式
<!-- 单页面样式 -->
<style type="text/css">
/* 当标签文本过长时，可灵活调整宽度 */
.SearchForm .grid_1 {
width: 18.333%;
}
.SearchForm .grid_2 {
width: auto !important;
}
#maintainForm .grid_2 {
/*width: 12.333%;*/
}
</style>
2、JSP 片段
<div id="rationPackageExceedDatagrid"></div>
<div id="rationPackageExceedDatagridToolbar" class="ToolbarArea ">
<!-- 操作区 按钮 -->
<%--<div class="OperationRow">--%>
<table cellpadding="0" cellspacing="0" style="width: auto;">
<tr>
<td>
<%--<a id="btnAddEditDatagrid" href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:false">添加</a>--%>
</td>
<td>
<%--<div class="dialog-tool-separator"></div>--%>
</td>
</tr>
</table>
<%--</div>--%>
<!-- 查询区 表单 -->
<div class="container_12 SearchRow">
<form id="rationPackageExceedDatagridSearchForm" class="SearchForm" method="get">
<%--<div class="clear" title="换行标记"></div>--%>
<div class="grid_1 label">总超出额：</div>
<div class="grid_2 value">
<span id="lblRationExcessAmounts_rationPackageExceedDatagridSearchForm">￥0.00</span>
</div>
</form>
</div>
</div>
这里包含一个 datagrid 和一个与之配套的 toolbar。
3、js 初始化
可以注意，这个函数是以 Init- 打头。
function InitRationPackageExceedDatagrid() {
$rationPackageExceedDatagrid.datagrid({
title: '',
fit: true,
fitColumns: false, // 设置列固定宽度，true值表示自动填满整个横向空间
toolbar: "#rationPackageExceedDatagridToolbar",
idField: 'projectPartId',
frozenColumns: [[{
field: 'ck',
checkbox: true
}// 选择
]],
//
columns: [[
{field: 'projectPartName', title: '分项名称', width: 180, sortable: false},
{field: 'rationLimitedQuantity', title: '套餐限定数量', width: 100, sortable: false, align: 'right'},
{
field: 'actualQuantity', title: '实际所需数量', width: 100, sortable: false, align: 'right',
styler: function (value, row, index) {
// 当实际所需数量 大于 套餐限定数量，则采取“加粗标红”显示。
if (row.actualQuantity > row.rationLimitedQuantity) {
return "color:#AE1027;font-weight:bold;";
}
}
},
{
field: 'rationExcessQuantity', title: '超出数量', width: 100, sortable: false, align: 'right',
formatter: function (val) {
if (val != null) {
return Number(val).toFixed(2);
} else {
return val;
}
}
},
{
field: 'projectPartUnitPrice', title: '单价(元)', width: 90, sortable: false, align: 'right',
formatter: function (val) {
if (val != null) {
return '￥' + Number(val).toFixed(2);
} else {
return val;
}
}
},
{
field: 'rationExcessAmount', title: '超出额(元)', width: 100, sortable: false, align: 'right',
formatter: function (val) {
if (val != null) {
return '￥' + Number(val).toFixed(2);
} else {
return val;
}
}
}
]],
onLoadSuccess: function (data) {
console.info("rationPackageDatagrid onLoadSuccess.");
// 针对不同按钮个性化处理
//$(this).datagrid("clearChecked");
//$(this).datagrid("clearSelections");
},
onDblClickRow: function (rowIndex, rowData) {
console.info("rationPackageDatagrid onDblClickRow.");
},
onSelect: function (rowIndex, rowData) {
console.info('rationPackageDatagrid onSelect');
// 确保没有任何缓存痕迹（必不可少）
// 要点提示：在点击选中新的一行时，使其只勾选当前行，故先清除所有历史勾选项，让勾选项与选中项同步。
$(this).datagrid("clearChecked");
$(this).datagrid("checkRow", rowIndex);
}
}); // end rationPackageExceedDatagrid
}
4、赋值
通过 loadData 方法就可以直接赋值了，无论是给予一个空数组，还是一个有效的数组。要注意的是，在清空 datagrid 时，其对象值最好是这个格式：“{total: 0, rows: []}”
// 清空
$rationPackageExceedDatagrid.datagrid('loadData', {total: 0, rows: []});
$rationPackageExceedDatagrid.datagrid("clearChecked");
$rationPackageExceedDatagrid.datagrid("clearSelections");
var rationPackageExceedDataArray = [];
// 对数组进行赋值等处理...
// 定额套餐分项-超出额 datagrid
$rationPackageExceedDatagrid.datagrid('loadData', rationPackageExceedDataArray);
二、通过 Ajax 赋值（treegrid）
以下示例没有找到 datagrid，只有 treegrid，好在整体的操作几乎差不多，最终的赋值操作也相同。
1、JSP 片段
<div id="ProjectPartCategoryAndItemDatagrid" style="width:auto;"></div>
2、js 初始化
// 初始化表格
function initDataGrid() {
$datagrid.treegrid({
idField: 'projectPartId',
treeField: 'projectPartName',
singleSelect: false,
animate: true,
lines: true,
//toolbar: "#generalDatagridToolbar",
checkbox: true,
cascadeCheck: true,
fit: true,
fitColumns: false, // 设置列固定宽度，true值表示自动填满整个横向空间
frozenColumns: [[
{field: 'ck', checkbox: true},
{field: 'projectPartName', title: '工程分项', width: 230, sortable: false}
]],
columns: [[
{field: 'projectPartCode', title: '工程分项编码', width: 100, sortable: false}
]],
onLoadSuccess: function (row, data) {
console.info("ProjectPartCategoryAndItemDatagrid onLoadSuccess.");
$(".tooltipNote").tooltip({});
},
onClickRow: function (row) {
var idField = $(this).treegrid('options').idField;
console.info("clickRow，" + idField + " = " + row[idField]);
console.info(row);
//级联选择
$(this).treegrid('cascadeCheck', {
id: row[idField], //节点ID
deepCascade: true //深度级联
});
},
onDblClickRow: function (row) {
console.info("ProjectPartCategoryAndItemDatagrid onDblClickRow.");
var idField = $(this).treegrid('options').idField;
var id = row[idField];
// 切换节点的 展开/折叠 状态
$datagrid.treegrid('toggle', id);
},
onContextMenu: function (e, row) {
console.info("ProjectPartCategoryAndItemDatagrid onContextMenu.");
//var idField = $(this).treegrid('options').idField;
//var id = row[idField];
//
//e.preventDefault();
//$(this).treegrid('select', id);
//
//$('#editMenu').menu('show', {
// left: e.pageX,
// top: e.pageY
//});
}
})
}
3、赋值
通过 jQuery 的 ajax() 方法获取到数据后，由 loadData 方法即可绑定数据。
// 加载数据
function loadDataGrid() {
console.info('加载表格 ProjectPartCategoryAndItemDatagrid');
$.ajax({
type: 'POST',
dataType: 'JSON',
url: UrlEnum.GetProjectPartCategoryAndItem,
//async: false, // 同步
data: {},
success: function (result) {
console.info("获取数据成功，返回的数据为：↓");
console.info(result);
if (result.success) {
console.info(result.data);
$datagrid.treegrid('loadData', result.data);
}
else {
if (result.operationType == operationTypeEnum.CookieTimeout) {
result.message = decodeURIComponent(result.message);
}
$.messager.alert('提示', result.message, 'warning');
}
}
});
}
