flexigrid 扩展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="' + row._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);
}ss
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,//是否要多选框
分享到:
相关推荐
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。... 本资源是作者根据原flexigrid 进行修改,首列加入CheckBox 的修改版。
Flexigrid是一款基于jQuery的强大的数据网格插件,它提供了丰富的功能,如分页、排序、搜索和自定义列。...同时,不断探索和学习Flexigrid的更多功能和扩展性,将有助于开发出更复杂、更高效的网页应用。
在"(转)基于jQuery的GridView-Flexigrid(2)-扩展和修复"这篇博文中,作者可能详细介绍了如何利用Flexigrid进行自定义扩展以及解决在实际应用中遇到的问题。下面,我们将深入探讨Flexigrid的关键特性、扩展方法以及...
7. **插件兼容**:Flexigrid.js可以与其他JavaScript库如jQuery无缝集成,进一步扩展其功能。 8. **性能优化**:尽管Flexigrid.js提供了很多特性,但它的体积相对较小,加载速度快,对页面性能的影响较小。 9. **...
它提供了丰富的配置选项和灵活的扩展性,使得开发者可以根据需求定制表格的行为和样式。 在配置和使用FlexiGrid时,首先要从官方站点(http://www.flexigrid.info/)下载最新版本的FlexiGrid压缩包。解压缩后,主要...
10. **插件扩展**:Flexigrid社区提供了许多插件和扩展,如搜索、导出数据等功能,进一步增强了其功能性和实用性。 综上所述,Flexigrid作为一个优秀的表格插件,通过其丰富的特性,为Web开发人员提供了创建高度可...
这种前后端分离的设计模式,使得开发更加模块化,便于维护和扩展。 除此之外,Flexigrid还支持自定义事件和插件,开发者可以通过监听表格的某些操作,如点击、排序、分页等,来实现更复杂的功能,如数据编辑、删除...
Flexigrid是一款基于jQuery的轻量级数据网格插件,专为实现强大的表格展示和操作功能而设计。在Web开发中,特别是在构建数据密集型应用时,它提供了一种高效且用户友好的方式来显示、排序、筛选和操作数据。这款插件...
- **插件支持**:FlexiGrid允许扩展使用第三方插件,增强其功能,如导出数据为CSV或Excel格式。 - **性能优化**:对于大数据量的场景,可以使用服务器端分页和虚拟滚动技术来提高性能。 - **自定义主题**:通过...
Flexigrid是一款基于jQuery的强大的表格插件,它提供了丰富的功能和灵活的配置选项,使得在Web应用中创建和管理表格变得更为简单。在“flexigrid表格功能丰富”这一主题下,我们可以深入探讨Flexigrid的核心特性以及...
1. 插件扩展:Flexigrid具有良好的扩展性,开发者可以编写自定义插件来增强其功能,如导出表格数据、导入Excel等。 2. 性能优化:对于大数据量的场景,可以通过分页、延迟加载等策略减轻前端负担,提升用户体验。 ...
Flexigrid demo
6. **功能扩展**:Flexigrid提供了丰富的功能,如分页、排序、搜索、行选择等。开发者可以通过配置参数开启或关闭这些功能,也可以通过插件的API实现更复杂的行为,如自定义按钮、动态添加或删除行等。 7. **响应式...
Flexigrid是一款基于jQuery的轻量级数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,包括排序、分页、搜索、列宽调整等,使得数据管理更加直观和高效。在“flexigrid.js”和“flexigrid.css”这...
3. **Checkbox选择框**:增加checkbox选择框是Flexigrid的一个重要特性,它允许用户批量选择表格中的行,这对于数据操作如删除、编辑或导出非常有用。开发者需要理解如何在列定义中启用复选框,以及如何绑定相关的...
基于插件本身只支持php模式的局限性,扩展了flexigrid对webservice方法的支持,可以直接通过配置webservice的路径,方法名,参数进行数据获取。
5. **可扩展**:Flexigrid的API允许开发者添加自定义功能,如按钮、链接或复杂的操作。 6. **AJAX支持**:通过AJAX技术动态加载数据,提高用户体验,避免了页面刷新导致的数据丢失。 7. **响应式设计**:随着设备...
Flexigrid是一款强大的JavaScript网格控件,用于在Web应用程序中展示和操作数据。它以其高度可定制性、灵活的数据操作和响应式设计而备受开发者喜爱。这个“含源代码的flexigrid JS grid控件”提供了完整的源码,...
FlexiGrid是一个基于jQuery的网格组件,用于展示和操作数据,具有丰富的特性和自定义功能。这个使用手册将详细介绍如何使用FlexiGrid以及其主要属性。 一、FlexiGrid概述 FlexiGrid是一个轻量级的JavaScript插件,...
这个插件的主要特点是灵活性、可扩展性和易用性,使得开发者能够轻松地创建功能完备的数据展示界面。下面我们将深入探讨Flexigrid的关键特性、使用方法以及与其他jQuery表格插件的比较。 1. **主要特性** - 分页:...