脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-修改jQuery表格插件flexigrid源码添加自定义功能（1），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。     Flexigrid是一款轻量级的jQuery表格插件，体积很小，压缩后的js和css源码只有不到40k，并且简单易用。然而简单通常意味着一些高级功能的缺失，好在其源码还是比较简单的，比较容易看懂。项目主页是：https://www.flexigrid.info/。

         基本功能就不多说了，笔者前段时间实现了几个小小的功能扩展，今天整理出来分享给需要的读者：实现了表格单元内容的HTML模板以及鼠标单击事件。使用方法是在定义grid的colModel时对该列进行额外的配置，下列代码的注释中已经说明：

[javascript] 

$('#userGrid').flexigrid({  

    resizable: false,  

    url : url,  

    dataTyPE : 'json',  

    method:'get',  

    singleSelect: true,  

    colModel : [ {  

        display : '用户名',  

        name : 'userName',  

        width : 100,  

        sortable : false,  

        align : 'center'  

    }, {  

        display : '测试',  

        name : 'test',  

        width : 120,  

        /* 2013-06-08 NearEast flexigrid 新功能示例 

定义htML显示模板，{$}是一个变量，表示后台传过来的该列的数据值 */  

        html:'<span style="color:red">新功能示例：</span><button class="BTn-success" onclick="alert(this);">{$}</button>',  

/* 2013-06-08 NearEast flexigrid 新功能示例 

指定鼠标单击此列元素时的事件处理函数*/  

        handler:NearEast.PRintargs  

    }],  

    buttons : [ {  

        name : '新增',  

        bclass : 'add',  

        onPress : func  

    }],  

    seArchITems : [ {  

        display : '用户名',  

        name : 'userName'  

    }],  

    sortname : "userName",  

    sortorder : "asc",  

    usepager : true,  

    title : '用户列表',  

    useRp : true,  

    rp : 15,  

    width : 600,  

    height : 200  

});  

 

         实现的效果类似下图红圈所示：

         查看代码，找到表格类g的addData函数，对于数据类型为json的情况，在数据填充部分（定义td.innerHTML内容的部分，约在第356行）对源码进行修改。

         首先，我们定义一个变量

        VAR ph = p.colModel[idx].html || '{$}';

        这个变量代表了数据显示使用的模板。其中p是整个表格的配置属性对象，也就是我们在调用flexigrid 方法的时候，传递进去的那些配置项。idx代表当前遍历的列的索引，于是p.colModel[idx]就是当前遍历的列的配置。这里定义的ph变量首先检查列配置中时候包含html模板配置，如果没有定义则其默认值为变量{$}。

         接下来，我们要根据后台传递过来的数据类型取得相应元素的数据值。

         此处的作用域中，有一个row变量代表了当前遍历的数据行，row.cell是一个数组，对应后台传过来的json数据中的cell项。cell项可以是一个“名-值”对的json对象，如：

cell: {newid:0,author:’NearEast’, url:’https://blog.csdn.net/neareast’,address:’北京’};

        也可以是一个简单的数组，如：

cell:[0,’NearEast’,’https://bLOG.csdn.net/neareast/article/details/12904393’,’海淀’]。

        针对cell项的两种格式，我们分别进行判断：如果cell是数组，则直接取数组的第idx项，即row.cell[idx]；如果cell是json对象，则使用colModel中指定的name（p.colModel[idx].name）作为key，来取json对应的值。

        最后，我们用上一步取到的数据值对模板进行填充，然后赋值给表格单元td的innerHTML即可。模板的填充使用了javascript字符串的原生方法replace，将ph变量中的所有“{$}”变量替换为应有的数据值。最终的相关代码如下所示：

[javascript]  

//如果cell是数组  

if (typeof row.cell[idx] != "undefined") {  

    td.innerHTML = ph.replace(/{/$}/g, (row.cell[idx] != null) ? row.cell[idx] : '' );//null-check for opera-browser  

//如果cell是json对象  

} else {  

    td.innerHTML = ph.replace(/{/$}/g, row.cell[p.colModel[idx].name]);  

}<span style="font-family:Microsoft YaHei; font-Size:18px">  

</span>  

         关于正则表达式，可参见笔者的另一篇博文：https://blog.csdn.net/neareast/article/details/6936460。

         至此，自定义模板的功能已经完成了，而其实我们已经找到了动态控制表格单元内容的方法，我们不光可以随心所欲地改变单元的样式，还可以方便地添加其它自定义功能了，例如添加行元素的鼠标双击事件，或者针对某列所有单元的单击事件处理函数，详见下文。

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-修改jQuery表格插件flexigrid源码添加自定义功能（1）全部内容，希望文章能够帮你解决javascript代码实例教程-修改jQuery表格插件flexigrid源码添加自定义功能（1）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。