flexigrid 修改json格式

1.修改默认的json格式为key:value

修改前

rows: [{id:'ZW',cell:['ZW','ZIMBABWE','Zimbabwe','ZWE','716']},{id:'ZW',cell:['ZW','ZIMBABWE','Zimbabwe','ZWE','716']}]

修改后

rows: [{id:'1',name:'Anson',sex:'男',email:'chents@gpcsoft',qq:'75526201'},{id:'2',name:'Anson',sex:'男',email:'chents@gpcsoft',qq:'75526201'}]

源码修改说明

  找到 if (p.dataType=='json')  

将其后的大括号{}内容改为：

$.each     (     data.rows,     function(i,row)     {     var tr = document.createElement('tr');     if (i % 2 && p.striped) tr.className = 'erow';
    if (row.id) tr.id = 'row' + row.id;
    //by anson QQ:75526201 [email protected]  转载请保留 var tdVal = [];
    //给每行添加id     if (p.rowId){
    $.each( data.rows[i], function(x,y){
    if(p.rowId==x){tr.setAttribute('id',y);     }

})     }
    if (p.colModel){
    for (j=0;j<p.colModel.length;j++){
    var cm = p.colModel[j];     //取列名 var seleceName = cm.name;     //过滤key     $.each( data.rows[i], function(x,y){
    if(seleceName==x){tdVal.push(y)}
    })
    }     }
    //add cell     $('thead tr:first th',g.hDiv).each     (     function ()     {
    var td = document.createElement('td');     var idx = $(this).attr('axis').substr(3);     td.align = this.align;     td.innerHTML = tdVal[idx];     //td.innerHTML = row.cell[idx];     $(tr).append(td);     td = null;     }     );
    if ($('thead',this.gDiv).length<1) //handle if grid has no headers     {

for (idx=0;idx<cell.length;idx++)     {     var td = document.createElement('td');     //td.innerHTML = row.cell[idx];     td.innerHTML = tdVal[idx];     $(tr).append(td);     td = null;     }     }
    $(tbody).append(tr);     tr = null;     }     );

2.加入checkbox

 

只要设置checkbox:true即可在前面显示多选框

源码修改说明

a.找到 $('div:eq('+n+')',g.cDrag).css({'left':cdpos+'px'}).show();

替换为:

//添加多选框 if (p.checkbox) { $('div:eq('+n+')',g.cDrag).css({'left':cdpos+22+'px'}).show(); } else{ $('div:eq('+n+')',g.cDrag).css({'left':cdpos+'px'}).show(); }

b.找到//add cell

前面插入:

//添加多选框 if (p.checkbox) {

var cth = $('<th/>');
    var cthch = $('<input type="checkbox" value="' + $(tr).attr('id') +'"/>');
    var objTr = $(tr);
    cthch.addClass("noborder").click(function(){
    if(this.checked){

objTr.addClass('trSelected');     }     else{     objTr.removeClass('trSelected');     }     })
    cth.addClass("cth").attr({ width: "22"}).append(cthch);

$(tr).prepend(cth);

    }

c.找到$(this).toggleClass('trSelected');

后面插入:

//添加多选框 if(p.checkbox){ if($(this).hasClass('trSelected')){ $(this).find('input')[0].checked=true; } else{ $(this).find('input')[0].checked=false } }

d.找到if ($('th',g.hDiv).length)

在其后的{}大括号中加入

//添加多选框 if (p.checkbox) {     $('tr',g.hDiv).each(     function(){

var cth = $('<td/>');
    var cthch = $('<input type="checkbox"/>');
    cthch.click(function(){     if(this.checked){     $('tbody tr',g.bDiv).each(function(){     $(this).addClass('trSelected').find('input')[0].checked=true;     })     }     else{
    $('tbody tr',g.bDiv).each(function(){     $(this).removeClass('trSelected').find('input')[0].checked=false;     })     }     })
    cth.addClass("cth").attr({ width: "22" }).append(cthch);
    $(this).prepend(cth);
    })     };

e.找到p = $.extend({

添加一条默认设置

checkbox:false,//是否要多选框