您的位置:首页 > Web前端 > JQuery

采用Jquery,在table上实现对行的单击、双击、返回选中行数据的功能,可作为GridView控制客户端的扩展

2013-04-28 21:23 991 查看
(function ($) {
$.fn.gridview = function (settings) {
var dfop =
{
SelectedRow: false,
onrowclick: false,
ondblclick: false,
onbuttonclick: false
}
$.extend(dfop, settings);
var me = $(this);

InitEvent(me.attr("id"));
function InitEvent(gridviewid) {
$("#" + gridviewid + ">tbody>tr:gt(0)").each(function () {
if (dfop.onbuttonclick) {
$(this).find('.btntext').click(buttonclick);
}
$(this).click(rowclick).dblclick(rowdblclick);
});
}
function buttonclick() {
dfop.onbuttonclick.call(this, $(this));
return false;
}
function rowclick(e) {
if (dfop.SelectedRow) {
if ($(dfop.SelectedRow).hasClass("gridviewSelectItem")) {
$(dfop.SelectedRow).removeClass('gridviewSelectItem');
if ($(dfop.SelectedRow).index() % 2 == 0) {
$(dfop.SelectedRow).addClass("gridviewItem");
} else {
$(dfop.SelectedRow).addClass("gridviewAlterItem");
}
}
}
dfop.SelectedRow = $(this)[0];
if ($(this).hasClass("gridviewItem")) {
$(this).removeClass('gridviewItem');
} else {
$(this).removeClass('gridviewAlterItem');
}
$(this).addClass("gridviewSelectItem");
if (dfop.onrowclick) {
dfop.onrowclick.call(this, dfop.SelectedRow);
}
}
function rowdblclick(e) {
if (dfop.ondblclick) {
dfop.ondblclick.call(this, dfop.SelectedRow);
}
}
me[0].t = {
getCurrentRow: function () {
return dfop.SelectedRow;
}
};
return me;
}
$.fn.getCurrentRow = function () {
if (this.length > 0 && this[0].t) {
return this[0].t.getCurrentRow();
}
return null;
}
})(jQuery);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐