bootstrap table 以及行内编辑x-editable

bootstrap-table官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
先看一下效果吧

dfldx.gif

引入文件

<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="css/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
 
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<script src="js/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="js/bootstrap-table/bootstrap-table.js"></script>
<script src="js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>

页面元素

 <div class="container">
        <table id="tb_user"></table>
   </div>

js代码

<script>
        $("#tb_user").bootstrapTable({
            columns: [{
                checkbox: true,
            }, {
                field: 'username',
                title: '用户名',
                width: '10%',
                align: 'center',
                editable: {
                    type: 'text',
                    title: '用户名',
                    placement: 'right',
                    emptytext: "空文本",
                    validate: function(v) {
                        if (!v) return '用户名不能为空';
                    }
                },
            }, {
                field: 'password',
                title: '密码',
                width: '10%',
                align: 'center',
                editable: {
                    type: 'text',
                    title: '修改密码',
                    placement: 'right',
                    validate: function(v) {
                        if (!v) return '密码不能为空';
                    }
                },
            }, {
                field: 'power',
                title: '权限',
                align: 'center',
                editable: {
                    type: 'select2',
                    title: '修改权限',
                    placement: 'left',
                    mode: "inline",
                    inputclass: 'input-large',
                    select2: {
                        multiple: true,
                        tags: true,
                        data: [{
                            id: 'bsb',
                            text: '篮球'
                        }, {
                            id: 'ftb',
                            text: '足球'
                        }, {
                            id: 'wsm',
                            text: '游泳'
                        }],
                    },
                }
            }],
            striped: true, //隔行变色
            url: 'json/data1.json',
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: false, //是否启用排序
            // sortOrder: "asc", //排序方式
            sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 10, //每页的记录行数（*）
            pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: false, //是否显示所有的列
            showRefresh: false, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: false, //是否启用点击选中行
            // height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            onLoadSuccess: function() {}
        });
    </script>

详细请看官网api