bootstrap table添加行

最新推荐文章于 2024-08-08 10:00:46 发布

xinyuebaihe

最新推荐文章于 2024-08-08 10:00:46 发布

阅读量1.7w

点赞数 1

分类专栏： bootstrap

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.bootstrap table添加行

<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="bootstrap-table.min.css" rel="stylesheet" />  
<script src="bootstrap-table.js"></script>  
<script src="bootstrap-table-locale-all.min.js"></script>  
</head>
<body>
<div class="col-md-12">  
<button type="button" class="btn btn-default" id="addData" οnclick="xx()">  ttttt
                <span class="glyphicon glyphicon-plus"></span>  
            </button>  
    <table class="table table-striped table-bordered table-hover" id="subprocessTable"></table>  
</div>  
<script>
    /** 
     * add a new row 
     */  
   function xx(){    alert();
        $('#subprocessTable').bootstrapTable('selectPage', 1); //Jump to the first page  
        var data = {'ii': '', 'aa': ''}; //define a new row data，certainly it's empty  

        $('#subprocessTable').bootstrapTable('prepend', data); //the method of prepend must defined all fields，but append needn't  
        //$('#dataTable').bootstrapTable('append',data);  
  
        $("#dataTable tr:eq(1) td:eq(0)").trigger("dblclick");  
        $("#dataTable input")[0].focus();  
 }

$(function(){  
    //初始化表格  
    $('#subprocessTable').bootstrapTable({  
       data:[{'ii':'aa','aa':'bb'},{'ii':'a55a','aa':'b55b'}],  
        editable:true,//开启编辑模式  
        clickToSelect: true,  
        cache: false,  
        showToggle:true, //显示切换按钮来切换表/卡片视图。  
        showPaginationSwitch:true, //显示分页切换按钮  
        pagination: true,  
        pageList: [10,25,50,100],  
        pageSize:10,  
        pageNumber:1,  
        uniqueId: 'index', //将index列设为唯一索引  
        striped: true,  
        search: true,  
        showRefresh: true,  
        minimumCountColumns: 2,  
        smartDisplay:true,  
        columns: [  
            [  
                {field:"ii",title:"ID",align:"center",edit:true,formatter:function(value, row, index){  
                    return row.index=index ; //返回行号  
                }},
                {field:"aa",title:"Description",edit:true,align:"center"}
               
            ]  
        ]  
    });  
  

});  
</script>  
</body>
</html>