为 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\');
}
}
});
}