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