`
joe_zhjiang
  • 浏览: 158797 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

flexigrid 扩展checkbox

阅读更多
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 插件 加入 CheckBox

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。... 本资源是作者根据原flexigrid 进行修改,首列加入CheckBox 的修改版。

    Jquery flexigrid插件 添加checkbox,(双击事件)onRowDblclick

    Flexigrid是一款基于jQuery的强大的数据网格插件,它提供了丰富的功能,如分页、排序、搜索和自定义列。...同时,不断探索和学习Flexigrid的更多功能和扩展性,将有助于开发出更复杂、更高效的网页应用。

    (转)基于jQuery的GridView-Flexigrid(2)-扩展和修复

    在"(转)基于jQuery的GridView-Flexigrid(2)-扩展和修复"这篇博文中,作者可能详细介绍了如何利用Flexigrid进行自定义扩展以及解决在实际应用中遇到的问题。下面,我们将深入探讨Flexigrid的关键特性、扩展方法以及...

    flexigrid.js flexigrid.js flexigrid.js

    7. **插件兼容**:Flexigrid.js可以与其他JavaScript库如jQuery无缝集成,进一步扩展其功能。 8. **性能优化**:尽管Flexigrid.js提供了很多特性,但它的体积相对较小,加载速度快,对页面性能的影响较小。 9. **...

    FlexiGrid配置与使用

    它提供了丰富的配置选项和灵活的扩展性,使得开发者可以根据需求定制表格的行为和样式。 在配置和使用FlexiGrid时,首先要从官方站点(http://www.flexigrid.info/)下载最新版本的FlexiGrid压缩包。解压缩后,主要...

    Flexigrid-master表格插件

    10. **插件扩展**:Flexigrid社区提供了许多插件和扩展,如搜索、导出数据等功能,进一步增强了其功能性和实用性。 综上所述,Flexigrid作为一个优秀的表格插件,通过其丰富的特性,为Web开发人员提供了创建高度可...

    jquery flexigrid

    这种前后端分离的设计模式,使得开发更加模块化,便于维护和扩展。 除此之外,Flexigrid还支持自定义事件和插件,开发者可以通过监听表格的某些操作,如点击、排序、分页等,来实现更复杂的功能,如数据编辑、删除...

    jquery插件之flexigrid篇

    Flexigrid是一款基于jQuery的轻量级数据网格插件,专为实现强大的表格展示和操作功能而设计。在Web开发中,特别是在构建数据密集型应用时,它提供了一种高效且用户友好的方式来显示、排序、筛选和操作数据。这款插件...

    FlexiGrid(js版本)

    - **插件支持**:FlexiGrid允许扩展使用第三方插件,增强其功能,如导出数据为CSV或Excel格式。 - **性能优化**:对于大数据量的场景,可以使用服务器端分页和虚拟滚动技术来提高性能。 - **自定义主题**:通过...

    flexigrid表格功能丰富

    Flexigrid是一款基于jQuery的强大的表格插件,它提供了丰富的功能和灵活的配置选项,使得在Web应用中创建和管理表格变得更为简单。在“flexigrid表格功能丰富”这一主题下,我们可以深入探讨Flexigrid的核心特性以及...

    flexigrid,数据显示控件

    1. 插件扩展:Flexigrid具有良好的扩展性,开发者可以编写自定义插件来增强其功能,如导出表格数据、导入Excel等。 2. 性能优化:对于大数据量的场景,可以通过分页、延迟加载等策略减轻前端负担,提升用户体验。 ...

    Flexigrid demo

    Flexigrid demo

    jquery表格插件Flexigrid

    6. **功能扩展**:Flexigrid提供了丰富的功能,如分页、排序、搜索、行选择等。开发者可以通过配置参数开启或关闭这些功能,也可以通过插件的API实现更复杂的行为,如自定义按钮、动态添加或删除行等。 7. **响应式...

    flexigrid相关

    Flexigrid是一款基于jQuery的轻量级数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,包括排序、分页、搜索、列宽调整等,使得数据管理更加直观和高效。在“flexigrid.js”和“flexigrid.css”这...

    flexigrid列表控件

    3. **Checkbox选择框**:增加checkbox选择框是Flexigrid的一个重要特性,它允许用户批量选择表格中的行,这对于数据操作如删除、编辑或导出非常有用。开发者需要理解如何在列定义中启用复选框,以及如何绑定相关的...

    扩展flexigrid对webservice的支持

    基于插件本身只支持php模式的局限性,扩展了flexigrid对webservice方法的支持,可以直接通过配置webservice的路径,方法名,参数进行数据获取。

    flexigrid表格插件

    5. **可扩展**:Flexigrid的API允许开发者添加自定义功能,如按钮、链接或复杂的操作。 6. **AJAX支持**:通过AJAX技术动态加载数据,提高用户体验,避免了页面刷新导致的数据丢失。 7. **响应式设计**:随着设备...

    含源代码的flexigrid JS grid控件

    Flexigrid是一款强大的JavaScript网格控件,用于在Web应用程序中展示和操作数据。它以其高度可定制性、灵活的数据操作和响应式设计而备受开发者喜爱。这个“含源代码的flexigrid JS grid控件”提供了完整的源码,...

    FlexiGrid使用手册

    FlexiGrid是一个基于jQuery的网格组件,用于展示和操作数据,具有丰富的特性和自定义功能。这个使用手册将详细介绍如何使用FlexiGrid以及其主要属性。 一、FlexiGrid概述 FlexiGrid是一个轻量级的JavaScript插件,...

    Flexigrid-插件

    这个插件的主要特点是灵活性、可扩展性和易用性,使得开发者能够轻松地创建功能完备的数据展示界面。下面我们将深入探讨Flexigrid的关键特性、使用方法以及与其他jQuery表格插件的比较。 1. **主要特性** - 分页:...

Global site tag (gtag.js) - Google Analytics