Bootstrap Table总结

最新推荐文章于 2023-03-02 16:10:30 发布
最新推荐文章于 2023-03-02 16:10:30 发布
阅读量104 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：https://yq.aliyun.com/articles/108285
版权
一.使用
导包：
1.Jquery
2.bootstrap组件（js+css）
3.bootstrap table组件及中文包（js+css+js）
8a8f44c5ef9635e1b418427c6b993da7cdc95184
代码：
例一：                        
<table id="table"></table>
<script>
	$(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 () {
	        $('#table').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: '部门名称',
	                align: 'center',
  	                valign: 'middle',
  	              	width: '100px',
	            }, {
	                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;
	};
</script>
例二： 
<table id="table"></table>
<style>
	#table{
		table-layout: fixed;
	}
</style>
<script type="text/javascript">
	var $table = $("#table");
	var selections = [];
        var pageNum = 1;
	window.lockEvents = {
        'click .lock':function (e, value, row, index) {
            $.ajax({
                type:"post",
                url:"/copartner/trade/supplier/lock.do",
                async:true,
                dataType:"json",
                data:{
                    id: row.id,
                    isEnable : row.isEnable
                },
                success: function(data) {
                	if(data.msg != null) {
                		alert(data.msg);
                	}
                },
                error:function(jqXHR){
                    alert(jqXHR.status);
                }
            });
            initTable();
        }
    };
	function initTable() {
	    $table.bootstrapTable('destroy');
	    $table.bootstrapTable({
	        height: getHeight(),
	        toolbar: "#toolbar",
	        //search: true,
	        //searchAlign: "left",
	        //showRefresh: true,
	        //showToggle: true,
	        showColumns: true,
	        //showExport: true,
	        //exportDataType: "all",
	        //detailView: true,
	        //detailFormatter: detailFormatter,
	        //minimumCountColumns: 2,
	        idField: 'id',
	        showFooter: false,
	        /*与后台交互*/
	        method: 'post',
	        contentType: "application/x-www-form-urlencoded",
	        dataType: "json",
	        cache: false,
	        striped: true,
	        pagination: true,
	        //showPaginationSwitch: true,
	        pageNumber: pageNum,
	        pageSize: 20,
	        pageList: [10, 20, 50, 100],
	        url: "/copartner/tradeOrderInfo/list.do",
	        //dataField: "rows",
	        clickToSelect: true,
	        queryParamsType: '',
	        queryParams: function queryParams(params) {
	            var param = {
	            	pageNumber: params.pageNumber,	
	                pageSize: params.pageSize,
	                vagueInfo: $(".vagueInput").val(),
	            }
	            return param;
	        },
	        sidePagination: "server",//client
	        /* onLoadSuccess: function(data){  //加载成功时执行
	            alert("加载成功"+data);
	        },
	        onLoadError: function(){  //加载失败时执行
	        	alert("加载失败"+data);
	        }, */
	        /*列*/
	        columns: [
	            {
		            checkbox: true,
		            align: 'center',
	                valign: 'middle'
	            }, {
	                title: 'id',
	                field: 'id',
	                align: 'center',
	                valign: 'middle',
	                //sortable: true
	                width: '100px'
	            }, {
	                title: '订单编号',
	                field: 'alias',
	                align: 'center',
	                valign: 'middle',
	                width: '100px',
	                formatter: openFormatter
	            }, {
	                title: '电话',
	                field: 'phone',
	                align: 'center',
	                valign: 'middle',
	                width: '100px',
	                formatter: function (value, row, index) {
	                	return "<a class=\"editPhone\" href=\"\" name=\"phone\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"电话\">" + value + "</a>";
	                }
	            }, {
  	                title: '是否售后',
  	                field: 'isAftersales',
  	                align: 'center',
  	                valign: 'middle',
  	              	width: '100px',
  	                formatter: afterSalesFormatter
  	            }, {
	                title: '操作',
	                field: 'detail',
	                align: 'center',
	                valign: 'middle',
	                width: '100px',
	                formatter: detailFormatter
	            }, {
	                title: '是否启用',
	                field: 'isEnable',
	                align: 'center',
	                valign: 'middle',
	                width: '100px',
					events: lockEvents,
	                formatter: lockFormatter
	            }
	        ],
	        onClickRow: function (row, $element) {
                    curRow = row;
                },
            onPageChange: function (number, size) {
                pageNum = number;
            },
            onLoadSuccess: function (aa, bb, cc) {
            	$("#table .rowEditable").editable({
                    url: function (params) {
                        var column = $(this).attr("name");
                        curRow[column] = params.value;
                    },
                    type: 'text'
                });
                $("#table .editPhone").editable({
                    url: function (params) {
                        var sPhone = $(this).attr("name");
                        curRow[sPhone] = params.value;
                        $.ajax({
                            type: 'POST',
                            url: "/copartner/trade/supplier/editPhone.do",
                            data: curRow,
                            dataType: 'JSON',
                            success: function (data, textStatus, jqXHR) {
                            	initTable();
                            	if(data.msg != null) {
                            		alert(data.msg);
                            	}
            	            },
            	            error:function(jqXHR){
            	                alert(jqXHR.status);
            	            }
                        });
                    },
                    type: 'text'
                });
            }
	    });
	    $table.bootstrapTable('hideColumn', 'id');
	    function afterSalesFormatter(value, row, index) {
	    	var state = '';
	    	var color = '#000';
	    	var color_red = '#c00';
	    	var color_blue = '#0066ff';
	    	var color_green = '#5cb85c';
	    	if(value == 0) {
	    		state = '否';
	    		color = color;
	    	} else if(value == 1) {
	    		state = "是";
	    		color = color_green;
	    	}
            return [
				'<span style="color: '+ color +'">' + state + '</span>'
            ].join('');
        }
	    function openFormatter(value, row, index) {
            return value;
        }
        function detailFormatter(value, row, index) {
        	return [
				'<a class="aliasNum" href="orderDetailInfoNew.html?id=' + row.id + '" title="进入明细">',
				'<span style="">详情</span>',
				'</a>'
            ].join('');
        }
        function lockFormatter(value, row, index) {
	    	var state = '--';
	    	var color = '#000';
	    	var color_red = '#c00';
	    	var color_blue = '#0066ff';
	    	if(value == 0) {
	    		state = '已关闭';
	    		color = color_red;
	    	} else if(value == 1) {
	    		state = "已启用";
	    		color = color_blue;
	    	}
            return [
                '<a class="lock" href="javascript:void(0)" title="切换状态">',
                '<span style="color: '+ color +'">' + state + '</span>',
                '</a>'
            ].join('');
        }
        function editReturnCountFormatter(value, row, index) {
	    	return "<a class=\"rowEditable\" href=\"\" name=\"returnCount\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"投诉数量\">" + value + "</a>";
        }
	    function editReturnPriceFormatter(value, row, index) {
	    	return "<a class=\"rowEditable\" href=\"\" name=\"returnPrice\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"投诉金额\">" + value + "</a>";
        }
	    function editReturnReasonFormatter(value, row, index) {
	    	return "<a class=\"rowEditable\" href=\"\" name=\"returnReason\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"售后原因\">" + value + "</a>";
        }
	    // sometimes footer render error
	    /*setTimeout(function() {
	     $table.bootstrapTable('resetView');
	     }, 200);*/
	    /*$table.on('check.bs.table uncheck.bs.table ' +
	     'check-all.bs.table uncheck-all.bs.table', function () {
	     $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
	     // save your data, here just save the current page
	     selections = getIdSelections();
	     // push or splice the selections if you want to save all data selections
	     });
	     $table.on('expand-row.bs.table', function (e, index, row, $detail) {
	     if (index % 2 == 1) {
	     $detail.html('Loading from ajax request...');
	     $.get('LICENSE', function (res) {
	     $detail.html(res.replace(/\n/g, '<br>'));
	     });
	     }
	     });
	     $table.on('all.bs.table', function (e, name, args) {
	     console.log(name, args);
	     });*/
	    $(window).resize(function(){
	        $table.bootstrapTable('resetView',{
	            height: getHeight()
	        });
	    });
	}
	function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }
	function getData() {
    	return $.map($table.bootstrapTable('getData'), function (row) {
            return row.id+"---"+row.returnCount+"---"+row.returnPrice+"---"+row.returnReason+"---"+row.saleCount;
        });
    }
	function getHeight() {
        return document.body.clientHeight*0.88;
    }
    /*function detailFormatter(index, row) {
     var html = [];
     $.each(row, function (key, value) {
     html.push('<p><b>' + key + ':</b> ' + value + '</p>');
     });
     return html.join('');
     }*/
    $(document).ready(function() {
        initTable();
    });
</script>

二.扩展
        行内编辑 Table Editable
        表格导出 Table Export
三.文档
        Bootstrap Table参数方法：http://blog.csdn.net/daniel_lixuan/article/details/53197618
        Bootstrap Table详细教程：http://www.cnblogs.com/landeanfen/p/4976838.html
weixin_34240520
关注
Bootstrap Table数据表格的使用指南，springmvc面试题2020
m0_64383449的博客
12-23 910
public Specification buildSpec(StudentForm form){ return null; } 其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。 TablePageable类代码如下。 import org.springframework.data.domain.PageRequ
Bootstrap table简单使用总结
12-29
最近接触一个很棒的插件，Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套，用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML //定义一系列工具栏... <table ...
bootstrap table 简介01
tets_java的博客
05-22 452
bootstrap table 简介01最近项目要用到 bootstrap table这个插件，就简单记下这个插件的大概如何使用首先 第一步引入bootstrap table的插件 http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 在这里下载所需要的js文件引入文件 /bootstrap/docs/assets/bootstrap/css/bootst
BootstrapTable 简单介绍和遇到各种坑
cs4380的博客
06-05 2万+
一.BootstrapTable简单介绍 它基于bootstarp实现的表格js插件。中文官网地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 基于它实现的效果图二.BootstrapTable初始化 使用的初始化有两种方式，一种通过data属性的方式配置，一种是javascipt方式配置...
bootstrap table 实现父子级数据且默认展开第一个
最新发布
qq_48045360的博客
03-02 1315
bootstrap table 实现父子级数据且默认展开第一个
bootstrap table用法小结
jijithin
08-10 197
一、bootstrap table简介 基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。相关介绍请参考官方网址：http://bootstrap-table.wenzhixin.net.cn/ 二、这次项目中页面展示   三、使用方法 （1）引入js css &lt;link hr...
bootstraptable冻结列例子.doc
01-14
$('#table').bootstrapTable({ columns: [ // 定义表格列 { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, // 更多列... ], data: [ // 表格数据 { ...
bootstrap table sum总数量统计实现方法
08-29
$('#myTable').bootstrapTable({ columns: [/* 列定义 */], data: [] }); ``` 总结： 通过以上步骤，我们可以成功地在 Bootstrap Table 中实现总数量统计功能。在实际应用中，可能需要根据具体的需求和数据...
Bootstrap Table列宽拖动的方法
10-18
总结一下，要在Bootstrap Table中实现列宽拖动功能，需要按照以下步骤操作： 1. 引入Resizable扩展插件以及它的依赖库colResizable。 2. 在HTML的thead元素中为每个列定义data-field和data-width属性。 3. 使用...
Bootstrap Table API 中文版（完整翻译文档）
mengjavakaifa的博客
12-22 2万+
/* * *$('#table').bootstrapTable({}); *看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽 *最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型， *默认值不翻译，例如："class"、"id"等不翻译。 *有错请提出，会及时改正，谢谢。 *Bootstrap t
Bootstrap-Table简单使用
weixin_54242419的博客
07-23 7075
Bootstrap-Table Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，能够实现数据异步获取，编辑，排序等一系列功能，最可贵的是，只需要一些简单的配置就可以实现一个功能完备的在线表格。 准备 不同于tabledit，Bootstrap-Table是提供异步获取数据功能的，这里的准备工作暂不用管前台页面结构。因为前台页面结构中的表格，只需要一句代码就解决了： 我们要关心的是，正确的引入Bootstrap Table的相关文件，功能越完备意
Bootstrap Table的使用小结
汪小哥
10-07 4万+
折腾了一个国庆节，总算是学会了一些东西，对于前端有了更加深刻的认识吧 Jquery中的一些东西学习一下子，补充完善一下，毕竟有些时候没有使用到 这个方式很有用，在使用bootstrap table的时候，选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据，但是我只需要id这一个值，这个时候进行操作就非常的简单了。$.map(data,function(item,index){re
bootstrp-table 获取checkbox选中行的数据id
qq_20603425的博客
11-19 6167
//点击【复制添加】 $("#btn_edit").click(function(){ var checkids = []; checkids = getIdSelections(); alert(checkids); }) //获取bootstrap-table checkbox选中...
bootstrap table获取选中行的值
我本名叫一休的博客
04-10 2万+
bootstrap-table 获取选中行的值
bootstrapTable多选getSelections
qiankuang7670的博客
08-21 1万+
bootstrapTable多选 $("#btn_print").click(function(){ var a= $("#showTable").bootstrapTable('getSelections'); if(a.length&lt;=0){ textModal("请选择一行"); return; }else { ...
BootStrap Table：事件、方法、多语言
pengjunlee的博客
06-12 10万+
官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/事件对BootStrap Table事件进行处理有以下两种语法：$('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) { // ... } });$('#tabl...
Bootstrap Table 中文文档（完整翻译版）
热门推荐
Lovnx
02-22 21万+
表格参数： 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格。
BootStrapTable参数方法
Daniel_LiXuan的博客
11-17 3万+
表格参数名称标签  类型默认描述-data-toggleString'table'不用写 JavaScript 直接启用表格。classesdata-classesString'table table-hover'表格的类名称。默认情况下，表格是有边框的，你可以添加 'table-no-bordered' 来删除表格的边框样式。sortClassdata-sort-classStringundef...
bootstrap-table 指南
鲸落
08-24 1910
文章目录一、初始化二、使用请求后接口数据三、行操作1. 请求完接口，前端过滤删除的row2. 请求完接口，前端手动修改row四、总结1. 解决BUG: 开启sort后不显示箭头符号2. 监听每个cell点击事件3. 更新某cell数据4. 更新某行数据5. 自定义列样式6. 重新加载数据7. 显示或隐藏加载状态 为了有更好的代入感，所以先看截图 一、初始化 table.html <table id="table" data-mobile-responsive="false"> ta
Bootstrap Table使用详解与技巧
"Bootstrap Table的使用总结" Bootstrap Table是一款基于Bootstrap框架的前端插件，它能够帮助开发者轻松创建功能丰富的表格，提供了多种定制选项，如排序、过滤、分页、国际化等。在使用Bootstrap Table时，了解其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值