`
weishaoxiang
  • 浏览: 96321 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

jquery flexigrid 增加行双击事件

阅读更多

 

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

分享到:
评论

相关推荐

    jquery flexigrid

    除此之外,Flexigrid还支持自定义事件和插件,开发者可以通过监听表格的某些操作,如点击、排序、分页等,来实现更复杂的功能,如数据编辑、删除等。此外,社区提供了许多第三方插件,如导出Excel、打印表格等,...

    jquery flexigrid 支持前台排序

    需要注意的是,由于Flexigrid和Tablesorter都是基于jQuery的插件,它们可能在某些事件处理或CSS样式上存在冲突。为了解决这些问题,我们可能需要对它们的默认行为进行一些调整,比如重写某些CSS规则,或者监听并处理...

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

    双击事件(onRowDblclick)是Flexigrid的一个重要功能,它可以让我们在用户双击某一行时执行特定的操作。例如,你可以打开一个新的页面来编辑选中的记录,或者弹出一个模态对话框来显示详细信息。要设置这个事件,...

    Jquery FlexiGrid JS

    **jQuery FlexiGrid JS** 是一个强大的前端数据网格插件,它基于流行的JavaScript库jQuery构建。这个插件允许用户在网页上展示大量数据,并提供排序、分页、搜索和自定义列功能,使得数据管理更加直观和高效。下面将...

    jquery FlexiGrid与asp.net 后台交互例子

    - 自定义事件:利用FlexiGrid的事件机制,可以添加自定义的前端验证或后端逻辑。 - 数据缓存:为提高性能,可以考虑使用缓存策略,如ASP.NET的Output Cache或自定义缓存解决方案。 总之,jQuery FlexiGrid结合ASP...

    JQuery Flexigrid

    $("#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 JSP Demo 知识点详解** `jQuery Flexigrid` 是一个流行的JavaScript库,用于创建数据网格,具有强大的数据管理和用户交互功能。这个Demo是将Flexigrid与Java服务器页面(JSP)结合使用的一个...

    jquery flexigrid插件

    Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: ...

    Jquery flexigrid使用

    - `query.js`:自定义的Flexigrid界面显示和事件处理脚本。 - `thickbox.js`:用于弹出框的处理。 - `util.js`:扩展Flexigrid的功能,例如条件查询等。 - **Jar 包**:特定版本的Struts2(2.1.6)、Spring、...

    jquery表格插件Flexigrid

    1. **jQuery基础**:Flexigrid是建立在jQuery库之上的,因此,理解jQuery的基本语法和API,如选择器、事件处理、DOM操作等,是使用Flexigrid的前提。jQuery简化了JavaScript的DOM操作,使得动态更新表格内容变得更加...

    jQuery flexigrid 表格控件

    这个控件是jquery封装的一款控件,最初的时候里面东西很少.只是用来显示数据使用的, 传输数据的格式有两种 xml 和 json ,做系统网站上比较用的多, 这个控件也比较好看和实用, 我在网上看到了很多功能但是都很散, 我...

    jquery插件之flexigrid篇

    jQuery简化了DOM操作、事件处理和动画效果,使得flexigrid的使用更加简单便捷。通过jQuery,开发者可以快速实现诸如行选择、分页、排序和搜索等功能。 在flexigrid中,一些关键功能包括: 1. **数据分页**:...

    解决JQuery flexigrid在IE下显示问题,以及数据显示问题

    最近项目要用jquery开发,于是打算用flexigrid做表格功能,但是遇到了数据不能显示、IE下显示等问题(在FF下显示正常)。于是花了2个小时时间对flexigrid.pack.js进行调试,经过苦闷的两个小时后,皇天不负有心人,...

    JQuery_插件FlexiGrid_之完全配置与使用

    ### JQuery插件FlexiGrid之完全配置与使用 #### 一、引言 FlexiGrid是一款基于jQuery的轻量级表格插件,它为开发者提供了简单易用的方式来展示和操作数据表格。FlexiGrid支持多种功能,如排序、分页、筛选等,非常...

    jQuery表格插件 Flexigrid的例子

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...

    jquery插件FlexiGrid的使用(已更新)

    FlexiGrid是一款基于jQuery的表格插件,它提供了丰富的功能,包括数据分页、排序、过滤、编辑等,使得在Web应用中展示和操作大量数据变得更加便捷。在本篇文章中,我们将深入探讨FlexiGrid的使用方法,以及如何将其...

    jquery插件之flexigrid学习实例

    Flexigrid是一款基于jQuery的表格插件,它提供了丰富的功能,如数据分页、排序、搜索和自定义列显示,适用于构建数据密集型Web应用。在这个"jquery插件之flexigrid学习实例"中,我们将深入探讨如何在Struts2框架下...

    jQuery插件flexigrid使用总结--进一步优化

    3. 自定义事件:利用flexigrid提供的事件(如`onBeforeLoad`和`onAfterLoad`)进行业务逻辑处理,如数据预处理、错误处理等。 4. 动态列宽:允许用户根据需要调整列宽,增强用户体验。 5. 表格操作:添加行、删除...

    jquery插件之flexigrid学习实例-jar包

    Flexigrid是一款基于jQuery的表格插件,它提供了丰富的功能,如数据分页、排序、搜索和自定义列宽等,极大地增强了网页中表格的展示效果和交互性。在"jquery插件之flexigrid学习实例-jar包"中,我们主要关注的是如何...

    Jquery仿Ext表格flexigrid

    虽然Flexigrid本身功能强大,但开发者仍可以根据需求进行扩展,例如添加自定义按钮、事件监听、复杂的行操作等。通过挂载事件处理器或修改源代码,可以实现更复杂的功能。 9. **与其他技术的集成** 由于Flexigrid...

Global site tag (gtag.js) - Google Analytics