jquery flexigrid 增加行双击事件
1、在jquery.flexigrid.js文件中添加如下代码:
addRowProp: function() {
var $gF = this.rowProp;
$('tbody tr', g.bDiv).each(
function() {
$("input.itemchk", this).each(function() {
var ptr = $(this).parent().parent().parent();
$(this).click(function() {
if (this.checked) {
ptr.addClass("trSelected");
}
else {
ptr.removeClass("trSelected");
}
if (p.onrowchecked) {
p.onrowchecked.call(this);
}
});
});
$gF.call(this);
//---------添加行双击事件 ------------
$(this).dblclick(
function (e) {
if (p.onRowDblclick){
p.onRowDblclick.call(this);
}
}
);
//------------------------------
}
);
$gF = null;
},
2、在文件最后添加方法:
//---------添加行双击事件 ------------
function callRowDblclick(){
if( $(this).attr("class") == "trSelected" ){
$(this).attr("class","");
$(this).find('input:checkbox').first().attr("checked", false);
}
else{
$(this).attr("class","trSelected");
$(this).find('input:checkbox').first().attr("checked", true);
}
//-------------获取行数据-------------
var rowData = "";
$.each($(this).find('div'),function(i){
rowData+=$(this).text()+",";
});
//alert( rowData );
//---------------------------------------
}
//--------------------------------------------------------
3、在页面flexigrid({})中增加属性
onRowDblclick : callRowDblclick, // 添加行双击事件
onSuccess : onSuccess, // 成功后执行,添加行"操作"
rowhandler : false,
rowbinddata : true
分享到:
相关推荐
除此之外,Flexigrid还支持自定义事件和插件,开发者可以通过监听表格的某些操作,如点击、排序、分页等,来实现更复杂的功能,如数据编辑、删除等。此外,社区提供了许多第三方插件,如导出Excel、打印表格等,...
需要注意的是,由于Flexigrid和Tablesorter都是基于jQuery的插件,它们可能在某些事件处理或CSS样式上存在冲突。为了解决这些问题,我们可能需要对它们的默认行为进行一些调整,比如重写某些CSS规则,或者监听并处理...
双击事件(onRowDblclick)是Flexigrid的一个重要功能,它可以让我们在用户双击某一行时执行特定的操作。例如,你可以打开一个新的页面来编辑选中的记录,或者弹出一个模态对话框来显示详细信息。要设置这个事件,...
**jQuery FlexiGrid JS** 是一个强大的前端数据网格插件,它基于流行的JavaScript库jQuery构建。这个插件允许用户在网页上展示大量数据,并提供排序、分页、搜索和自定义列功能,使得数据管理更加直观和高效。下面将...
- 自定义事件:利用FlexiGrid的事件机制,可以添加自定义的前端验证或后端逻辑。 - 数据缓存:为提高性能,可以考虑使用缓存策略,如ASP.NET的Output Cache或自定义缓存解决方案。 总之,jQuery FlexiGrid结合ASP...
$("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180...
**jQuery Flexigrid JSP Demo 知识点详解** `jQuery Flexigrid` 是一个流行的JavaScript库,用于创建数据网格,具有强大的数据管理和用户交互功能。这个Demo是将Flexigrid与Java服务器页面(JSP)结合使用的一个...
Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: ...
- `query.js`:自定义的Flexigrid界面显示和事件处理脚本。 - `thickbox.js`:用于弹出框的处理。 - `util.js`:扩展Flexigrid的功能,例如条件查询等。 - **Jar 包**:特定版本的Struts2(2.1.6)、Spring、...
1. **jQuery基础**:Flexigrid是建立在jQuery库之上的,因此,理解jQuery的基本语法和API,如选择器、事件处理、DOM操作等,是使用Flexigrid的前提。jQuery简化了JavaScript的DOM操作,使得动态更新表格内容变得更加...
这个控件是jquery封装的一款控件,最初的时候里面东西很少.只是用来显示数据使用的, 传输数据的格式有两种 xml 和 json ,做系统网站上比较用的多, 这个控件也比较好看和实用, 我在网上看到了很多功能但是都很散, 我...
jQuery简化了DOM操作、事件处理和动画效果,使得flexigrid的使用更加简单便捷。通过jQuery,开发者可以快速实现诸如行选择、分页、排序和搜索等功能。 在flexigrid中,一些关键功能包括: 1. **数据分页**:...
最近项目要用jquery开发,于是打算用flexigrid做表格功能,但是遇到了数据不能显示、IE下显示等问题(在FF下显示正常)。于是花了2个小时时间对flexigrid.pack.js进行调试,经过苦闷的两个小时后,皇天不负有心人,...
### JQuery插件FlexiGrid之完全配置与使用 #### 一、引言 FlexiGrid是一款基于jQuery的轻量级表格插件,它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能,如排序、分页、筛选等,非常...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...
FlexiGrid是一款基于jQuery的表格插件,它提供了丰富的功能,包括数据分页、排序、过滤、编辑等,使得在Web应用中展示和操作大量数据变得更加便捷。在本篇文章中,我们将深入探讨FlexiGrid的使用方法,以及如何将其...
Flexigrid是一款基于jQuery的表格插件,它提供了丰富的功能,如数据分页、排序、搜索和自定义列显示,适用于构建数据密集型Web应用。在这个"jquery插件之flexigrid学习实例"中,我们将深入探讨如何在Struts2框架下...
3. 自定义事件:利用flexigrid提供的事件(如`onBeforeLoad`和`onAfterLoad`)进行业务逻辑处理,如数据预处理、错误处理等。 4. 动态列宽:允许用户根据需要调整列宽,增强用户体验。 5. 表格操作:添加行、删除...
Flexigrid是一款基于jQuery的表格插件,它提供了丰富的功能,如数据分页、排序、搜索和自定义列宽等,极大地增强了网页中表格的展示效果和交互性。在"jquery插件之flexigrid学习实例-jar包"中,我们主要关注的是如何...
虽然Flexigrid本身功能强大,但开发者仍可以根据需求进行扩展,例如添加自定义按钮、事件监听、复杂的行操作等。通过挂载事件处理器或修改源代码,可以实现更复杂的功能。 9. **与其他技术的集成** 由于Flexigrid...