flexigrid 如何加上 checkbox

怎么在flexigrid里面加上checkbox呢？就这个问题，我们来看看：

 

首先，我们对flexigrid里面的代码进行一下修改：

                    //下面是原代码
         //$('div:eq(' + n + ')', g.cDrag).css({ 'left': cdpos + 'px' }).show();
                   
                    //添加多选框 [修改后代码 时间：2011-04-08]------------开始----------第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();
                     }
                     //添加多选框 [修改后代码 时间：2011-04-08]------------结束----------第1处-----

 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

在修改第二处时：找到　//add cell　　这段代码,找到之后,在//add cell后面插入如下段代码

          //add cell
                         //添加多选框 [修改后代码 时间：2011-04-08]------------开始----第2处-----------
                        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);

                         }
                         //添加多选框 [修改后代码 时间：2011-04-08]------------结束----第2处-----------

 

也就是在$('thead tr:first th', g.hDiv).each　这段代码的上面。

 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 

                                    //添加多选框 [修改后代码 时间：2011-04-08]------------开始-------第3处--------
                                     if(p.checkbox){
                                         if($(this).hasClass('trSelected')){
                                         $(this).find('input')[0].checked=true;
                                        }
                                     else{
                                        $(this).find('input')[0].checked=false
                                        }
                                     }
                                     //添加多选框 [修改后代码 时间：2011-04-08]------------结束-------第3处--------

这是第三处需要修改的代码，在$(this).toggleClass('trSelected');这段代码的下面,if (p.singleSelect) $(this).siblings().removeClass('trSelected');这段代码的上面,代码是放在addRowProp: function ()　这个函数里面。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

     //添加多选框 [修改后代码 时间：2011-04-08]------------开始--------第4处-------
     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);

                 })
     };
     //添加多选框 [修改后代码 时间：2011-04-08]------------结束--------第4处-------

 

这是第四处代码，也是最后一处需要修改的代码，找到如下代码：$('th div', g.hDiv).each　在找到它之后，放在 cn++;});这段代码的后面，也就是if ($.browser.msie && $.browser.version < 7.0)　这段代码之后。

 

总共就是需要修改这么几个地方，下面附张最后的效果图片：