如何在flexigrid 中增加checkbox选择框
对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
}
}
第四步
在
$('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);
})
};
继续浏览:
发表评论