返回官网

如何在flexigrid 中增加checkbox选择框

狒狒 2017-8-28 技术札记 1127 次

对flexigrid里面的代码进行一下修改:

第一步

          在flexigrid.js文件中找到以下代码 并屏蔽掉它
         //$('div:eq(' + n + ')', g.cDrag).css({
        // 'left': cdpos + 'px'
        // }).show();


        改成一下代码

                /*增加checkbox 1*/

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

 

第二步

     找到 $('thead tr:first th', g.hDiv).each(//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: "19"}).append(cthch);
                     $(tr).prepend(cth);

                   }

 

第三步                  

 

     $(this).toggleClass('trSelected');

     ....(添加新增代码).....

    if (p.singleSelect) $(this).siblings().removeClass('trSelected'); 


新增代码为                

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

                      }


代码放在addRowProp: function ()函数里面



第四步

在 

  $('th div', g.hDiv).each(function () {
var kcol = $("th[axis='col" + cn + "']", g.hDiv)[0];
var chk = 'checked="checked"';
if (kcol.style.display == 'none') {
chk = '';
}
$('tbody', g.nDiv).append('<tr><td class="ndcol1"><input type="checkbox" ' + chk + ' class="togCol" value="' + cn + '" /></td><td class="ndcol2">' + this.innerHTML + '</td></tr>');
cn++;
});

  ....(添加新增代码).....


if ($.browser.msie && $.browser.version < 7.0) $('tr', g.nDiv).hover(function () {


新增代码为   

 

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

发表评论

Copyright © 2016 DEWEBSTUDIO