关于flexigrid: 基于jQuery的datagrid插件。
http://www.flexigrid.info/
基本使用就不说了,看官网。这篇文章主要总结一下自己在使用中的一些心得,首先是对flexigrid进行简单的扩展,比如将某个数据列显示为一个checkbox.
要点,也就是主要修改的地方如下:
1.colModel -- flexigrid用来表头的模型,我们将在为之新增一个checkbox属性作为标识,若为true,则将这一列显示为checkbox。 用ctrl+f找到这段代码(为什么用Ctrl+F? 很明显写这插件的哥们儿很喜欢超长的函数,以至于这种独立的功能他都仅仅是加了一个注释而已):
//create model if any
if (p.colModel)
{
thead = document.createElement('thead');
tr = document.createElement('tr');
for (i=0;i<p.colModel.length;i++)
{
//此处即对colModel的处理。省略代码若干....
//Modified by me.
if (cm.checkbox){
$(th).attr('checkbox',cm.checkbox);
}
$(tr).append(th);
}
}
注释//Modified by me下面的if段,即是我们要做的修改,很明了,我们将为th添加一个'checkbox'属性,如果用户在colModel中设置了这一属性的话。
2.找到创建每个单元格的代码,稍作修改,判断单元格所在列的表头是否有checkbox属性,若有,则在单元格内创建一个checkbox。
继续Ctrl+F找到下面这段代码
//add cell
$('thead tr:first th',g.hDiv).each
(
function (){
//继续省略代码
if($(this).attr('checkbox')){
td.innerHTML = "<input type='checkbox' />";
}else{
td.innerHTML = row.cell[idx];
}
}
循环体中的代码就是对每一列的单元格进行渲染了。代码依旧很简单,对应的表头有'checkbox',就显示成checkbox,否则就显示对应的数据值。
到此为止呢,如果你手头有测试数据的话,就可以看到我们的checkbox已经出来了,接下来还有一点小问题,请继续往下看。
3.需要某一行被选中时,该行内的checkbox也应该被打上勾,同样的,勾选checkbox时,应当所在行的样式变为选中。
继续Ctrl+F(
$(this).toggleClass('trSelected')),找到下面这段
$('tbody tr',g.bDiv).each
(
function ()
{
$(this)
.click(
function (e)
{
var obj = (e.target || e.srcElement); if (obj.href /*这里的判断条件修改了一下,使得checkbox的点击事件不被拦截掉*/) return true;
$(this).toggleClass('trSelected');
//这里的修改使checkbox的选中状态与行的trSelected css保持同步.
var isSelected = $(this).hasClass("trSelected");
$(this).find("input[type='checkbox']").each(function() {
isSelected ? $(this).attr("checked","checked") : $(this).removeAttr("checked");
});
if (p.singleSelect) {
$(this).siblings().removeClass('trSelected')
.find("input[type='checkbox']").removeAttr("checked");
}
}
)
OK,到此为止,完成任务。
使用方法呢,就是这个样子
$("#customer_flexigrid").flexigrid({
colModel: [
{ display: 'Select', name: 'id', width: 40, align: 'center', checkbox:true},
],
//其他配置省略
这只是一个简单的例子,事实上用同样的思路,我们可以把单元格表现成任意的形式。
最后吐槽一下JE的代码插入功能,太难使了。
分享到:
相关推荐
jquery表格插件Flexigrid 将数据按照表格排列,类似与ext。
jquery 表格插件 Flexigrid
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
JQuery_插件FlexiGrid_之完全配置与使用
JQuery_插件FlexiGrid_之完全配置与使用.doc
Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: ...
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 本资源是...
很好用的一个插件,这个版本是php的,。net的没有调试好,以后会上传(成功后) 更多精彩,请访问建站易教程网:www.diyiyusuan.com
Jquery flexigrid插件 添加了checkbox,将它设置为true就OK了 (双击事件)onRowDblclick。。。 附带属性说明 共享下。。。。。
此项目是struts2+json+flexigrid的完整实例,可帮助你对flexigrid快速上手,项目下载后直接导入自己的工程即可,所用jar包会另传,因为超出上传限制,还请理解。
博文链接:https://ynial.iteye.com/blog/235621
jquery flexigrid;jquery flexigrid
jquery flexigrid与jquery tablesort 配合实现flexigrid的客户端排序功能。jsp项目,无需数据库即可运行
《修改jQuery表格插件flexigrid源码添加自定义功能》文章配套代码http://blog.csdn.net/neareast/article/details/12904393,对jquery表格插件flexigrid的源码进行修改,增加了几个自定义功能,对其功能进行了增强。...
Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧。 Chromatable JQuery Plugin – 固定表头,可滚动...
NULL 博文链接:https://gundumw100.iteye.com/blog/531131
这是介绍JQuery表格插件FlexiGrid在Java中的使用,使用Servlet进行开发,json传递数据
是struts2+json+flexigrid的完整实例所用到的jar包,请大家下载时看清楚。