在引导表中插入输入类型列答案

【问题标题】：insert input type column in bootstrap table在引导表中插入输入类型列
【发布时间】：2015-04-10 09:24:01
【问题描述】：

我在引导表中遇到问题，我有一个引导表，使用 JQuery AJAX 填充数据库中的数据，我想要做的是在每条记录的最后一列插入/添加 <input type="text"/>。

我的 Jquery 脚本：

<script type="text/javascript">
    $(function(){

        var baseurl = "<?php print site_url('/quotes/get'); ?>";                  

            $.ajax({
                method: "POST",
                url: baseurl,
                data: { analid: 1 },
                dataType: 'json'
            })
                .done(function( msg ) {

                console.log(msg);

                $('#qtable').bootstrapTable({
                    data: msg
                });

            });

    });
</script>

上面的脚本正在显示来自数据库的数据，然后我在该网站的底部找到了这个参考（LINK HERE），我看到了bootstraptable 的一些方法，比如添加静态列。

更新的代码 Jquery 脚本：

 $(function() {
    var baseurl = "<?php print site_url('index.php/quotes/get'); ?>";
    $.ajax({
            method: "POST",
            url: baseurl,
            data: {
                analid: 1
            },
            dataType: 'json'
        })
        .done(function(msg) {

            console.log(msg);

            $('#qtable').bootstrapTable({
                data: msg,
                columns: [{ //<--- here is where I lost.. I don't know what to do here or what should I add..
                    field: 'operate',
                    title: 'Item Operate',
                    align: 'center',
                    valign: 'middle',
                    clickToSelect: false,
                    formatter: operateFormatter,
                    events: operateEvents
                }]

            });

        });
});

非常感谢任何替代和优化的方式解决方案。

谢谢！

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3 bootstrap-table

【解决方案1】：

如果要在已知位置返回/渲染列，只需使用以下功能块

formatter : function(value,row,index) {
   return '<input name="elementname"  value="'+value+'"/>';
 }

如果您想排除/跳过某些列或想要呈现特定列（添加空花括号对 {}、{}、{}，就像这样根据您必须移动的列数）例如，

columns: [ {},{},{},  

           {
             field: 'operate',
             title: 'Item Operate',
             align: 'center',
             valign: 'middle',
             clickToSelect: false,
             formatter : function(value,row,index) {
               return '<input name="elementname"  value="'+value+'"/>';
             }
           }
         ]

【讨论】：

【解决方案2】：

您可以使用列选项 formatter 。见例子HERE

formatter : function(value,row,index) {
   return '<input name="elementname"  value="'+value+'"/>';
   //return '<input name="elementname"  value="'+row.id+'"/>';     here id is your field name
 }

单元格格式化函数，取三个参数：

value：字段值。
row：行记录数据。
index：行索引。

在这种情况下，您的代码将如下所示。（假设“操作”是您的最后一个列名）

$('#qtable').bootstrapTable({
            data: msg,
            columns: [{ //<--- here is where I lost.. I don't know what to do here or what should I add..
                field: 'operate',
                title: 'Item Operate',
                align: 'center',
                valign: 'middle',
                clickToSelect: false,
                formatter : function(value,row,index) {
                   return '<input name="elementname"  value="'+value+'"/>';
                   //return '<input name="elementname"  value="'+row.id+'"/>';     here id is your field name 
                }  
            }]

        });

【讨论】：

它完全有效.. 但它显示在第一列.. 我希望它显示在最后一列（虽然我添加了data-formatter ="operate"）。
你在 json 数组中的最后一个字段名是什么？？
啊。所以它必须基于json array.. 对不起我的错.. 但我的意思是在加载数据时必须动态添加输入文本元素。但是可以在引导表上添加动态输入文本元素吗？
基本上当你加载json数组时..你知道哪个是最后一个字段加载到表中。
这里要在数据加载到表后添加输入？？

【解决方案3】：

我不熟悉这个库，但我查看了文档，这就是我认为你需要的。 formatter 可以是这样的匿名函数：

formatter : function(value) {
    //value contains the current value in the cell.  whatever you return will be the new value of the cell.
       return '<input name="myinput" />';
}

【讨论】：