Bootstrap table 随手记

最新推荐文章于 2021-04-19 10:33:31 发布

AetherArtemis

最新推荐文章于 2021-04-19 10:33:31 发布

阅读量307

点赞数

本文链接：https://blog.csdn.net/ryuenkyo/article/details/106255012

版权

1.表格行样式

关于表格行的样式设置，效果不难，自己用jQuery设置tr的背景色也可以实现。但bootstrap table提供了设置行的背景色机制，我们可以用它内置的api。添加rowStyle属性：

rowStyle: function(row, index) {
    //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
    var strclass = "";
    if (Number(row.age) < 18) {
        strclass = 'success';
    } else {
        return {};
    }
    return { classes : strclass }
}

bootstrap table支持5中表格的行背景色，分别是'active', 'success', 'info', 'warning', 'danger'这五种，至于每种对应的背景颜色，将代码运行起来就可看到。关于这个方法的返回值，按照bootstrap table的规则，必须返回一个json格式的对象型如： { classes : strclass} 。
2.表格行内编辑

（1）引入额外的js文件

（2）在cshtml页面定义表格时，添加两个属性

<table id="tb_departments">
    <thead>
        <tr>
            <th data-field="Name" data-editable="true">部门名称</th>
            <th data-field="ParentName">上级部门</th>
            <th data-field="Level" data-editable="true">部门级别</th>
            <th data-field="Desc" data-editable="true">描述</th>
        </tr>
    </thead>
</table>

如果是在js里面初始化，写法如下：

columns: [{
        checkbox: true
    }, {
        field: 'id',
        title: 'ID',
        align: 'center'
    }, {
        field: 'age',
        title: 'AGE',
        editable: {
            type: 'text',
            title: 'AGE',
            validate: function (v) {
                if (!v) return '年龄不能为空';
                if (isNaN(v)) return '年龄必须是数字';
                var age = parseInt(v);
                if (age <= 0) return '年龄必须是正整数';
            }
        },
        align: 'center'
    }, {
        field: 'cupSize',
        title: 'CupSize',
        editable: true,
        align: 'center'
    } ]

（3）在js里面初始化表格的时候注册编辑保存的事件

onEditableSave: function (field, row, oldValue, $el) {
    console.log(field);
    console.log(row);
    console.log(oldValue);
    console.log($el);
    console.log(JSON.stringify(row));
}

对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>BootStrap Table使用</title>
        <!--Jquery组件引用-->
        <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

        <!--bootstrap组件引用-->
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css" />

        <!--bootstrap table组件以及中文包的引用-->
        <script type="text/javascript" src="js/bootstrap-table.js"></script>
        <link rel="stylesheet" href="css/bootstrap-table.css" />
        <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

        <!--页面js文件的引用-->
        <script type="text/javascript" src="js/main.js"></script>

        <!--bootstrap table editable组件引用-->
        <link rel="stylesheet" href="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
        <script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
        <script src="js/extensions/editable/bootstrap-editable.js"></script>
        <script src="js/extensions/editable/bootstrap-table-editable.js"></script>

    </head>

    <body>
        <div class="panel-body" style="padding-bottom:0px;">
            <div class="panel panel-default">
                <div class="panel-heading">查询条件</div>
                <div class="panel-body">
                    <form id="formSearch" class="form-horizontal">
                        <div class="form-group" style="margin-top:15px">
                            <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="txt_search_departmentname">
                            </div>
                            <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="txt_search_statu">
                            </div>
                            <div class="col-sm-4" style="text-align:left;">
                                <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#insertModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <button id="btn_edit" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>

            <!-- 模态框（Modal） -->
            <div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                ×
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                添加商品
                            </h4>
                        </div>
                        <div class="modal-body">
                            <select id="ps">
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">
                                确认
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

            <table id="tb_departments"></table>
        </div>
    </body>

    <script type="text/javascript">
        $(function () {

            //1.初始化Table
            var oTable = new TableInit();
            oTable.Init();
        
            //2.初始化Button的点击事件
            var oButtonInit = new ButtonInit();
            oButtonInit.Init();
        
        });


        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#tb_departments').bootstrapTable({
                    url: '/girl/lS',                         //请求后台的URL（*）
                    method: 'post',                           //请求方式（*）
                    contentType: "application/x-www-form-urlencoded",
                    dataType: "json",                        //数据类型
                    toolbar: '#toolbar',                   //工具按钮用哪个容器
                    striped: false,                          //是否显示行间隔色
                    cache: false,                           //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                       //是否显示分页（*）
                    sortable: false,                        //是否启用排序
                    sortOrder: "asc",                       //排序方式
                    queryParamsType: '',
                    queryParams: oTableInit.queryParams,     //传递参数（*）
                    sidePagination: "server",               //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                           //初始化加载第一页，默认第一页
                    pageSize: 10,                           //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],            //可供选择的每页的行数（*）
                    search: true,                           //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,                        //启用全匹配搜索，否则为模糊搜索
                    searchOnEnterKey: false,                //按回车触发搜索方法，否则自动触发搜索方法
                    showColumns: true,                      //是否显示所有的列
                    showRefresh: true,                      //是否显示刷新按钮
                    minimumCountColumns: 2,                 //最少允许的列数
                    clickToSelect: true,                    //是否启用点击选中行
                    //height: 500,                            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "ID",                         //每一行的唯一标识，一般为主键列
                    showToggle:true,                        //是否显示详细视图和列表视图的切换按钮
                    cardView: false,                        //是否显示详细视图
                    detailView: true,                          //是否显示父子表
                    rowStyle: function(row, index) {
                        //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                        var strclass = "";
                        if (Number(row.age) < 18) {
                            strclass = 'success';
                        } else {
                            return {};
                        }
                        return { classes : strclass }
                    },
                    columns: [{
                        checkbox: true
                    }, {
                        field: 'id',
                        title: 'ID',
                        align: 'center'
                    }, {
                        field: 'age',
                        title: 'AGE',
                        editable: {
                            type: 'text',
                            title: 'AGE',
                            validate: function (v) {
                                if (!v) return '年龄不能为空';
                                if (isNaN(v)) return '年龄必须是数字';
                                var age = parseInt(v);
                                if (age <= 0) return '年龄必须是正整数';
                            }
                        },
                        align: 'center'
                    }, {
                        field: 'cupSize',
                        title: 'CupSize',
                        editable: true,
                        align: 'center'
                    } ],
                    onClickRow: function (row, $element) {
                        curRow = row;
                    },
                    //注册加载子表的事件。注意下这里的三个参数！
                    onExpandRow: function (index, row, $detail) {
                        oInit.InitSubTable(index, row, $detail);
                    },
                    onEditableSave: function (field, row, oldValue, $el) {
                        console.log(field);
                        console.log(row);
                        console.log(oldValue);
                        console.log($el);
                        console.log(JSON.stringify(row));
                    }
                });
            };

            //得到查询的参数
            oTableInit.queryParams = function (params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
//                    limit: params.limit,   //页面大小
//                    offset: params.offset,  //页码
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
//                    departmentname: $("#txt_search_departmentname").val(),
//                    statu: $("#txt_search_statu").val(),
                    search: params.search
                };
                return temp;
            };

            //初始化子表格(无线循环)
            var oInit = new Object();
            oInit.InitSubTable = function (index, row, $detail) {
                var parentid = row.id;
                var cur_table = $detail.html('<table></table>').find('table');
                $(cur_table).bootstrapTable({
                    url: '/girl/sub/lC',
                    method: 'post',
                    contentType: "application/x-www-form-urlencoded",
                    dataType: "json",                        //数据类型
                    queryParams: { strParentID: parentid },
                    ajaxOptions: { strParentID: parentid },
                    clickToSelect: true,
                    detailView: true,//父子表
                    uniqueId: "subId",
                    pageSize: 10,
                    pageList: [10, 25],
                    columns: [{
                        checkbox: true
                    }, {
                        field: 'subId',
                        title: 'SubId'
                    }, {
                        field: 'grade',
                        title: 'Grade'
                    }, {
                        field: 'name',
                        title: 'Name'
                    } ],
                    //无线循环取子表，直到子表里面没有记录
                    onExpandRow: function (index, row, $Subdetail) {
                        oInit.InitSubTable(index, row, $Subdetail);
                    }
                });
            };

            return oTableInit;
        };


        var ButtonInit = function () {
            var oInit = new Object();
            var postdata = {};
        
            oInit.Init = function () {
                //初始化页面上面的按钮事件
            };

            return oInit;
        };
    </script>

</html>

AetherArtemis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap table 随手记

1.表格行样式关于表格行的样式设置，效果不难，自己用jQuery设置tr的背景色也可以实现。但bootstrap table提供了设置行的背景色机制，我们可以用它内置的api。添加rowStyle属性：rowStyle: function(row, index) { //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger']; var strclass = ""; if (Number(row.age)...
复制链接

扫一扫