JQueryEasyUI學習筆記（十二）datagrid 提示、格式化表格、表格按鈕（附源碼）

歡迎大家轉載，轉載請注明出處！

希望這個筆記對自己和大家有用，但是本人水平有限，如果出錯的地方，希望大家指出，多多批評，謝謝！

今天是datagrid框架的提示、格式化表格、表格按鈕：

今天還是datagrid的使用，因為其屬性方法太多，也說不完了，多多看看官網的示例和demo吧：官網示例

列樣式代碼：

styler: function (value, rowData, index) {//設置列樣式（列屬性API），value列的值，index列索引，rowData行數據
                        if (index < 3) {
                            return 'background-color:#ffee00;color:red;';
                        }
                    }

 

行樣式代碼：

rowStyler: function (index, row) {//與列樣式用法相同
                if (row.code == 001) {
                    return 'background-color:#6293BB;color:#fff;';
                }
            }

 

formatter方法使用：

formatter: function (value, rowData, index) {//value：字段的值。rowData：行數據。rowIndex：行索引。
                        return "<span title='" + value + "'>" + value + "<span>";//實現鼠標放到單元格上時的提示
                        //return "*****";//實現顯示星號樣式
                    }
formatter: function (value, rowData, index) {//value：字段的值。rowData：行數據。rowIndex：行索引。
                        return "<button onclick='clickFunc(" + index + ");'>操作</button>";//將索引傳給方法，可以選中該行
                    }

//操作點擊方法
    function clickFunc(index) {
        var rows = $("#dg").datagrid("getRows");
        alert(rows[index].addr); //獲得點擊行數據，即可進行操作
    }

 

示例圖：

源代碼：源碼下載