用js创建的可编辑的bootstrap表格。

Posted 2023-05-03

当选择编辑一个单元格时，另外一个不能操作，当选择另一个编辑时，这个不能操作。要怎么实现？

参考技术A 之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研究了下x-editable组件，遇到过一些坑，再此做个采坑记录吧！想要了解bootstrapTable的朋友可以移步JS组件系列——表格组件神器：bootstrap table。
一、x-editable组件介绍
x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：

根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。
x-editable开源地址：https://github.com/vitalets/x-editable
x-editable文档地址：http://vitalets.github.io/x-editable/docs.html
x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html
1、x-editable初体验

首先下载基于bootstrap的源码到本地。引用相关文件。

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>

页面元素

复制代码代码如下:
<a href="#" id="username" data-type="text" data-title="用户名">用户名</a>

js初始化

$(function ()
$('#username').editable();
);

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

【中文标题】使用没有 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”而不是……结果是正确的……经过相当多的试验和错误错误。