修改jQuery表格插件flexigrid源码添加自定义功能（2）

灵活调整flexigrid表格插件：自定义功能与行双击事件

最新推荐文章于 2025-05-26 16:53:33 发布

iteye_7527

最新推荐文章于 2025-05-26 16:53:33 发布

阅读量171

点赞数

文章标签： javascript ViewUI

本文详细介绍了如何修改flexigrid表格插件的源码，实现自定义功能及针对行的双击事件处理。通过分析代码片段，读者能理解如何为表格单元添加特定事件处理器，以及如何扩展表格对象的功能，以增强用户体验。重点展示了为行元素添加鼠标双击事件处理，包括样式变化和自定义回调函数的应用。

还是在上文《修改jQuery表格插件flexigrid源码添加自定义功能（1）》提到的那个位置添加代码，我们也可以将代码加在上文提到的代码后面：

if(p.colModel[idx].handler){
    $(td).click(function(){
        p.colModel[idx].handler.call(this, g, i);
    });
}

这里首先判断colModel的定义里是否包含鼠标单击事件处理函数handler，如果包含，则为元素（td）添加鼠标单击事件。函数的调用使用了javascript原生的call方法，第一个参数指定了handler函数的调用者，此处用this即用户点击的td元素。第二个参数是表格类对象，第三个是索引，标明被单击的单元处于整个表格的第几行。

如果不熟悉call方法，建议读者可以找点别的资料看看，这个相对来说还是比较简单的。this关键字对于初学者来说略显复杂，总的来说，一个函数内部的this指代的就是这个函数的实际调用者，而且可以认为this总是处在某个函数内部的。笔者会找个时间专门写篇文章分享一下自己的见解。

前面讲解的都是针对表格单元的自定义功能，其实对flexigrid别的方面进行修改也是很容易的，比如针对整行或整列的修改，举个具体的例子，比如说增加针对行的鼠标双击处理事件。我们只需找到表格对象g的addRowProp方法（666行左右），顾名思义，这是一个为“行”元素添加属性的方法。查看其代码，发现其实就是遍历表格的每一行，利用jquery的链式语法，分别添加鼠标单击、鼠标键按下、抬起、以及hover的函数，控制各行在选中或未被选中的状态下，样式上的一点变化。我们可以在链式调用的最后，加上一个新的函数：

$(this).click(function (e) {
        var obj = (e.target ||e.srcElement);
        if (obj.href || obj.type)
                return true;
        $(this).toggleClass('trSelected');
        if (p.singleSelect)
                $(this).siblings().removeClass('trSelected');
}).mousedown(function (e) {
        if (e.shiftKey) {
                $(this).toggleClass('trSelected');
                g.multisel= true;
                this.focus();
                $(g.gDiv).noSelect();
        }
}).mouseup(function () {
        if (g.multisel) {
                g.multisel= false;
                $(g.gDiv).noSelect(false);
        }
}).hover(function (e) {
        if (g.multisel) {
                $(this).toggleClass('trSelected');
        }
        //新增鼠标双击事件处理，并且将行元素作为参数传递给事件处理函数
},function() {}).dblclick(  
        function () {
                if (p.onRowDblclick){
                        p.onRowDblclick.call(this,this);
                }
        }
);

在这个函数中，我们判断表格属性的定义p中（p的解释详见上文）是否存在双击事件处理函数的定义，笔者给这个属性取名叫onRowDblclick，当存在这个属性定义时，就将行元素对象作为this调用该处理函数，并且把行元素对象作为参数传递给这个处理函数。

表格的定义类似下列代码：

$('#userGrid').flexigrid({
   resizable:false,
   url: url,
   dataType: 'json',
   method:'get',
   singleSelect:true,
   //定义行双击事件的处理函数为rowDblclick
   onRowDblclick: rowDblclick,
   colModel: [ {
      display: '用户名',
                name: 'userName',
                width: 100,
                sortable: false,
                align: 'center'
      ………………
      ………………

至此，相信仔细阅读的读者已经基本了解了修改flexigrid的思路，没有修改过源码的同志们，大概已经明白了，修改源码其实是一件很简单的事情。笔者对源码修改位置的描述可能不是特别清楚，现将修改过的flexigrid js源码（未压缩）提供给大家下载，希望本文内容能够对大家有所帮助。

源码下载地址：http://download.youkuaiyun.com/detail/neareast/6432859