EasyUI datagrid 使用小結

用了 EasyUI 框架一段時間了，這個前端框架用起來還是挺方便的，也有很多現成的控件，看看官方文檔應該還是能比較快用起來的。
在這裏記錄一下一些常用的控件的方法，遇到過的bug或者當初耗了一點時間來實現的功能吧。

---

1. datagrid 跳到指定頁

var pager = $('#dg').datagrid('getPager'); // 獲取分頁Paper對象
var pageSize = pager.data("pagination").options.pageSize;   // 獲取當前設置的頁面尺寸，即每頁顯示多少條數據
var pageNum = pager.data("pagination").options.pageNumber;  // 獲取當前頁碼
pager.pagination('select', pager.data("pagination").options.pageNumber + 1);    // 選擇下一頁

吐槽一下……
這個我一直找 datagrid 找不到跳轉到某一頁的方法，後來仔細看發現 datagrid 的分頁是通過 pagination 這個控件實現的，於是看 pagination 的相關文檔就好了。
以後也要注意呀~~

2. datagrid toolbar 的顯示與隱藏

隱藏整個工具欄： $('div.datagrid-toolbar').hide();
隱藏第一個按鈕： $('div.datagrid-toolbar a').eq(0).hide();
顯示則用 show();

3.

加載 datagrid 數據的代碼要等頁面加載完後再調用，否則如果用 onBeforeLoad 添加參數的時候有些值會取不到。
而且在頁面沒加載完時就調用的話，會引發向後臺發送兩次請求的bug。

4. datagrid 裏面嵌入 checkbox

PS： 注意一點， datagrid 列的 formatter 方法是可以直接返回 html 代碼的，這樣就很簡單了。

columns: [[
    ...

    {
        field: 'ShareGroup', title: '推送標配羣', width: 200, sortable: false,
        formatter: function (value, rowData, rowIndex) {
            return "<div id='checkbox-div-" + rowIndex + "'>" +
                "<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-0'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='0' onchange='changeCheckboxColor(" + rowIndex + ")' />小學</label>" +
                "<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-1'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='1' onchange='changeCheckboxColor(" + rowIndex + ")' />初中</label>" +
                "<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-2'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='2' onchange='changeCheckboxColor(" + rowIndex + ")' />高中</label>" +
                "<label class='field-checkbox'><input id='ShareGroup-" + rowIndex + "-3'" + " name='ShareGroup-" + rowIndex + "'" + " type='checkbox' value='3' onchange='changeCheckboxColor(" + rowIndex + ")' />幼兒</label>" +
                "</div>";
        }
    },

    ...
]]

5. 使用 datagrid 後在 IE8 下出現 rowspan 爲空或不是對象錯誤

解決辦法看這篇文章：JQueryEasyUI IE8出現rowspan爲空或不是對象

6. 改變行/列的樣式

...
{
    field: 'Price1', title: "單價(元)", width: 40, sortable: true,
    // 改變列的樣式
    styler: function (value, rowData, rowIndex) {
        if (rowIndex != 0 || $("#queryEmployee").combobox("getValue") > 0) {
            return 'background-color:#CCFF99;';
        }
    }
}
...

// 給第一行的彙總添加不同的樣式以突出顯示
rowStyler: function (index, row) {
    if (index == 0 && $("#queryEmployee").combobox("getValue") == -1) {
        return 'background-color:#AAFFEE;';
    }
},

7. datagrid 獲取選中行的索引

沒有直接的方法，要繞一下。

var row = $('#dg').datagrid('getSelected');
var rowIndex = $('#dg').datagrid('getRowIndex', row);

8. 一個bug：分頁後，選中一行，再點刷新按鈕，就會全選所有項

可能的原因：datagrid 的 idField 沒有寫對