美文网首页我爱编程JS
bootstrap table 以及行内编辑x-editable

bootstrap table 以及行内编辑x-editable

作者: 骗人布 | 来源:发表于2017-03-08 15:48 被阅读2432次

    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

    相关文章

      网友评论

        本文标题:bootstrap table 以及行内编辑x-editable

        本文链接:https://www.haomeiwen.com/subject/mrpbgttx.html