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