精华内容
下载资源
问答
  • bootstrapbootstrap-table

    2019-02-21 19:34:55
    包括bootstrap官方文档和bootstrap-table,其中bootstrap-table是在git下载下来的
  • bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
  • bootstrap-table-export.js bootstrap-table表格导出js
  • bootstrap-table-demo

    千次下载 热门讨论 2015-03-25 20:03:35
    bootstrap-table是一个功能强大的table组件,支持分页、全文检索、导出等
  • bootstrap-table插件:bootstrap-editable,可编辑下拉框,以及代码实例,
  • 压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
  • bootstrap-table-edit

    2018-09-12 08:58:44
    bootstrap-table-edit.js插件,使用bootstrap编辑行内单元格必用的方便、快捷的js插件
  • 工作需要用到bootstrap-tablebootstrap table)。 网上找了例子参差不齐,实在不堪入目。 我只要最简单的例子,网上没有所需要的,只我自已整理一份了。 该demo包含5个可以运行的最基本的例子。 希望能得到像我...
  • bootstrap-table-editable.js

    千次下载 热门讨论 2016-09-14 13:39:23
    bootstrap-table-editable.js
  • 一、思想 第一:为什么要用bootstrap-table来构建table?...也就是说在用bootstrap-table来构建table的时候,我们必须要有想法,要对bootstrap的思路和实现有个简单的了解,这样,思维的角度和高度一致了...

    一、思想

    • 第一:为什么要用bootstrap-table来构建table?
    • 第二:bootstrap是前端框架,他的思路或者说优势(特点)是什么?
    • 第三:要以一种什么样的角度去实现用bootstrap-table来构建table?

    也就是说在用bootstrap-table来构建table的时候,我们必须要有想法,要对bootstrap的思路和实现有个简单的了解,这样,思维的角度和高度一致了,去解决问题就简单多了。看下图:

    Bootstra框架用途和优点

    我们可以使用bootstra框架提供的样式和组件快速的完成一个网站的前端页面,只需要引用一些定义好样式和组件(通过定义好的class来引用相应的样式和组件),就可以完成一个非常漂亮网页。而且bootstra框架还支持自适应,在不同大小的屏幕上会自动调节网页显示的内容,避免了在在pc上很漂亮的网页,而在移动端(小屏幕)左右出现滚动条,网页内容太小看不清等不利于用户体验的表现。

    OK,也就是说,我们要以组件和调用、声明的思路去用BootStrap-Table。。。。明确了这一点,下面就简单了。

    二、在开始之前

    现在我们来说说BootStrap-Table的后台,BootStrap-Table的使用是离不开后台的,他需要页面数据来填充表格,bootstrap-table的一大特点就是不需要多余的代码,只要你传的参数的结构和他需要的对应上,配置一下就可以完美的在页面上展现了,因为他把其中的操作都已经封装好了,那么他的数据的结构是什么样子的呢?

    在BootStrap-Table自己YY的数据信息的结构来说是这样的:

    (用简单一点的结构表现)一个ArrayList的集合,里面存放了某一个实体类(比如:studentPoint)的很多个对象,而对象本身自带很多属性(比如:id,name,id_subject,subject_point,avgPoint,...)

    说白了就是:一个集合里面放了对象,对象里面的数据是以键值对形式给出的。。。。那么可以转变为:

    一个ArrayList的集合,利用循环声明N个map集合,再循环里面给map集合以键值对的形式放值并将map集合add到list中。

    所以代码就是这个样子的:

    Map<String, String> redisMap = null;
    List<Map<String, String>> redisList = new ArrayList<Map<String, String>>();
    	for (int i = 0; i < 100; i++) {
    		redisMap = new HashMap<>();
    		redisMap.put("id",i+"");
    		redisMap.put("id_subject", i+"数学");
    		redisMap.put("subject_point", "英语"+i);
    		redisMap.put("name", "守望先锋可好玩了");
    		redisMap.put("avgPoint", i*2+"");
    		redisList.add(redisMap);
    	}

    当然,有点常识的都记得转String。

    三、在开始之前二

    资源获取:https://download.csdn.net/download/jason_a/10817405

    导入以上文件

    四、开始构建

    之前说过了,bootStrap是以组件的思维进行的,那么理所当然,构建table,其实也就是初始化bootStrap-table。

    而在bootStrap-table中构建table的方式有两种。

    第一种就是仅仅在HTML中声明一个<table></table>,然后给定id,利用js文件绑定初始化的容器。

    第二种就是在html中进行初始化,在进行table构建的时候,在td、th等标签里面进行一些属性的给出,达到和js实现一样的效果。

    现在我们从简单的开始入手,先说第一种:

    首先html中就几行代码:

    <div id="main" class="div_main">
    	<table id="ArbetTable"></table>
    </div

    然后,就是js文件:

    需要说明的是,我使用的不是这个方法,所以这是copy的。

    $(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;
    };

    这个方式不太懂的可以去看下下面的博客:

    比较精简的:https://www.cnblogs.com/baixiaoguang/p/7094459.html

    比较细节一点的:https://www.cnblogs.com/wuhuacong/p/7284420.html

    扩展比较多的:http://www.cnblogs.com/landeanfen/p/4976838.html

    可以参考一下的:https://www.cnblogs.com/franknihao/p/8145597.html?tdsourcetag=s_pcqq_aiomsg

    总之上面的部分其实也很好懂,最最重要的就是oTableInit.Init这个方法了。

    另外有两个方向:

    第一就是打开分页开关:

    打开分页开关的时候,因为上面设置的是服务器端分页所以在你传数据过来的时候,数据的结构会改变。

    {total:22,rows:{}}会以左边的形式传递,如果不是这个形式会有问题。说明一下:total是记录数,row{}是页面上显示的数据

    第二就是关闭分页开关:

    当你关闭分页开关的时候,你传递的参数可以不是{total:22,rows:{}}这个形式了【没有实际验证过】但是为了后面的可扩展性,建议还是传递一样的参数。这个时候,下面的//得到查询的参数 oTableInit.queryParams 这一部分可以注释掉了。

    columns这个属性和下面的字段,就是用来显示页面信息的,field是你的数据中的key,title就是页面上显示的字段名。

    第二种,仅仅以html中的标签进行定义,已达到效果。

    这个方法其实也很简单,有了第一种的基础以后,在实现这个就会简单很多。

    首先,先在html中声明table。然后,按照原来接触过的html的语法写一个table,只写表头。然后在表头的的标签<th>中定义属性。关键的属性就是data-field、data-valign、data-align和表头的文字。然后,查阅文档将data-url等一系列的关键属性也添加上去。

    文档路径:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

    这里的标签列就是需要加上去的属性的名字,自己看着定义就好。参照上面的初始化的那些字段给。

    哈哈,接下来就是我使用的第三种了:

    两种相结合的方式定义和初始化table。

    因为我需要的样式要求比较高,对CSS3也比较熟悉,所以就使用的这个方法。

    首先页面上定义table

    <table id="ArbetTable">
        <thead>
        <tr>
            <th data-field="id" data-valign="middle" data-align="center">学号</th>
            <th data-field="id_subject" data-valign="middle" data-align="center">科目</th>
            <th data-field="subject_point" data-valign="middle" data-align="center">科目分数</th>
            <th data-field="name" data-valign="middle" data-align="center">姓名</th>
            <th data-field="avgpoint" data-valign="middle" data-align="center">平均分</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <td data-field="name" data-valign="middle" data-align="center">班级</td>
            <td data-field="avgpoint" data-valign="middle" data-align="center" colspan="4" data-search-formatter></td>
         </tr>
        </tfoot>
        </table>

    在写js:

    $(function() {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
        });
    	var TableInit = function() {
    		var oTableInit = new Object();
    		//初始化Table
    		oTableInit.Init = function() {
    			$('#ArbetTable').bootstrapTable({
    				url : '/redismanage/bootstrap', //请求后台的URL(*)
    				method : 'post', //请求方式(*)
    				toolbar : '#toolbar', //工具按钮用哪个容器
    				striped : true, //是否显示行间隔色
    				cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    				pagination : false, //是否显示分页(*)
    				sortable : false, //是否启用排序
    				sortOrder : "asc", //排序方式
    				queryParams : oTableInit.queryParams,//传递参数(*)
    				sidePagination : "server", //分页方式:client客户端分页,server服务端分页(*)
    				pageNumber : 1, //初始化加载第一页,默认第一页
    				pageSize : 10, //每页的记录行数(*)
    				pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数(*)
    				search : false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
    				contentType : "application/x-www-form-urlencoded",
    				strictSearch : true,
    				showColumns : false, //是否显示所有的列
    				showRefresh : false, //是否显示刷新按钮
    				minimumCountColumns : 2, //最少允许的列数
    				clickToSelect : false, //是否启用点击选中行
    				//height : 300, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
    				uniqueId : "no", //每一行的唯一标识,一般为主键列
    				showToggle : false, //是否显示详细视图和列表视图的切换按钮
    				cardView : false, //是否显示详细视图
    				detailView : false, //是否显示父子表
    				classes :'table-no-bordered',
    			});
    		};
    
    	//得到查询的参数
    	oTableInit.queryParams = function(params) {
    		var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
    			limit : params.limit, //页面大小
    			offset : params.offset
    		};
    		return temp;
    	};
    	return oTableInit;
    };

    在这里需要说的一点就是JavaScript中的classes :'table-no-bordered',这个属性了。在JavaScript文件中加入这句话就会让组件的table不在自己自动给出的样式,会恢复默认的样式,然后在根据自己的需求,用CSS3进行样式的定义了。

    另外,说一下我目前遇到的问题:我需要在显示的信息的下面加一行补充总结,也就是上面html中table的<tfoot>这一部分。但是因为过来的数据自动就会匹配到表格中,所以目前怎么解决也还正在看。

    样式代码也给一份吧,可以参考下的:

    <style>
    #ArbetTable {
    	margin:0;
    	padding:0;
    	width: 100%;
    	height: auto;
    	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;
    	border-collapse: collapse;
      	-webkit-transform: translateZ(0);
    	-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    }
    
    #ArbetTable th {
    	font-size:15px;
    	color:white;
    	font-weight:bold ;
    	background-color: #61c774;
    	line-height: 35px;
    	height: 35px;
    	width: auto;
      	border-left: 1px solid #e9e9e9;
    }
    #ArbetTable td {
    	text-align:center;
    	font-size:14px;
    	line-height: 35px;
    	height: 35px;
    	color:black;
    	text-align: center;
    	border: 1px solid #e9e9e9;
    	border-right: 1px solid #e9e9e9;
    	background: white;
    	
    }
    
    </style>

     

    展开全文
  • bootstrap-table-冻结列样例,bootstrap-table-冻结列样例,bootstrap-table-冻结列样例,
  • bootstrap-table-zh-CN.js

    2018-08-27 10:44:28
    bootstrap-table-zh-CN.js,有需要就下载吧
  • bootstrap-table-reorder-rows.js ,bootstraptable行拖动
  • bootstrap-table的实例编写 bootstrap-table的实例编写
  • 压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
  • 首先把bootstrap-table.js和bootstrap-table.css下载下来。 把英文改成中文,如下: 把需要用表格的页面在 </body>前加入此JavaScript代码: <!-- 表格分页相关 --> <script type="text/...

    最终效果如下:

    翻页后

    首先把bootstrap-table.js和bootstrap-table.css下载下来。

    把英文改成中文,如下:

    把需要用表格的页面在

    </body>前加入此JavaScript代码:

    <!-- 表格分页相关 -->
    <script type="text/javascript">
    	$(document).ready(function () {
    
    		$("#table_page").bootstrapTable({
    
    			columns:[{field: 'name', title: '名称'},
    				{field: 'power', title: '当前功率'},
    				{field: 'up', title: '总调节上限'},
    				{field: 'down', title: '总调节下限'}]
    		})
    	})
    </script>

    此时表格HTML数据如下:

    <table class="table table-bordered tile" id="table_page" data-pagination="true" data-side-pagination="client" data-page-size="3">
    	<thead>
    	<tr>
    		<th>名称</th>
    		<th>当前功率</th>
    		<th>总调节上限</th>
    		<th>总调节下限</th>
    	</tr>
    	</thead>
    	<tbody>
    	<tr>
    		<td>1</td>
    		<td>Jhon </td>
    		<td>Makinton </td>
    		<td>@makinton</td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td>Malinda</td>
    		<td>Hollaway</td>
    		<td>@hollway</td>
    	</tr>
    	<tr>
    		<td>3</td>
    		<td>Wayn</td>
    		<td>Parnel</td>
    		<td>@wayne123</td>
    	</tr>
    	<tr>
    		<td>XX</td>
    		<td>1000</td>
    		<td>1000</td>
    		<td>100</td>
    	</tr>
    	<tr>
    		<td>XX</td>
    		<td>1112</td>
    		<td>2000</td>
    		<td>500</td>
    	</tr>
    	</tbody>
    </table>

     

    展开全文
  • bootstrap -table的最新官网jar包。
  • bootstrap-table使用总结

    万次阅读 多人点赞 2017-03-01 14:01:14
    https://github.com/wenzhixin/bootstrap-table 2、文档: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 3、引用:   &lt;link rel="stylesheet" href="bootstrap.min....

    1、下载:

    https://github.com/wenzhixin/bootstrap-table

    2、文档:

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

    3、引用:

     

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


    注意:最后一个是一些提醒文字,如果有引用这个js则会以中文提示,如果没有则以英文提示。

     

    4、基本用法:

    html里:

     

    <table id="table"></table>


    js里:

     

     

            $('#table').bootstrapTable({
                columns: [{
                    field: 'id',
                    title: 'Item ID'
                }, {
                    field: 'name',
                    title: 'Item Name'
                }, {
                    field: 'price',
                    title: 'Item Price'
                }],
                data: [{
                    id: 1,
                    name: 'Item 1',
                    price: '$1'
                }, {
                    id: 2,
                    name: 'Item 2',
                    price: '$2'
                }]
            });


    这个data也可以换成url:

     

     

    $('#table').bootstrapTable({
        url: 'data1.json',
        columns: [{
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }, ]
    });

     

    注意:url和data的区别是:url是异步请求远程数据;data是直接把数据赋值给他。在主表和子表都一样可以这样使用。

     

    5、引入fonts:

    一些图标需要用到bootstrap里面的文件,要从下载的bootstrap包里面拷贝过来放到对应的目录(看错误提醒)。

    但是只放进去是访问不了的,因为他不是普通的文件,所以要设置。

    进入iis管理器,找到“MIME类型”,双击进去,在右边菜单点击“添加”,分别添加以下类型:

     

    .woff
    application/x-font-woff
    
    .woff2          
    application/x-font-woff
    


    再刷新页面就可以加载fonts里面这些文件了。

     

     

    6、定制组件

     

     

    (function () {
        function init(table,url,params,titles,hasCheckbox,toolbar) {
            $(table).bootstrapTable({
                url: url,                           //请求后台的URL(*)
                method: 'post',                     //请求方式(*)
                toolbar: toolbar,                   //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                sortable: false,                    //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: queryParams,           //传递参数(*),这里应该返回一个object,即形如{param1:val1,param2:val2}
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber:1,                       //初始化加载第一页,默认第一页
                pageSize: 20,                       //每页的记录行数(*)
                pageList: [20, 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: createCols(params,titles,hasCheckbox),
                data: [{
                    id: 1,
                    name: 'Item 1',
                    price: '$1'
                }, {
                    id: 2,
                    name: 'Item 2',
                    price: '$2'
                }]
            });
        }
        function createCols(params,titles,hasCheckbox) {
            if(params.length!=titles.length)
                return null;
            var arr = [];
            if(hasCheckbox)
            {
                var objc = {};
                objc.checkbox = true;
                arr.push(objc);
            }
            for(var i = 0;i<params.length;i++)
            {
                var obj = {};
                obj.field = params[i];
                obj.title = titles[i];
                arr.push(obj);
            }
            return arr;
        }
        //可发送给服务端的参数:limit->pageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc')
        function queryParams(params) {
            return {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset  //页码
                //name: $("#txt_name").val()//关键字查询
            };
        }
        // 传'#table'
        createBootstrapTable = function (table,url,params,titles,hasCheckbox,toolbar) {
            init(table,url,params,titles,hasCheckbox,toolbar);
        }
    
    })();

     

     

     

     

     

    1、调用:

     

    createBootstrapTable('#table','',['id','name','price'],['Item ID','Item Name!','Item Price!'],true,'#toolbar');

     

    2、模块:

    注意,这些只要添加上一行代码就会自动显示的:

     

    pagination 显示分页
    search     搜索功能
    showColumns  控制显示哪些列的按钮
    showRefresh  刷新按钮
    showToggle   详细视图和列表视图切换按钮


    但是这个不会:

     

     

    toolbar


    这个toolbar会关联到我们填的一个元素,但是他并不会自动创建所有菜单,而是我们要创建好菜单,他只不过把这个菜单放到合适的位置,实现这些菜单的功能还需要我们自己去做。toolbar如下:

     

     

        <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>

     

    3、sidePagination

    这个是选择服务端或者客户端分页,客户端则填'client',服务端则填'server',他们的数据结构是不同的。

    这是客户端分页的数据结构:

     

    [
        {
            "id": 0,
            "name": "Item 0",
            "price": "$0"
        },
        {
            "id": 1,
            "name": "Item 1",
            "price": "$1"
        },
        {
            "id": 2,
            "name": "Item 2",
            "price": "$2"
        }
    ]


    这是服务端分页的数据结构:

     

     

    {
        "total": 200,
        "rows": [
            {
                "id": 0,
                "name": "Item 0",
                "price": "$0"
            },
            {
                "id": 1,
                "name": "Item 1",
                "price": "$1"
            },
            {
                "id": 2,
                "name": "Item 2",
                "price": "$2"
            }
        ]
    }

     

    这是因为客户端来分页的话,他直接根据数据总量进行判断要分成多少页,而服务端的话就需要返回一个total给他,因为服务端返回给的数据是一个片段,他没办法根据这个片段来计算多少页。

     

    注意:这里可以看到,服务端分页和客户端分页数据结构的层次是不同的。他接受哪种数据结构,取决于是否加这个参数:

     

    sidePagination:'server'

    特别是做子表的时候,因为觉得没有做分页的必要,就没了这句话,结果就是数据过去了死活不显示,排查很久才发现是这个问题。

     

     

    4、参数上传

    我们知道,当我们对table设置一个url的时候,他不仅是请求这个url,他还会带一些参数上来,他到底带来了什么参数?

    我们来一个最简单的测试一下:

     

            $('#table').bootstrapTable({
                striped: true,
                pagination:true,
                sidePagination:'server',
                url:'/xx/yy',
                columns: [{
                    field: 'id',
                    title: 'Item ID'
                }, {
                    field: 'name',
                    title: 'Item Name'
                }, {
                    field: 'price',
                    title: 'Item Price'
                }]
            });


    这里我们简单的初始化了一个bootstrap-table,数据来源我们指定了url,有个参数叫method,默认是'get',也可以设为'post',如果实际上线最好设为'post',但是这里我们就用默认的好了,可以直接在浏览器的控制台看到他请求的参数。

     

    我们可以看到带了一些参数上来

    (1)order=asc表示排序是升序排序,这个我们可以在参数里面设置:sortOrder: "asc/desc"(两种选一种)

    (2)offset=0表示从数据从哪个row开始,简单的说从第几行数据开始

    (3)limit=10表示选取多少个数据,也就是一页有多少条数据

    2,3跟参数pageNumber和pageSize是紧密关联的。

    pageSize对应的就是limit,因此改变pageSize就改变了limit;

    pageNumber结合pageSize可以算出offset。

    比如pageNumber=1,pageSize=30,那么offset=0,limit=30;

    比如pageNumber=2,pageSize=30,那么offset=30,limit=30。

    他不传第几页上来,而是传从第几行开始,选取多少行,这样一个数据。

    注意:pageNumber从1开始而非从0开始,但是offset是从0开始的。

    如果我尝试设置pageNumber:0,pageSize:30我们会发现offset=-30,limit=30,这是不对的。

    5、参数的查看、修改

    那么我们可以直接查看这些参数以及修改吗?答案是可以的。

    有个原始参数就是用来配置这个:

     

    queryParams:testQParams


    创建函数:

     

     

    function testQParams(params) {
                alert('params.limit='+params.limit+' params.offset='+params.offset);//我们可以这样查看这些要上传的参数
            }


    我们当然可以修改或者添加参数:

     

     

            function testQParams(params) {
                return {
                    limit:params.limit,
                    offset:params.offset,
                    order:params.order,
                    abc:123,
                    def:456
                }
            }


    有几点要注意:

     

    1、我们当然可以修改limit、offset这些参数,但是不建议在这里改,我们可以用上面这种方式还给他赋值;

    2、虽然没有改动他,我们也不要丢了,如果在这里没写参数就丢了,传递的参数会以这里的为准;

    3、我们可以增加新的参数。

    7、显示图片

    字段通常是一个地址,那么我们要显示图片应该使用formatter:

     

    {
                    field: 'thumb_img',
                    title: '主图',
                    align: 'center',
                    formatter:function (value,row,index) {
                        return '<img  src='+value+' width=50 class="img-rounded" >';
                    }
                }


    可以直接定义宽度,图片会自动进行缩放。

     

     

    8、行内编辑功能

    <1>bootstrap-editable

    需要一个bootstrap插件叫做bootstrap-editable,现在改名叫做x-editable了,可以适用不同的框架。

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

    下载下来之后,找到dist/bootstrap3-editable里面的3个文件夹css,js,img都拷贝到我们的网站目录下。

    <2>bootstrap-table-editable

    这是一个bootstrap-table的插件(插件的插件),这个插件呢就在我们下载的bootstrap-table包里,路径是dist/extensions/editable

    把他拷到我们的对应目录下即可

    <3>引入

     

    <link href="<?php echo '/static/bootstrap/extensions/editable/css/bootstrap-editable.css'; ?>" rel="stylesheet">
    <script src="<?php echo '/static/bootstrap/extensions/editable/js/bootstrap-editable.js'; ?>"></script>
    <script src="<?php echo '/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js'; ?>"></script>


    注意他们跟jquery、bootstrap、bootstrap-table的依赖关系,所以要放在他们的后面。

     

     

    <4>使用1:

    在列定义里面加上editable:true,比如:

     

                    field:'addr',
                    title:'地址',
                    editable:true,


    就会变成可编辑状态了

     

     

    <5>使用2:

    编辑完成我们要添加一个回调

    在bootstrapTable顶级的属性定义里面,添加一个回调函数:

     

                onEditableSave:function (field,row,oldValue,$el) {
                    //alert('保存addr='+row.addr+' id='+row.itemid);
                }


    这里我们可以看到当编辑完保存的时候就会调用到这个函数,在row里面有所有当前行的信息,那么我们可以通过把这个信息用ajax传递到服务器保存起来。

     

    编辑功能完成。

     

    <6>保存验证+ajax保存确认+取消保存

    我们在实际开发当中,经常需要这样的功能:

    (1)验证用户的输入是否正确;

    (2)如果用户输入不正确,就不要在页面上显示了,直接显示保存不了;

    (3)如果用户输入正确,通过ajax请求保存到后台;

    (4)如果保存到后台失败,应该返回前端失败的消息,前端的内容回退到保存前的状态;

    (5)如果保存成功,前端也做相应的显示样式调整及状态确定。

    在上面“使用1”及“使用2”当中,当点击保存的时候,在save函数里验证不起作用,你再验证他也保存进去了。所以验证另有地方。

    应该这样做:

    (1)把editable:true改为:

     

                        validate:function (value) {
                            value = $.trim(value);
                            if (!value)
                            {
                                return '必须填入一个网址,不能放空!';
                            }
                            if (!checkUrl(value))
                            {
                                return '输入的不是一个合法的网址!';
                            }
    
                        }


    另外,在这个函数里,要取的row数据可以这样:

     

     

                            var data = $('#table').bootstrapTable('getData');
                            var index = $(this).parents('tr').data('index');
                            console.log(data[index]);


    这是因为这个$(this)可以指向这个当前单元格

     

    这样输入就有验证功能,return一个字符串他会自动不保存进去,而显示这个字符串的提示。

    注意,验证的保存规则:

    如果return '';  则会保存空字符串;

    如果return 'xxx';  则不会保存这个字符串,而是作为提示显示出来;

    如果不return,则按照原value保存。

    (2)把onEditableSave改为:

     

                    onEditableSave:function (field,row,oldValue,$el) {
                        // 测试证明oldValue取到的是undefined
                        $.post('xxx/yyy')
                            .done(function (result) {
                                //在这里解析result
                                if(保存成功)
                                {
                                    // 页面提示保存成功
                                }else
                                {
                                    // 页面提示保存失败
                                    // buy_addr_bak这个字段是从服务端传过来与buy_addr等值的一个字段,就是为了在必要的时候恢复数据
                                    $el.text(row.buy_addr_bak);
                                }
                                // 不管保存成功还是失败,已经不是编辑状态,把加粗去掉
                                $el.removeClass('editable-unsaved');
                            });
                    }


    另外,在这个函数里,如果要取到row数据可以这样(虽然这里没有必要,参数里已经有了):

     

     

                    var data = $('#table').bootstrapTable('getData');
                    var index = $el.parent().parents('tr').data('index');//注意这里一个是parent,一个是parents
                    console.log(data[index]);

     

     

     

    9、自动换行

    在给table加上样式:

     

    style="word-break:break-all; word-wrap:break-all;"

     

    10、父子表

     

    功能:点击行首的加号,下拉展开一个子表

    <1>在父表的属性里添加

     

    detailView:true


    <2>添加回调函数

     

     

                    onExpandRow:function (index,row,$detail) {
                        initSubTable(index,row,$detail);
                    }


    当点击行首的加号,将会触发这个回调函数,这个回调函数会再去调用执行函数。

     

     

    <3>执行函数

     

            function initSubTable(index,row,$detail) {
                var parentid = row.MENU_ID;
                var cur_table = $detail.html('<table></table>').find('table');//注意这个'table'不是一个id,他在任何情况下不需要改变
                $(cur_table).bootstrapTable({
                    url:'',
                    method:'post',
                    queryParams:{strParentID:parentid},
                    ajaxOptions:{strParentID:parentid},
                    clickToSelect:true,
                    detailView:true,
                    uniqueId:"MENU_ID",
                    pageSize:10,
                    pageList:[10,25],
                    columns:[
                        {
                            filed:'from',
                            title:'from'
                        },
                        {
                            field:'url',
                            title:'url'
                        },
                        {
                            field:'to',
                            title:'to'
                        }
                    ],
                    onExpandRow:function (index,row,$Subdetail) {
                        initSubTable(index,row,$Subdetail);
                    }
                });
            }


    注意,这里做了一个递归,即子表里面还可以展开孙表,我们也可以不需要,去掉就可以了。

     

    11、刷新功能

     

    $('#table_search').bootstrapTable(
                        "refresh",
                        {
                            url:"/xxx/xxx/xxx/search"
                        }
                    );

     

     

     

     

     

     

     

     

     

    参考文章:

    http://www.cnblogs.com/landeanfen/p/4976838.html

     

    展开全文
  • BootStrapTable可通过bootstrap-table-resizable.js扩展实现对列的可拖曳调整,需要配合jquery.resizableColumns.min.js或者colResizable-1.6.min.js使用。 bootstrap-table-resizable.js可通过官方网站下载,可在...

    BootStrapTable可调整列宽

    	BootStrapTable可通过bootstrap-table-resizable.js扩展实现对列的可拖曳调整,需要配合jquery.resizableColumns.min.js或者colResizable-1.6.min.js使用。
    	bootstrap-table-resizable.js可通过官方网站下载,可在下载的压缩包的 /dist/extensions/ 文件夹下找到,下载地址:https://bootstrap-table.com/docs/getting-started/download/
    	
    	jquery.resizableColumns.min.js可通过git下载,下载地址:https://github.com/dobtco/jquery-resizable-columns
    
    	colResizable-1.6.min.js可通过git或者官网下载,官网地址:http://www.bacubacu.com/colresizable/#samples;
    	git地址:https://github.com/alvaro-prieto/colResizable
    

    1、引入js和css

    <link rel="stylesheet" href="<%= request.getContextPath() %>/tableResizable/resizableColumns/css/jquery.resizableColumns.css?v=${version.version}" type="text/css" />
    <script src="<%= request.getContextPath() %>/tableResizable/js/bootstrap-table-resizable.min.js" type="text/javascript"></script>
    <script src="<%= request.getContextPath() %>/tableResizable/resizableColumns/js/jquery.resizableColumns.min.js" type="text/javascript"></script>
    <%--<script src="<%= request.getContextPath() %>/colResizable/js/colResizable-1.6.min.js" type="text/javascript"></script>--%>
    
    **注:对应路径请填写实际项目路径**
    

    2、取消height设置

    	使用bootstrap-table-resizable.js时,不能设置table的height属性,否则会出现表头无法随table-body调整的问题,且只能在table-body拖曳列宽,暂时未找到解决方法。
    	官方文档提示:
    

    在这里插入图片描述

    3、在初始化时调用方法

    使用bootstrap-table-resizable.js + jquery.resizableColumns.min.js
    $("#stationTable").resizableColumns();
    
    使用bootstrap-table-resizable.js + colResizable-1.6.min.js
    $("#stationTable").colResizable({
            liveDrag: true,
            minWidth: 8
        });
    

    4、注意事项

    	1、使用bootstrap-table-resizable.js + colResizable-1.6.min.js时,对table-td可不设置data-width,让bootstrap-table列自适应即可。
    	如果设置了data-width,在使用bootstrap-table-resizable.js + colResizable-1.6.min.js时,可能需要重新调整data-width,以免出现有些列显示不全的问题。
    	2、使用以上两种实现方式时,如果刚开始进入页面时table无数据,之后通过在页面中更换查询条件使用refresh刷新table成有数据状态时,可能出现可拖曳的位置跟表格的边框不齐的问题,大概是因为有数据时table会自适应,调整了列宽,导致与无数据时的列宽不一致。
    

    5、补充问题

    1)resizableColumns与showColumns同时使用的问题

    分为两种情况:

    	a、调整列宽时,使用属性配置,如下,使用这种方式时,显示或者隐藏列后,仍可以调整列宽,但是在第一次请求时,可能出现 调整列 与 表格边框不对齐的情况。
    
    	$('#table').bootstrapTable({
    		...
    		resizable: true;
    		...
    	})
    	
    	or
    	
    	<table data-resizable="true"></table>
    
    	b、在onLoadSuccess()中使用$('table').resizableColumns()的形式,这种不会出现a中所说的可调整列与表格边框不对齐的情况,但是一旦显示或隐藏列后,就不能再次调整列宽了,目前的解决方法是绑定onColumnSwitch事件,显示或隐藏列时重新刷新一下表格。
    
    $('#table').bootstrapTable({
    		...
    		onLoadSuccess: function(data) {
                ...
                $("#table").resizableColumns();
            },
            onColumnSwitch: function (field, checked) {
                refreshTable();
            }
    	})
    
    展开全文
  • 注意:网上很多版本中,只说明了添加这一个js依赖就好,但在使用过程中,由于会涉及到中文编码、以及bootstrap-table-export.js中继承的是tableExport.js,所以还需要添加下面几个依赖: &l...
  • Bootstrap表格插件--bootstrap-table

    千次阅读 2017-12-05 11:24:07
    一、简介 ...bootstrap-table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。 官网地址: ...
  • 用于bootstrap数据表格的导出插件,在引入bootstrap其他主要js和css的前提下,再将bootstrap-table-export.js和tableExport.js引入
  • bootstrap-table拖拽表格改变列宽,兼容主流浏览器,兼容body与header对齐
  • Bootstrap-table 实例

    2018-10-29 19:51:53
    Bootstrap-table 实例 下载 官网地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 下载解压后可以看到如下目录格式 ...
  • 如有使用疑问,联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
  • bootstrap-table-demo说明

    千次阅读 2017-11-27 15:05:05
    bootstrap-table-demo说明文档
  • bootstrap-table插件数据加载方式

    万次阅读 2015-12-08 14:16:49
    jquery ajax bootstrap-table赋值
  • bootstrap-table插件

    千次阅读 2019-06-02 14:51:54
    Overview(bootstrap-table概述) 官网网址:https://bootstrap-table.com/ Bootstrap表的设计目的是减少开发时间,并且不需要开发人员提供特定的知识。它重量轻,功能丰富 且与一些最广泛使用的CSS框架集成。(支持...
  • bootstrap-table列错位

    千次阅读 2019-11-13 15:43:48
    bootstrap-table在页面出现滚动条和不出现滚动条相互切换的时候,遇到了bootstrap-table列头和列的内容错位的问题。 解决的方法是在每个出现滚动条和取消滚动条的...$("#mytables").bootstrapTable("resetView"); ...
  • bootstrap-table客户端分页实例

    热门讨论 2017-08-06 16:51:28
    bootstrap-table客户端分页实例,数据源为前端数据,用于测试json数据填充后,形成表格数据类型,初级入门~

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,870
精华内容 24,748
关键字:

bootstrap-table