Power soft agile framework jfGrid use one example

Under Baidu tutorial on soft power jfGrid agile framework, the basic no, out of all jqGrid. Well, it seems only to get started yourself

Today Laijiangjiang column to use the property in the event of data format (formatter) of

 

Conventional use as shown in Fig.

First is that the meaning of each parameter:

cellvalue current data value of the cell, that is, you assign the value of what it is.

value of the current row is the row, each column of data that can be acquired in the current row.

op is currently jfGrid initialization of all the setting data value is $ ( '# id'). op (op) in jfGrid. The basic argument is unlikely to use, I use at least in the case.

$ Cell cell dom objects, this is more useful, many of my functions can be achieved through it. For example in the figure above example can also be written as

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

 Two effects are the same.

 Since cells may change color and font color by $ cell, for example $ cell.css ( 'background-color', 'red') / $ cell.css ( 'color', 'red')

 Finally, implementation of a setting operation button

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

effect:

 

 

Finally I wish you smooth project.