如何在jQuery Bootgrid中处理行的单击与双击事件

嗨，刚好我之前做过类似的需求，用jQuery Bootgrid给表格行加单击和双击事件其实挺简单的，核心是要等表格完全渲染好之后再绑定事件，不然会因为元素还没加载出来导致绑定失效。下面给你具体的实现思路和完整示例代码：

实现思路 #

• 等待表格加载完成：利用Bootgrid提供的loaded.rs.jquery.bootgrid事件，这个事件会在表格数据渲染完成（包括动态AJAX加载的数据）后触发，此时绑定事件能确保行元素已存在。
• 单击行弹出ID：通过事件委托给表格的行绑定click事件，利用Bootgrid自动给行添加的data-row-id属性获取当前行的ID，然后用alert弹出。
• 双击行跳转URL：同样绑定dblclick事件，获取行ID后拼接目标URL，通过window.location.href实现跳转。

完整示例代码 #

HTML结构（含表格） #

<!-- 请替换成你本地的jQuery和Bootgrid资源路径 -->
<link rel="stylesheet" href="jquery.bootgrid.css">
<script src="jquery.min.js"></script>
<script src="jquery.bootgrid.min.js"></script>

<!-- 表格容器 -->
<table id="data-table" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="name">用户名称</th>
            <th data-column-id="email">邮箱地址</th>
        </tr>
    </thead>
    <tbody>
        <!-- 示例静态数据，实际项目中可能由Bootgrid从后端加载 -->
        <tr data-row-id="1">
            <td>1</td>
            <td>张三</td>
            <td>zhangsan@demo.com</td>
        </tr>
        <tr data-row-id="2">
            <td>2</td>
            <td>李四</td>
            <td>lisi@demo.com</td>
        </tr>
        <tr data-row-id="3">
            <td>3</td>
            <td>王五</td>
            <td>wangwu@demo.com</td>
        </tr>
    </tbody>
</table>

JavaScript代码 #

$(document).ready(function() {
    // 初始化Bootgrid表格，这里可以添加你的自定义配置（分页、搜索等）
    var dataGrid = $("#data-table").bootgrid({
        rowCount: [10, 25, 50, -1], // 可选的每页行数
        navigation: true, // 显示分页导航
        search: true // 启用搜索功能
    });

    // 监听表格加载完成事件，绑定行事件
    dataGrid.on("loaded.rs.jquery.bootgrid", function() {
        // 单击行事件：弹出当前行ID
        $("#data-table tbody tr").on("click", function() {
            const rowId = $(this).data("row-id");
            alert(`当前行ID：${rowId}`);
        });

        // 双击行事件：跳转到指定URL
        $("#data-table tbody tr").on("dblclick", function() {
            const rowId = $(this).data("row-id");
            const targetUrl = `jump.php?id=${rowId}`;
            window.location.href = targetUrl;
        });
    });
});

额外提示 #

• 如果你的表格是通过AJAX动态加载数据的，loaded.rs.jquery.bootgrid事件会在每次数据刷新后重新触发，所以事件绑定会自动生效，不需要额外处理。
• 如果担心单击和双击事件冲突（比如双击时会触发两次单击），可以添加一个简单的延迟判断，比如：

let clickTimer;
$("#data-table tbody tr").on("click", function() {
    const rowId = $(this).data("row-id");
    clickTimer = setTimeout(() => {
        alert(`当前行ID：${rowId}`);
    }, 300);
}).on("dblclick", function() {
    clearTimeout(clickTimer);
    const rowId = $(this).data("row-id");
    const targetUrl = `jump.php?id=${rowId}`;
    window.location.href = targetUrl;
});

这样双击时会取消单击的定时器，就不会同时触发两个事件了。

内容的提问来源于stack exchange，提问作者Oliver