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