BootstrapTable使用教程

最新推荐文章于 2024-05-14 00:41:07 发布

java开发小朋友

最新推荐文章于 2024-05-14 00:41:07 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/qq_33781458/article/details/101015150

版权

BootstrapTable使用教程

说明：它是一款JS组件系列–表格组件神器
例如：

<html lang="en">
         <head>
                 <!--需要引入的一些插件-->
                 <meta charset="UTF-8">
                 <title>xxxxxx</title>
                 <link rel="stylesheet" href="../../../css/bootstrap.min.css">
                 <link rel="stylesheet" href="../../../public/css/plugins/bootstrap-table/bootstrap-table.min.css">
                 <script src="../../../js/jquery.min.js"></script>
                 <script src="../../../js/bootstrap.min.js"></script>
                 <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
                 <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
         </head>
         <body>
                  <table id="mytab" class="table table-hover"></table>
                  <script>
                          $('#mytab').bootstrapTable({
                          url:'/Home/GetDepartment',     //请求后台的url(*)
                          method:'get',            //请求方式（*）
                          toolbar:'#toolbar',     //工具按钮使用哪个容器
                          striped:true,      //是否显示行间隔色
                          cache:false,       //是否使用缓存，默认为true,一般情况下需要设置（*）
                          pagination:true,      //是否显示分页（*）
                          sortable:false,         //是否启用排序
                          sortOlder:"asc",      //排序方式
                          queryParams:queryParams,    //传递参数
                          sidePagination:"server",    //分页方式，client为客户端分页，server为服务器端分页
                          pageNumber:1,           //初始化加载第一页，默认第一页
                          pageSize:10,             //每页的记录行数（*）
                          pageList:[10,25,50,100],         //可供选择的每页的行数（*）
                          search:true,      //是否显示表格搜索，此操作仅在客户端搜索，不会进服务器端
                          showColumns:true,      //是否显示所有列
                          showRefresh:true,        //是否显示刷新按钮
                          minimumCountColumns:2,        //最少允许的列数
                          clickToSelect:true,           //是否启用点击选中行
                          height:500,         //如果没有设置height属性，则自动根据记录条数设置行高
                          uniqueId:"ID",        //每一行的唯一标识，一般为主键列
                          showToggle:true,       //是否显示详细视图和列表视图的切换按钮
                          cardView:false,       //是否显示详细视图
                          detailView:false,         //是否显示父子表
                          columns:[{
                                           field:'id',
                                           title:'登录名'
                                          },{
                                           field:'name',
                                           title:'昵称'
                                          },{
                                           field:'price',
                                           title:'角色'
                                          },{
                                           field:'op',
                                           title:'操作',
                                           width:120,
                                           align:'center',
                                           valign:'middle',
                                           formatter:actionFormatter,
                                           },                 
                                           ]
                                         });
                        //操作栏的格式化
                        function actionFormatter(value,row,index){
                         return[
                               '<button type="button" id="xxx1" class="xxx" style="margin-right:10px:">按钮1</button>',
                               '<button type="button" id="xxx2" class="xxx" style="margin-right:10px">按钮2</button>',
                               '<button type="button" id="xxx3" class="xxx" style="margin-right:10px">按钮3</button>'
                         ].join('');
                         }
                   window.operateEvents={
                       /*按键1*/
                        “click #xxx1”:function(e,value,row,index){},
                      /*按键2*/
                        “click #xxx2”:function(e,value,row,index){},
                      /*按键3*/
                          "click #xxx3":function(e,value,row,index){}
                        };
                  </script>
         </body>
</html>

java开发小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootstrapTable使用教程

BootstrapTable使用教程说明：它是一款JS组件系列–表格组件神器例如：<html lang="en"> <head>  <meta charset="UTF-8"> <titl...
复制链接

扫一扫