使用没有 AJAX 的 Form 从 Bootstrap 表中提取 JS 变量。更好的方法？

Posted 2023-03-05

【中文标题】使用没有 AJAX 的 Form 从 Bootstrap 表中提取 JS 变量。更好的方法？

【英文标题】：Pulling JS vars from Bootstrap table using Form without AJAX. Better way?

【发布时间】：2016-01-29 03:08:35

【问题描述】：

我用 Form 元素包装了一个 Bootstrap (BST) 表。 BST 在客户端用 javascript 自动用 json 文件填充表格数据，表格和表格如下所示：

<form id="info" role="form" action="#" method="post" accept-charset="utf-8">
    <table data-toggle="table" 
           data-url="tables/sharedMem/jsonTickerList"  
           data-show-refresh="true" 
           data-show-toggle="true" 
           data-show-columns="true" 
           data-search="true" 
           data-select-item-name="toolbar1" 
           data-pagination="true" 
           data-sort-name="name" 
           data-sort-order="desc" 
           data-page-size="15" 
           data-single-select="true" 
           id="table">
        <thead>
            <tr>
                <th data-field="state" data-radio="true" >Report ID</th>
                <th data-field="cik" data-sortable="true">CIK</th>
                <th data-field="ticker"  data-sortable="true">Ticker</th>
                <th data-field="company" data-sortable="true">Name</th>                 
            </tr>
        </thead>
    </table>

    <button type="submit" class="btn btn-small" name = "button">
        Submit
    </button>
</form>

如您所见，BST 没有在服务器端定义表行或 TD（因为它启用了客户端 JS）。因此，我可以找到通过单击表单中的提交按钮返回行数据来捕获数据的唯一方法是：

$(function ()    
    $('#events-table').next().click(function () 
        $(this).hide(); 

        var $result = $('#result');

        $('#table').bootstrapTable()
            .on('click-row.bs.table', function (e, row, $element) 
                $result.text('Event: click-row.bs.table, data: ' + JSON.stringify(row));
                var url = "confirm.php?cik=" + row.cik;
                document.getElementById("info").setAttribute('action', url);
            );
    );
);

上面的两行代码非常棒。他们让这一切都奏效。 我的问题是 BST 代码需要一个消息元素。它看起来像这样：

<div class="alert alert-success" id="result" ></div>

当此警报在代码中时，表格不会向警报对象发送事件，除非我先单击警报，然后单击表格中的行。如果代码中没有警报，我将无法工作。一旦我进行抢先点击，一切都会很好，但这很奇怪。我希望有人能看到什么是错的。我对Javascript太蹩脚了。我希望我可以加载页面，单击一行，然后JS更新表单元素中的action属性，这样当我单击提交按钮时一切正常。

BST 很棒！我可以在大约 100 毫秒内从 /dev/shm 将 10000 条记录加载到表中，并且它的搜索功能非常快，所以我希望只调试最后一点，以便提供更流畅的客户体验。

【参考方案1】：

我解决了这个问题并找到了解决方案。现在正确的javascript是：

    $(function ()    
    $('#events-table').click(function () 

    $('#table').bootstrapTable()
        .on('click-row.bs.table', function (e, row, $element) 
        var url = "confirm.php?cik=" + row.cik;
        document.getElementById("info").setAttribute('action', url);
        );
    );
    );

html：

    <div class="alert alert-success" id="result" > </div>

也被彻底删除了。最终结果是当表格加载时，它可以通过页面或搜索完全导航。单击一行，（或有细微变化的单选按钮）捕获行数据，以便当您单击“表单提交”按钮时，使用客户端 javascript 和 json 创建的表单数据以正常方式传递到 php 的 $_POST 中。

我刚刚测试了包含 110 万条记录（每个 3 个字段）的表。它在一秒钟内加载，您可以在 1/2 秒内导航到最后一行。虽然那是在 1 Gb 的 Intranet 上，并且测试中的数据文件为 77MB，但我认为它表明 BST 非常酷，看起来很棒，并且当您将大型 json 文件存储在 /dev/shm 上时也非常快。前面提到的所有Form和BST html都是正确的。

这样做的关键是删除 JS 中的“next()”方法，因为它实际上忽略了对我想要选择的表行的第一次单击。我只是猜想 JS 会接受“.click”而不是……结果是正确的……经过相当多的试验和错误错误。