如何使用 Flexigrid 处理行 onclick 事件?

发布于 2024-11-14 14:48:26 字数 301 浏览 4 评论 0原文

我的 Flexigrid 已设置。我所需要的只是一个当用户单击一行时调用的事件。从那里,我将根据该行中包含的数据将用户发送到另一个页面。但我似乎找不到任何有关如何执行此操作的示例。

我正在寻找一个关于如何使用 flexigrid 处理行 onclick 事件的清晰示例。

我也对任何其他可以在这种情况下使用的 javascript 表框架感兴趣。我一直在看 DataTables ,看起来它可能是一个更好的选择(并且该项目出现变得更加活跃)

My flexigrid is setup. All I need is an event that gets called when the user clicks on a row. From there, I will send the user to another page based on the data contained in that row. But I can't seem to find any examples on how to do this.

I'm looking for a clear example on how to handle row onclick events using flexigrid.

I'm also interested in any other javascript table frameworks that could be used in this situation. I've been taking a peek at DataTables and it looks like it may be a better alternative (and the project appears to be more active)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

乱了心跳 2024-11-21 14:48:26

在 Flexigrid 的初始设置中,将属性 process: procMe 添加到列模型中。示例:

colModel : [
    { display: 'Request', name : 'id', process: procMe }
]

然后创建回调:

function procMe( celDiv, id ) {
    $( celDiv ).click( function() {
        alert( id );
    });
}

In the initial setup for the flexigrid, add the attribute process: procMe to the column model. Example:

colModel : [
    { display: 'Request', name : 'id', process: procMe }
]

and then create a callback:

function procMe( celDiv, id ) {
    $( celDiv ).click( function() {
        alert( id );
    });
}
夏末的微笑 2024-11-21 14:48:26

更好的解决方案

将流程添加到 colModel 对我来说不起作用。

colModel : [
{ display: 'Request', name : 'id', process: procMe }
]

下面的解决方案是我正在使用的:

var gridRows = $("#data-grid tbody tr");

gridRows.click(function (event) {
  displaySelectedItem($(this).attr('id').substr(3));
  return false; //exit
});

A better solution

Adding process to colModel didnt work for me.

colModel : [
{ display: 'Request', name : 'id', process: procMe }
]

this solution below is what I'm using:

var gridRows = $("#data-grid tbody tr");

gridRows.click(function (event) {
  displaySelectedItem($(this).attr('id').substr(3));
  return false; //exit
});
落花随流水 2024-11-21 14:48:26

Flexigrid 列作为链接​​

colModel: [
        {
            display: 'DomainName', name: 'DomainName', width: 180, 
            sortable: true, align: 'left', 
            process: function (col, id) 
                     {
                       col.innerHTML = "<a href='javascript:domainEdit(" + id + ");' 
                                   id='flex_col" + id + "'>" + col.innerHTML + "</a>";
                     }
        }]

链接功能

function domainEdit(domainID) {
    alert('domainID' + domainID);
}

Flexigrid column as link

colModel: [
        {
            display: 'DomainName', name: 'DomainName', width: 180, 
            sortable: true, align: 'left', 
            process: function (col, id) 
                     {
                       col.innerHTML = "<a href='javascript:domainEdit(" + id + ");' 
                                   id='flex_col" + id + "'>" + col.innerHTML + "</a>";
                     }
        }]

Link Function

function domainEdit(domainID) {
    alert('domainID' + domainID);
}
謌踐踏愛綪 2024-11-21 14:48:26

我认为这个变体比 whoabackoff 好一点

$('.TableName').click(function(event){
        $('.res').html('dbl');
        alert('dbl');
});

I think this variant little better than whoabackoff

$('.TableName').click(function(event){
        $('.res').html('dbl');
        alert('dbl');
});
z祗昰~ 2024-11-21 14:48:26

这有帮助吗? http://www.flexigrid-asp.net/demo/updatepanel.aspx
你可以用 firebug 看一下它,看看事件是在哪里挂钩的。
请记住,flexigrid.js 文件与官方项目中的文件略有不同。

does this help? http://www.flexigrid-asp.net/demo/updatepanel.aspx
you can have a look at it with firebug, to see where the event is hooked.
keep in mind that the flexigrid.js file is a bit different than the one from the official project.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文