力軟敏捷框架 jfGrid 使用例子之一

百度了下關於力軟敏捷框架 jfGrid的教程，基本沒有，出來的全是jqGrid。好吧看來只能自己上手了

今天來講講列設置屬性里數據格式化事件（formatter）的使用

 

常規的使用方式如上圖所示。

先來說說各個參數的意思：

cellvalue 當前單元格的數據值，也就是你賦的值是什么就是什么。

row 是當前行的值，這個能獲取當前行的各個列的數據。

op 是當前jfGrid初始化的時候所有的設置數據值，就是  $('#id').jfGrid(op)  中的op。這個參數基本用不太到，至少我使用里是這樣的。

$cell  單元格的dom 對象，這個就比較有用了，我的很多功能都可以通過它來實現。比方說上圖中的例子也可以寫成

formatter:function(cellvalue,row,op,$cell){
        if(cellvalue){
             $cell.text(cellvalue);      
        } 
        else{
             $cell.html('<span class=\"label label-danger\">未使用</span>')
        }           
} 

 兩個效果是一樣的。

 通過$cell 還可以來改變單元格的顏色和字體的顏色，比方 $cell.css('background-color','red') / $cell.css('color','red')

 最后實現一個設置操作按鈕的方法

formatter: function (value, row, op, $cell) {
    var $div = $('<div></div>');
        for (var i = 0, l = 5; i < l; i++) {
            var $hbtn = $('<span class=\"label label-info\" style=\"cursor: pointer;margin-right:8px;\">按鈕' + (i + 1) + '</span>');
            $hbtn.on('click', function () {
                var name = $(this).text();
                alert(name);
            });
            $div.append($hbtn);
        }


        return $div;
}

效果：

 

 

最后祝大家項目順利。