【Bootstrap Table】bootstrap table知识合集

 

相关文档和技术网站小结

Bootstrap中文网:http://www.bootcss.com/

Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/index.html

Bootstrap Table API:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Bootstrap Table API 中文版(完整翻译文档):https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1

Bootstrap Table源码:https://github.com/wenzhixin/bootstrap-table

Bootstrap DataPicker:http://www.bootcss.com/p/bootstrap-datetimepicker/

Boostrap Table 扩展API:http://bootstrap-table.wenzhixin.net.cn/extensions/

Bootstrap离线API:https://pan.baidu.com/s/1kTERYsf

Bootstrap Table 离线API :https://pan.baidu.com/s/1c0G3Fu4
这里要说明一点:Bootstrap Table的离线API是博主自己在官网上面保存下来的,样式可能存在问题。

一、基本使用

1、Bootstrap Table的引入

Bootstrap的包直接在 http://v3.bootcss.com/ 里面可以找到,版本已经出来4的预览版,但还是建议使用比较稳定的Bootstrap3,目前最新的3.3.5。

然后就是Bootstrap Table的包了,由于它是开源的,我们直接进到它的源码https://github.com/wenzhixin/bootstrap-table里面git下来就好了。然后把这两个包分别加入到项目中。

2、在cshtml页面引用相关组件,并定义好一个空的表格。

<span style="color:#000000"><code><!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BootStrap Table使用</title>
    @*1、Jquery组件引用*@
    <script src="~/Scripts/jquery-1.10.2.js"></script>

    @*2、bootstrap组件引用*@
    <script src="~/Content/bootstrap/bootstrap.js"></script>
    <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
    
    @*3、bootstrap table组件以及中文包的引用*@
    <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    
    @*4、页面Js文件的引用*@
    <script src="~/Scripts/Home/Index.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">
                <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>
        <table id="tb_departments"></table>
    </div>
</body>
</html>
</code></span>

引入需要的文件之后,我们最重要的就是定义一个空的table,如上的 <table id="tb_departments"></table>

3、Js初始化

<span style="color:#000000"><code>$(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: '/Home/GetDepartment',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber:1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'Name',
                title: '部门名称'
            }, {
                field: 'ParentName',
                title: '上级部门'
            }, {
                field: 'Level',
                title: '部门级别'
            }, {
                field: 'Desc',
                title: '描述'
            }, ]
        });
    };

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


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

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

    return oInit;
};
</code></span>

4、在Controller里面对应的方法

<span style="color:#000000"><code>public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu)
        {
            var lstRes = new List<Department>();
            for (var i = 0; i < 50; i++)
            {
                var oModel = new Department();
                oModel.ID = Guid.NewGuid().ToString();
                oModel.Name = "销售部" + i ;
                oModel.Level = i.ToString();
                oModel.Desc = "暂无描述信息";
                lstRes.Add(oModel);
            }

            var total = lstRes.Count;
            var rows = lstRes.Skip(offset).Take(limit).ToList();
            return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
        }
</code></span>

这里有一点需要注意:如果是服务端分页,返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反,如果是客户端分页,这里要返回一个集合对象到前端。

5、效果及说明
效果及说明

效果图:
在这里插入图片描述

二、表格行样式:不同状态的订单显示不同的颜色

在这里插入图片描述

初始化表格的时候

<span style="color:#000000"><code>//初始化Table
$('#tb_order').bootstrapTable({
            url: '/TableStyle/GetOrder',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            //toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber: 1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            rowStyle: function (row, index) {
                //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                var strclass = "";
                if (row.ORDER_STATUS == "待排产") {
                    strclass = 'success';//还有一个active
                }
                else if (row.ORDER_STATUS == "已删除") {
                    strclass = 'danger';
                }
                else {
                    return {};
                }
                return { classes: strclass }
            },
            columns: [{
                checkbox: true
            }, {
                field: 'ORDER_NO',
                title: '订单编号'
            }, {
                field: 'ORDER_TYPE',
                title: '订单类型'
            }, {
                field: 'ORDER_STATUS',
                title: '订单状态'
            }, {
                field: 'REMARK',
                title: '备注'
            }, ]
        });
</code></span>

其实重点就在这个参数里面:

<span style="color:#000000"><code>rowStyle: function (row, index) {
                //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                var strclass = "";
                if (row.ORDER_STATUS == "待排产") {
                    strclass = 'success';//还有一个active
                }
                else if (row.ORDER_STATUS == "已删除") {
                    strclass = 'danger';
                }
                else {
                    return {};
                }
                return { classes: strclass }
            },
</code></span>

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

三、表格行内编辑

编辑前
在这里插入图片描述
点击某个单元格数据
在这里插入图片描述

在这里插入图片描述

编辑后完成后
在这里插入图片描述
关于表格行内编辑,需要使用bootstrap table扩展的几个js文件。
1、引入额外的js文件

<span style="color:#000000"><code><link rel="stylesheet" href="//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="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
</code></span>

2、在cshtml页面定义表格时,添加两个属性

<span style="color:#000000"><code><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>
</code></span>

如果是在js里面初始化,写法如下:

<span style="color:#000000"><code>{
         field: "name",
         title: "名称",
         editable:true
}
</code></span>

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

<span style="color:#000000"><code>$('#tb_departments').bootstrapTable({
            url: '/Editable/GetDepartment',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber: 1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/Editable/Edit",
                    data: { strJson: JSON.stringify(row) },
                    success: function (data, status) {
                        if (status == "success") {
                            alert("编辑成功");
                        }
                    },
                    error: function () {
                        alert("Error");
                    },
                    complete: function () {

                    }

                });
            }
        });
</code></span>

重点还是看看这个事件的处理方法

<span style="color:#000000"><code>onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/Editable/Edit",
                    data: { strJson: JSON.stringify(row) },
                    success: function (data, status) {
                        if (status == "success") {
                            alert("编辑成功");
                        }
                    },
                    error: function () {
                        alert("Error");
                    },
                    complete: function () {

                    }

                });
            }
</code></span>

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

四、表格行列合并

在这里插入图片描述
1、cshtml页面

<span style="color:#000000"><code><table id="tb_report">
        <thead>
            <tr>
                <th colspan="4" data-valign="middle" data-align="center">第一季度</th>
                <th colspan="4" data-valign="middle" data-align="center">第二季度</th>
                <th colspan="4" data-valign="middle" data-align="center">第三季度</th>
                <th colspan="4" data-valign="middle" data-align="center">第四季度</th>
                <th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">年度汇总</th>
            </tr>
            <tr>
                <th data-field="JanCount" data-align="center">一月</th>
                <th data-field="FebCount" data-align="center">二月</th>
                <th data-field="MarCount" data-align="center">三月</th>
                <th data-field="FirstQuarter" data-align="center">第一季度</th>

                <th data-field="AprCount" data-align="center">四月</th>
                <th data-field="MayCount" data-align="center">五月</th>
                <th data-field="JunCount" data-align="center">六月</th>
                <th data-field="SecondQuarter" data-align="center">第二季度</th>

                <th data-field="JulCount" data-align="center">七月</th>
                <th data-field="AguCount" data-align="center">八月</th>
                <th data-field="SepCount" data-align="center">九月</th>
                <th data-field="ThirdQuarter" data-align="center">第三季度</th>

                <th data-field="OctCount" data-align="center">十月</th>
                <th data-field="NovCount" data-align="center">十一月</th>
                <th data-field="DecCount" data-align="center">十二月</th>
                <th data-field="ForthQuarter" data-align="center">第四季度</th>
                
            </tr>
        </thead>
    </table>
</code></span>

2、js初始化并无特殊

<span style="color:#000000"><code>$('#tb_report').bootstrapTable({
            url: '/GroupColumns/GetReport',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber: 1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
        });
</code></span>

当然,有人说了,你都可以不用js初始化,直接在cshtml里面用table的属性去设置url、分页等信息。确实,如果我们看过它的api,会发现它初始化的每一个属性都对应一个table的属性。型如
在这里插入图片描述
如果你的表格没有一些特殊的事件需要处理,这样是完全没有问题的。

五、表格数据导出

关于表格数据导出,bootstrap table支持三种模式的导出:basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件,比如常见的excel、xml、json等格式。

注意:导出的功能虽然很好用,但是遗憾的是不支持IE浏览器,博主试过官网上面的example,好像IE也导出不了。待验证。

导出当前页到excel
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

导出表格所有数据
在这里插入图片描述
在这里插入图片描述

导出选中行数据
在这里插入图片描述
在这里插入图片描述
至于其他类型的文件的导出,和excel基本相同,就不做效果展示了。

1、引入额外的js文件

<span style="color:#000000"><code><script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
</code></span>

2、js初始化的时候

<span style="color:#000000"><code>$('#tb_departments').bootstrapTable({
            url: '/Export/GetDepartment',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber: 1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            clickToSelect:true,
            showExport: true,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'selected'.
            columns: [{
                checkbox: true
            }, {
                field: 'Name',
                title: '部门名称'
            }, {
                field: 'ParentName',
                title: '上级部门'
            }, {
                field: 'Level',
                title: '部门级别'
            }, {
                field: 'Desc',
                title: '描述'
            }, ]
        });
</code></span>

还是来看重点:这两个属性

<span style="color:#000000"><code>showExport: true,                     //是否显示导出
exportDataType: "basic",              //basic', 'all', 'selected'.
</code></span>

showExport表示是否显示导出的按钮,exportDataType表示导出的模式是当前页、所有数据还是选中数据。

六、父子表

在这里插入图片描述
在这里插入图片描述
初始化表格的时候有一个属性“detailView”,将它设置为true,在每行的前面即可看到一个“+”形状的图标。点击这个图标即触发加载子表格的事件。

1、初始化表格,注册行展开事件

<span style="color:#000000"><code>$("#tb_powerset").bootstrapTable({
                url: '/api/MenuApi/GetParentMenu',
                method: 'get',
                detailView: true,//父子表
                //sidePagination: "server",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    field: 'MENU_NAME',
                    title: '菜单名称'
                }, {
                    field: 'MENU_URL',
                    title: '菜单URL'
                }, {
                    field: 'PARENT_ID',
                    title: '父级菜单'
                }, {
                    field: 'MENU_LEVEL',
                    title: '菜单级别'
                }, ],
                //注册加载子表的事件。注意下这里的三个参数!
                onExpandRow: function (index, row, $detail) {
                    oInit.InitSubTable(index, row, $detail);
                }
            });
</code></span>

还是来看看子表加载事件onExpandRow对应方法function (index, row, $detail)的三个参数,

index:父表当前行的行索引。

row:父表当前行的Json数据对象。

$detail:当前行下面创建的新行里面的td对象。

第三个参数尤其重要,因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象,然后我们只需要往它里面填充我们想要的table即可。

2、我们来看oInit.InitSubTable()这个方法

<span style="color:#000000"><code>//初始化子表格(无线循环)
    oInit.InitSubTable = function (index, row, $detail) {
        var parentid = row.MENU_ID;
        var cur_table = $detail.html('<table></table>').find('table');
        $(cur_table).bootstrapTable({
            url: '/api/MenuApi/GetChildrenMenu',
            method: 'get',
            queryParams: { strParentID: parentid },
            ajaxOptions: { strParentID: parentid },
            clickToSelect: true,
            detailView: true,//父子表
            uniqueId: "MENU_ID",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                checkbox: true
            }, {
                field: 'MENU_NAME',
                title: '菜单名称'
            }, {
                field: 'MENU_URL',
                title: '菜单URL'
            }, {
                field: 'PARENT_ID',
                title: '父级菜单'
            }, {
                field: 'MENU_LEVEL',
                title: '菜单级别'
            }, ],
            //无线循环取子表,直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                oInit.InitSubTable(index, row, $Subdetail);
            }
        });
    };
</code></span>

由此可以看出生成子表的原理就是创建一个table对象cur_table,然后再注册这个对象的表格初始化即可。

七、行调序

调序前
在这里插入图片描述

拖动行调序到第一行
在这里插入图片描述
1、需要额外引用两个js文件

<span style="color:#000000"><code><script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script>
<script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
</code></span>

2、在cshtml页面定义表格时,添加两个属性

<span style="color:#000000"><code><table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
</code></span>

然后js表格初始化的时候不需要做任何修改,加载出来的表格即可实现行调序的功能。

八、列调序

调序前
在这里插入图片描述

拖动列标题调序
在这里插入图片描述

调序后
在这里插入图片描述
1、额外引用几个js和css

<span style="color:#000000"><code><script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<link rel="stylesheet" href="../assets/examples.css">
<link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</code></span>

2、在cshtml页面定义表格时,添加一个属性

<span style="color:#000000"><code><table id="tb_departments" data-reorderable-columns="true"></table>
</code></span>

其他地方不用做任何修改。加载出来的表格即可实现列调序。

九、列标题搜索

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1、引入额外js

<span style="color:#000000"><code><script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>
</code></span>
  • 1

2、定义表格属性及表头属性

<span style="color:#000000"><code><table id="tb_roles" data-filter-control="true">
        <thead>
            <tr>
                <th data-field="ROLE_NAME" data-filter-control="select">角色名称</th>
                <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
                <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th>
            </tr>
        </thead>
    </table>
</code></span>

因为这里定义了表头的属性,所以,js初始化的时候就不用定义列了。
3、js初始化

<span style="color:#000000"><code>$('#tb_roles').bootstrapTable({
        url: '/Role/GetRole',
        method: 'get',
        toolbar: '#toolbar',
        striped: true,
        cache: false,
        striped: true,
        pagination: true,
        sortable: true,
        queryParams: function (param) {
            return param;
        },
        queryParamsType: "limit",
        detailView: false,//父子表
        sidePagination: "server",
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        search: true,
        showColumns: true,
        showRefresh: true,
        minimumCountColumns: 2,
        clickToSelect: true, 
    });
</code></span>

最开始,博主以为这种搜索只能用户客户端分页的情况,可是经过调试发现并非如此,原来搜索的条件都能通过json传递到服务端。我们来看调试的过程
在这里插入图片描述

后台接收参数,并反序列化
在这里插入图片描述
这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~

十、可编辑table——x-editable组件

x-editable组件介绍

x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、Jquery UI、Jquery。大致效果如下图:

在这里插入图片描述

x-editable开源地址:https://github.com/vitalets/x-editable

x-editable文档地址:http://vitalets.github.io/x-editable/docs.html

x-editable在线Demo:http://vitalets.github.io/x-editable/demo-bs3.html

首先来看看bootstrap-table-editable.js这个文件

<span style="color:#000000"><code>/**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 * extensions: https://github.com/vitalets/x-editable
 */

!function ($) {

    'use strict';

    $.extend($.fn.bootstrapTable.defaults, {
        editable: true,
        onEditableInit: function () {
            return false;
        },
        onEditableSave: function (field, row, oldValue, $el) {
            return false;
        },
        onEditableShown: function (field, row, $el, editable) {
            return false;
        },
        onEditableHidden: function (field, row, $el, reason) {
            return false;
        }
    });

    $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
        'editable-init.bs.table': 'onEditableInit',
        'editable-save.bs.table': 'onEditableSave',
        'editable-shown.bs.table': 'onEditableShown',
        'editable-hidden.bs.table': 'onEditableHidden'
    });

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _initTable = BootstrapTable.prototype.initTable,
        _initBody = BootstrapTable.prototype.initBody;

    BootstrapTable.prototype.initTable = function () {
        var that = this;
        _initTable.apply(this, Array.prototype.slice.apply(arguments));

        if (!this.options.editable) {
            return;
        }

        $.each(this.columns, function (i, column) {
            if (!column.editable) {
                return;
            }

            var _formatter = column.formatter;
            column.formatter = function (value, row, index) {
                var result = _formatter ? _formatter(value, row, index) : value;

                return ['<a href="javascript:void(0)"',
                    ' data-name="' + column.field + '"',
                    ' data-pk="' + row[that.options.idField] + '"',
                    ' data-value="' + result + '"',
                    '>' + '</a>'
                ].join('');
            };
        });
    };

    BootstrapTable.prototype.initBody = function () {
        var that = this;
        _initBody.apply(this, Array.prototype.slice.apply(arguments));

        if (!this.options.editable) {
            return;
        }

        $.each(this.columns, function (i, column) {
            if (!column.editable) {
                return;
            }

            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                .off('save').on('save', function (e, params) {
                    var data = that.getData(),
                        index = $(this).parents('tr[data-index]').data('index'),
                        row = data[index],
                        oldValue = row[column.field];

                    row[column.field] = params.submitValue;
                    that.trigger('editable-save', column.field, row, oldValue, $(this));
                });
            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                .off('shown').on('shown', function (e, editable) {
                    var data = that.getData(),
                        index = $(this).parents('tr[data-index]').data('index'),
                        row = data[index];
                    
                    that.trigger('editable-shown', column.field, row, $(this), editable);
                });
            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                .off('hidden').on('hidden', function (e, reason) {
                    var data = that.getData(),
                        index = $(this).parents('tr[data-index]').data('index'),
                        row = data[index];
                    
                    that.trigger('editable-hidden', column.field, row, $(this), reason);
                });
        });
        this.trigger('editable-init');
    };

}(jQuery);
</code></span>
  • 这个js其实是对x-editable做了一个简单的封装,增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础,于是我们行内编辑的代码变成了这样。

2、需要引用的文件如下:

<span style="color:#000000"><code><link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
</code></span>

文本框

<span style="color:#000000"><code>$(function () {
        $("#tb_user").bootstrapTable({
            toolbar: "#toolbar",
            idField: "Id",
            pagination: true,
            showRefresh: true,
            search: true,
            clickToSelect: true,
            queryParams: function (param) {
                return {};
            },
            url: "/Editable/GetUsers",
            columns: [{
                checkbox: true
            }, {
                field: "UserName",
                title: "用户名",
                editable: {
                    type: 'text',
                    title: '用户名',
                    validate: function (v) {
                        if (!v) return '用户名不能为空';

                    }
                }
            }, {
                field: "Age",
                title: "年龄",
            }, {
                field: "Birthday",
                title: "生日",
                formatter: function (value, row, index) {
                    var date = eval('new ' + eval(value).source)
                    return date.format("yyyy-MM-dd");
                }
            },
            {
                field: "DeptName",
                title: "部门"
            }, {
                field: "Hobby",
                title: "爱好"                
            }],
            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/Editable/Edit",
                    data: row,
                    dataType: 'JSON',
                    success: function (data, status) {
                        if (status == "success") {
                            alert('提交数据成功');
                        }
                    },
                    error: function () {
                        alert('编辑失败');
                    },
                    complete: function () {

                    }

                });
            }
        });
    });
</code></span>

后台对应的更新方法

<span style="color:#000000"><code>public JsonResult Edit(User user)
        {
            //更新实体
            return Json(new { }, JsonRequestBehavior.AllowGet);
        }
</code></span>

经过测试,用户名这一列基本可以自由编辑。同样,年龄这一列也可改成这样

<span style="color:#000000"><code>	{
               field: "Age",
               title: "年龄",
               editable: {
                   type: 'text',
                   title: '年龄',
                   validate: function (v) {
                       if (isNaN(v)) return '年龄必须是数字';
                       var age = parseInt(v);
                       if (age <= 0) return '年龄必须是正整数';
                   }
               }
           }
</code></span>

其他基本不用做任何修改。

代码释疑:上文在初始化的columns属性里面通过editable属性来配置可编辑的参数,注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象,也就是说我们初始化x-editable的时候可以配置哪些属性,在列的editable属性里面也可以同样配置,这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。

时间选择框

<span style="color:#000000"><code>	{
                field: "Birthday",
                title: "生日",
                formatter: function (value, row, index) {
                    var date = eval('new ' + eval(value).source)
                    return date.format("yyyy-MM-dd");
                },
                editable: {
                    type: 'date',
                    title: '生日'
                }
            }
</code></span>

其他地方不用做任何修改,得到效果:
在这里插入图片描述
这是x-editable的默认样式,如果你看着不爽,可以自行配置,x-editable提供了许多配置日期框的参数,如下:
在这里插入图片描述
当然,如果精确到时分秒,可以使用datetime类型的编辑框。如下是官方给出的时间框编辑效果,看着还不错。
在这里插入图片描述
在这里插入图片描述

下拉框

<span style="color:#000000"><code>	 {
                field: "DeptId",
                title: "部门",
                editable: {
                    type: 'select',
                    title: '部门',
                    source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
                }
            }
</code></span>

在这里插入图片描述
当然,这种本地设置数据源的方法肯定是不能满足我们需求的,因为很多情况下拉框里面的选项是从数据库远程得到的。当然x-editable也为我们考虑到了,比如我们可以这样写:

<span style="color:#000000"><code>	 {
                field: "DeptId",
                title: "部门",
                editable: {
                    type: 'select',
                    title: '部门',
                    source: function () {
                        var result = [];
                        $.ajax({
                            url: '/Editable/GetDepartments',
                            async: false,
                            type: "get",
                            data: {},
                            success: function (data, status) {
                                $.each(data, function (key, value) {
                                    result.push({ value: value.ID, text: value.Name });
                                });
                            }
                        });
                        return result;
                    }
                }
            }
</code></span>

后台我们配置一个方法

<span style="color:#000000"><code>public JsonResult GetDepartments()
        {
            var lstRes = new List<Department>();
            lstRes.Add(new Department() { ID = "1", Name = "研发部" });
            lstRes.Add(new Department() { ID = "2", Name = "销售部" });
            lstRes.Add(new Department() { ID = "3", Name = "行政部" });
            lstRes.Add(new Department() { ID = "4", Name = "创意部" });
            lstRes.Add(new Department() { ID = "5", Name = "事业部" });
            return Json(lstRes, JsonRequestBehavior.AllowGet);
        }
</code></span>

代码释疑:这里有一点需要说明一下,细心的园友可能发现了,我们这里的 field: “DeptId” ,为什么这里要配置DeptId而不是DeptName呢?很简单,因为我们需要和数据源里面的value值对应。

复选框

<span style="color:#000000"><code>	{
                field: "Hobby",
                title: "爱好",
                editable: {
                    type: "checklist",
                    separator:",",
                    source: [{ value: 'bsb', text: '篮球' },
                         { value: 'ftb', text: '足球' },
                         { value: 'wsm', text: '游泳' }],
                }
            }
</code></span>

在这里插入图片描述
当然,如果远程数据,也可以使用类似上文的方法去取。

问题小结

1、关于中文。

刚开始,博主没有引用 这个包,所以界面找不到记录是显示的是英文,如下:
在这里插入图片描述
后来也是查资料了解到,bootstrap table里面原来还有一个中文包,把它添加进来就好了。

2、表头宽度不对齐问题。

如果提交之后的文本内容过多,表格的thead里面th的宽度和tbody里面td的宽度不对其的问题。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值