bootstrap-table 行内编辑

1.文件引入

 <link rel="stylesheet" href="bootstrap.css">
 <link rel="stylesheet" href="bootstrap-table.css">
 <link rel="stylesheet" href="bootstrap3-editable/css/bootstrap-editable.css">
 <script src="jquery2.1.4.js"></script>
 <script src="bootstrap.js"></script>
 <script src="bootstrap-table.js"></script>
 <script src="bootstrap-table-editable.js"></script>
 <script src="bootstrap3-editable/js/bootstrap-editable.js"></script>
 <script src="bootstrap-table-zh-CN.js"></script>

2.内容代码

<table id="table"></table>
<script>
    $("#table").bootstrapTable({
        toolbar: "#toolbar",
        striped: true, //是否显示行间隔色
        height:300,
        sortable: false,//是否排序
        search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
        strictSearch: true, //是否显示刷新
        showColumns: true, //是否显示所有的列
        showRefresh: true, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        showToggle:true, //是否显示详细视图和列表视图的切换按钮
        cardView: false, //是否显示详细视图
        columns: [{
            field: 'id',
            title: 'Item ID',
            editable: true  //可编辑列
        }, {
            field: 'name',
            title: 'Item Name',
            editable: true   //可编辑列
        }, {
            field: 'price',
            title: 'Item Price',
            editable: true //编辑列
        }],
//        data可以换成url
        data: [{
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 2,
            name: 'Item 2',
            price: '$2'
        }, {
            id: 3,
            name: 'Item 3',
            price: '$3'
        }, {
            id: 4,
            name: 'Item 4',
            price: '$4'
        }, {
            id: 5,
            name: 'Item 5',
            price: '$5'
        }, {
            id: 6,
            name: 'Item 6',
            price: '$6'
        }, {
            id: 7,
            name: 'Item 7',
            price: '$7'
        }, {
            id: 8,
            name: 'Item 8',
            price: '$8'
        }, {
            id: 9,
            name: 'Item 9',
            price: '$9'
        }, {
            id: 10,
            name: 'Item 10',
            price: '$10'
        }]
    })
</script>

效果展示

3.下载地址

　　bootstrap3-editable：https://github.com/vitalets/x-editable