在bootstrap表中插入输入类型列

时间:2015-04-10 09:24:02

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

我在bootstrap表中遇到问题,我有一个使用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),在该Web的底部是我看到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
                }]

            });

        });
});

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

谢谢!

2 个答案:

答案 0 :(得分:1)

我不熟悉这个库,但我查看了文档,这是我认为你需要的。 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" />';
}

答案 1 :(得分:1)

您可以使用列选项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
 }     

单元格格式化程序功能,取三个参数:

  1. value:字段值。
  2. 行:行记录数据。
  3. index:行索引。
  4. 在这种情况下,您的代码将如下所示。(假设'operations'是您的最后一个列名称)

    $('#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 
                    }  
                }]
    
            });