jquery Flexigrid只选择一行,增加双击事件,获取数据库ID
2011-10-29 10:19
513 查看
Flexigrid(http://www.flexigrid.info/)总体来说还是一款不错的jquery的表格插件,但是速度上面还有些卡,希望官方有更好的解决方法;
前段时间做项目,用到了Flexigrid,遇到了一些问题,如:1怎样才能选中一行,而不是多行;2怎么双击一个表格添加一个事件,如打开一个明细页面;3、如何获取数据库ID。
1、Flexigrid怎样才能选中一行,而不是多行
Flexigrid默认是可以选择多行的,这样一来,在删除一条记录的时候就有些麻烦,必须把选择的多行改为一样,有些不便;
那么就打开“flexigrid.js”页面找到:
$('tbody tr',g.bDiv).each(function (){$(this).click(
function (e) {
.............
}
)}
把 “.............”部分改为:
var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
$('tbody tr.trSelected',g.bDiv).each(function(i){$(this).toggleClass('trSelected');});
$(this).toggleClass('trSelected');
保存试试,是不是就只能选择一行了;
2、Flexigrid怎么双击一行添加一个事件,如打开一个明细页面
一般人操作电脑习惯都是双击一行就能打开一个页面,但是Flexigrid默认并没有这功能,那么怎么才能加上这功能,修改如下:
打开“flexigrid.js”页面找到:
addRowProp: function(){
$('tbody tr',g.bDiv).each
(function ()
{
$(this)
添加一个“dblclick”事件,示列代码如下:
.dblclick(
function(e){//添加双击事件
tabid=$(this).find("td:first").eq(0).text()
fdbclick(tabid);
}
)
那么 fdbclick函数就是双击所要触发的事件了
3、Flexigrid获取数据库ID
Flexigrid获取ID很不方面,官方提供的列子是把ID放在第一列的隐藏列中,通过$(this).find("td:first").eq(0).text() 来获取的,这样就必须浪费一列,如果再有cid,fid等等就得依次放在隐藏列中,不怎么方面;下面我们来看看有没什么更好的办法,不放在隐藏列中也能获取ID。
我们打开“flexigrid.js” 页面我们会发现有“if (row.id) tr.id = 'row' + row.id;”这么一句,意思对每一行进行赋值ID,
我们打开服务端语言,有这么一句
//以下为PHP代码
$json .= "id:'".$r['id']."',";
$json .= "cell:['".$r['id']."'";
那么你应该知道,这个id的用处了吧,那么我们只要在生成的页面用:
id=$('.trSelected', grid).attr("id").replace("row","");
就能获得ID了,而不用再用一个隐藏列来获取了
贴张图:
有些真实数据模糊了,呵呵
我把我改写后的”flexigrid.js“,上传下,供大家下载,可能不是最新版本,大家想要最新版本可以去官方http://www.flexigrid.info/
前段时间做项目,用到了Flexigrid,遇到了一些问题,如:1怎样才能选中一行,而不是多行;2怎么双击一个表格添加一个事件,如打开一个明细页面;3、如何获取数据库ID。
1、Flexigrid怎样才能选中一行,而不是多行
Flexigrid默认是可以选择多行的,这样一来,在删除一条记录的时候就有些麻烦,必须把选择的多行改为一样,有些不便;
那么就打开“flexigrid.js”页面找到:
$('tbody tr',g.bDiv).each(function (){$(this).click(
function (e) {
.............
}
)}
把 “.............”部分改为:
var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;
$('tbody tr.trSelected',g.bDiv).each(function(i){$(this).toggleClass('trSelected');});
$(this).toggleClass('trSelected');
保存试试,是不是就只能选择一行了;
2、Flexigrid怎么双击一行添加一个事件,如打开一个明细页面
一般人操作电脑习惯都是双击一行就能打开一个页面,但是Flexigrid默认并没有这功能,那么怎么才能加上这功能,修改如下:
打开“flexigrid.js”页面找到:
addRowProp: function(){
$('tbody tr',g.bDiv).each
(function ()
{
$(this)
添加一个“dblclick”事件,示列代码如下:
.dblclick(
function(e){//添加双击事件
tabid=$(this).find("td:first").eq(0).text()
fdbclick(tabid);
}
)
那么 fdbclick函数就是双击所要触发的事件了
3、Flexigrid获取数据库ID
Flexigrid获取ID很不方面,官方提供的列子是把ID放在第一列的隐藏列中,通过$(this).find("td:first").eq(0).text() 来获取的,这样就必须浪费一列,如果再有cid,fid等等就得依次放在隐藏列中,不怎么方面;下面我们来看看有没什么更好的办法,不放在隐藏列中也能获取ID。
我们打开“flexigrid.js” 页面我们会发现有“if (row.id) tr.id = 'row' + row.id;”这么一句,意思对每一行进行赋值ID,
我们打开服务端语言,有这么一句
//以下为PHP代码
$json .= "id:'".$r['id']."',";
$json .= "cell:['".$r['id']."'";
那么你应该知道,这个id的用处了吧,那么我们只要在生成的页面用:
id=$('.trSelected', grid).attr("id").replace("row","");
就能获得ID了,而不用再用一个隐藏列来获取了
贴张图:
有些真实数据模糊了,呵呵
我把我改写后的”flexigrid.js“,上传下,供大家下载,可能不是最新版本,大家想要最新版本可以去官方http://www.flexigrid.info/
相关文章推荐
- jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性11
- jquery 动态增加的html元素,初始化设置在id或class上的事件无效
- jquery获取触发事件相关的id
- imgareaselect增加选择框双击事件的支持
- JQuery捕获或获取当前click事件的事件对象ID
- jquery 动态增加的html元素,初始化设置在id或class上的事件无效
- jQuery获取表格中一行的值和获取重复ID的值
- jquery 通过点击事件获取id
- Jquery获取当前的事件源和模糊匹配ID
- jquery.jstree 增加节点的双击事件代码
- jquery的Flexigrid改造,支持选中行内容获取,两个表格行相互移动,行选中事件,支持dwr
- jquery.jstree 增加节点的双击事件
- jquery.jstree 增加节点的双击事件
- jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值
- jquery.jstree 增加节点的双击事件
- jquery的Flexigrid改造,支持选中行内容获取,两个表格行相互移动,行选中事件,支持dwr
- jquery select变化事件获取选择的值
- JQuery选择器通过click事件获取当前点击对象的id,name,value属性
- JQuery捕获或获取当前click事件的事件对象ID
- jquery异步调用自数据库获取值通过knockoutjs赋值给职位二级菜单导致的jquery的hover事件不执行的例子