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

            }

        }

    });

}

巴特西