JQuery EasyUI 根據數據動態生成datagrid

function load(sdate) {
    $.getJSON("workorder/statistics.do", {
        sdate : sdate+'-01'
    }, function(resp) { //獲取數據源
        var columns = new Array(); //定義列集合
        var row = resp.rows[0];        //獲取首行數據

        //根據首行數據創建columns配置
        $.each(row, function(i, v) {
            if (i != "username") {
                var column = {};
                column["title"] = "" + i;//我這裏默認用鍵值做title,一般可以根據鍵值自定義
                column["width"] = 25;
                column["field"] = "" + i;//數據的鍵值就是field
                column["align"] = "center";
                column["styler"] = function(value) {
                    var d = new Date(sdate+'-' + i);
                    if (d.getDay() == 6 || d.getDay() == 0) {
                        return "background:#DDD";
                    }

                    if (value == 1) {
                        return "background:#CCFF33";
                    }

                };
                column["formatter"] = function(value) {
                    return " ";
                };
                columns.push(column);//放入定義數組
            }
        });

        //實例化一個datagrid
        $('#statistics').datagrid({
            toolbar : "#searchBar",
            rownumbers : true,
            singleSelect : true,
            fit : true,
            striped: true,
            onSelect : function(rowIndex) {
                $(this).datagrid("unselectRow", rowIndex);
            },
            frozenColumns : [ [ {
                title : '姓名',
                field : 'username',
                width : 60,
                align : "center"
            } ] ],
            columns : [ [ {
                colspan : columns.length,
                title : "<b>"+sdate+"月  部門人員任務分配情況</b>"
            } ], columns ]
        }).datagrid("loadData", resp.rows);//實例化之後立刻載入數據源
    });
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章