精华内容
下载资源
问答
  •  ②bootstrap-table使用需要下载对应的css和js插件  ③具体详情还需查看api文档 二、前端代码 <table id=table class=text-nowrap> 【说明】 ①text-nowrap设置表格超出不换行而显示滚动条,避免表格列过多...
  • $("#ulToTab a").on("shown.bs.tab", function (e) { var activeTab = $(e.target).text(); var previousTab = $(e.relatedTarget).text(); if ($(e.target).attr(... console.log("初始化产品服务"); }...

        $("#ulToTab a").on("shown.bs.tab", function (e) {
        
            var activeTab = $(e.target).text();
            var previousTab = $(e.relatedTarget).text();


            if ($(e.target).attr("href") == "#tab2") {
                console.log("初始化产品服务");
            }
        })

    展开全文
  • tab初始化 关闭tab页 新增tab 显示tab页 获取tab页ID 使用 Step1 :引入样式 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href=...
  • 我们在使用tab页面时点击任一存在echarts绘制的图表的tabtab页面显示为空白,此时我们需要将该tab页面的图表手动的resize()一下,此时图表就会重新绘制一次,进而解决了图表不显示的问题 js代码: var barChart...

    我们在使用tab页面时点击任一存在echarts绘制的图表的tab,tab页面显示为空白,此时我们需要将该tab页面的图表手动的resize()一下,此时图表就会重新绘制一次,进而解决了图表不显示的问题


    js代码:

    var barChart = null;
    var pieChart = null;
    var charts = [];
    $(function(){
    	
    	initCharts();
    	//解决tab标签点击时图表不显示问题
    	$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    		 for(var i = 0; i < charts.length; i++) {
    			 charts[i].resize();
    		 }
    	});
    });
    //初始化图表
    function initCharts(){
        barChart = echarts.init(document.getElementById('bar')); 
        pieChart = echarts.init(document.getElementById('pie')); 
        initBar(barData);
        initPie(pieData);
        charts.push(barChart);
        charts.push(pieChart);
    
    }
    //初始化柱状图
    function initBar(data){
        //TODO
    }
    //初始化饼图
    function initPie(data){
        //TODO
    }
    
    

    HTML代码:

       <div class="row">
           <div class="col-sm-12">
           		<div class="block-flat">
    	       		<ul id="statisticalAnalysisTab" class="nav nav-tabs">
    					<li class="active">
    						<a href="#tablesTab" data-toggle="tab">
    							 统计表格
    						</a>
    					</li>
    					<li><a href="#chartsTab" data-toggle="tab">统计图</a></li>
    				</ul>
    				<div id="statisticalAnalysisTabContent" class="tab-content">
    					<div class="tab-pane fade in active" id="tablesTab">
    						<div style="margin-top: 20px;padding-left: 10px; padding-right: 10px;">
    							<table id="autoTable" style="text-align: center;" class="table table-bordered table-striped table-hover table-condensed">
    								
    							</table>
    						</div>
    					</div>
    					<div class="tab-pane fade" id="chartsTab">
    						<div class="page-content">
    							<div class="row">
    					            <div class="col-sm-12">
    					                <div class="block-flat">
    						                <div class="content">
    						                  	<div id="bar" style="height:400px"></div>
    						                </div>
    					                </div>
    					            </div>
    					        </div>
    					        <div class="row" style="margin-bottom: 40px;">
    					            <div class="col-sm-12">
    					                <div class="block-flat">
    						                <div class="content">
    						                	<div id="pie" style="height:400px"></div>
    						                </div>
    					                </div>
    					            </div>
    					        </div>
    					    </div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>

     

    展开全文
  • 又好久不写博客,最近项目都是用的bootstrap的样式,不出意外,应该是要在bootstrap的道路上越走越远了,所以下定决心,把bootstrap的插件都好好学学。 昨天写了boostrap-table的范例,拿出来给大家分享一下,如果...

    又好久不写博客,最近项目都是用的bootstrap的样式,不出意外,应该是要在bootstrap的道路上越走越远了,所以下定决心,把bootstrap的插件都好好学学。

    昨天写了boostrap-table的范例,拿出来给大家分享一下,如果有不对的地方,还请大家指正以及多多包含~

    先上效果图:

    1.进入页面,根据指定的URL加载数据(json格式)

    2.加载成功,根据$table.bootstrapTable({options})显示表格样式。

    感觉还是挺漂亮的哈,OK,下面贴代码解释功能。

     

    开始之前,当然要引用js啦

    1     <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    2     <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
    3     <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    4     <script src="~/Scripts/jquery-1.9.1.js"></script>
    5     <script src="~/Scripts/bootstrap.min.js"></script>
    6     <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
    View Code

     

     html代码,一是指定table要使用的工具栏,而是写一个空的table

     1 <div class="row">
     2             <div class="col-md-12">
     3                 <div class="btn-group" id="toobar" role="group" aria-label="...">
     4                     <button type="button" class="btn btn-default">
     5                         <span class="glyphicon glyphicon-plus"></span>新增
     6                     </button>
     7                     <button type="button" class="btn btn-default">
     8                         <span class="glyphicon glyphicon-edit"></span>修改
     9                     </button>
    10                     <button type="button" class="btn btn-default">
    11                         <span class="glyphicon glyphicon-remove"></span>删除
    12                     </button>
    13                 </div>
    14                 <table id="myTable"></table>
    15             </div>
    16         </div>
    dom

    js代码,使用("#table").bootstraptable({options})填充table

     1 $("#myTable").bootstrapTable({
     2                     url: '/BootstrapTable/GetTestData',
     3                     method: 'get',
     4                     toolbar: '#toobar',//工具列
     5                     striped: true,//隔行换色
     6                     cache: false,//禁用缓存
     7                     pagination: true,//启动分页
     8                     sidePagination: 'client',//分页方式
     9                     pageNumber: 1,//初始化table时显示的页码
    10                     pageSize: 10,//每页条目
    11                     showFooter: false,//是否显示列脚
    12                     showPaginationSwitch: true,//是否显示 数据条数选择框
    13                     sortable: false,//排序
    14                     search: true,//启用搜索
    15                     showColumns: true,//是否显示 内容列下拉框
    16                     showRefresh: true,//显示刷新按钮
    17                     idField: 'SystemCode',//key值栏位
    18                     clickToSelect: true,//点击选中checkbox
    19                     singleSelect: true,//启用单行选中
    20                     columns: [{
    21                         checkbox: true
    22                     },
    23                     {
    24                         field: 'SystemCode',
    25                         title: '系统代码',
    26                         titleTooltip: 'young for you'
    27                     },
    28                     {
    29                         field: 'SystemDesc',
    30                         title: '系统名称'
    31                     },
    32                     {
    33                         field: 'Isvalid',
    34                         title: '是否有效'
    35                     },
    36                     {
    37                         field: 'UUser',
    38                         title: '更新人'
    39                     },
    40                     {
    41                         field: 'UDate',
    42                         title: '更新时间'
    43                     }],
    44                     onClickCell: function (field, value, row, $element) {
    45                         //alert(row.SystemDesc);
    46                     }
    47                 });
    js

    其中URL是table 数据源地址,如果table启动了分页功能,后台取数据的方法要加上limit、offset两个int类型的参数,这里把后台代码也贴一下。

     1 public JsonResult GetTestData(int limit, int offset)
     2         {
     3             BugzillaModelContainer db = new BugzillaModelContainer();
     4             List<B_SystemInfo> systemInfo = db.B_SystemInfo.ToList();
     5             for (int i = 0; i < 20; i++)
     6             {
     7                 B_SystemInfo tempSystem = new B_SystemInfo();
     8                 tempSystem.SystemCode = (i + 1).ToString();
     9                 tempSystem.SystemDesc = "测试系统" + (i + 1).ToString();
    10                 tempSystem.Isvalid = "Y";
    11                 tempSystem.UUser = "result_for" + (i + 1).ToString();
    12                 tempSystem.UDate = System.DateTime.Now.ToShortDateString();
    13                 systemInfo.Add(tempSystem);
    14             }
    15 
    16             var total = systemInfo.Count();
    17             var rows = systemInfo.Skip(offset).Take(limit).ToList();
    18             return Json(systemInfo, JsonRequestBehavior.AllowGet);
    19         }
    controller

    offset表示从多少条数据开始取,limit表示取多少条数据。

    客户端搜索只要设置search=true即可。

     

     

    服务端搜索,需要设置参数。

    首先设置

    ("#table").bootstraptable({queryParams: oTableInit.queryParams}),//传递参数(*)

    然后获取查询的参数

    1 //得到查询的参数
    2             oTableInit.queryParams = function (params) {
    3                 var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
    4                     limit: params.limit,   //页面大小
    5                     offset: params.offset,  //页码
    6                     systemcode: $("#systemcode").val(),
    7                 };
    8                 return temp;
    9             };
    View Code

    通过button事件刷新table,重新获取数据源,即可。

    1             $("#btnQuery").click(function () {
    2                 $table.bootstrapTable('refresh');
    3             });
    View Code

    最后贴上全部html代码~

      1 @{
      2     Layout = null;
      3 }
      4 
      5 <!DOCTYPE html>
      6 
      7 <html>
      8 <head>
      9     <meta name="viewport" content="width=device-width" />
     10     <title>Index</title>
     11     <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
     12     <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
     13     <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
     14     <script src="~/Scripts/jquery-1.9.1.js"></script>
     15     <script src="~/Scripts/bootstrap.min.js"></script>
     16     <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
     17 </head>
     18 <body>
     19     <div class="container">
     20         <div class="row">
     21             <div class="col-md-8">
     22 
     23             </div>
     24         </div>
     25         <div class="row">
     26             <div class="col-md-12">
     27                 <div class="btn-group" id="toobar" role="group" aria-label="...">
     28                     <button type="button" class="btn btn-default">
     29                         <span class="glyphicon glyphicon-plus"></span>新增
     30                     </button>
     31                     <button type="button" class="btn btn-default">
     32                         <span class="glyphicon glyphicon-edit"></span>修改
     33                     </button>
     34                     <button type="button" class="btn btn-default">
     35                         <span class="glyphicon glyphicon-remove"></span>删除
     36                     </button>
     37                 </div>
     38                 <table id="myTable"></table>
     39             </div>
     40         </div>
     41     </div>
     42     <script>
     43 
     44         $(function () {
     45             var itable = TableInit();
     46             itable.Init();
     47         });
     48 
     49         var TableInit = function () {
     50             var myTableInit = new Object();
     51 
     52             myTableInit.Init = function () {
     53                 $("#myTable").bootstrapTable({
     54                     url: '/BootstrapTable/GetTestData',
     55                     method: 'get',
     56                     toolbar: '#toobar',//工具列
     57                     striped: true,//隔行换色
     58                     cache: false,//禁用缓存
     59                     pagination: true,//启动分页
     60                     sidePagination: 'client',//分页方式
     61                     pageNumber: 1,//初始化table时显示的页码
     62                     pageSize: 10,//每页条目
     63                     showFooter: false,//是否显示列脚
     64                     showPaginationSwitch: true,//是否显示 数据条数选择框
     65                     sortable: false,//排序
     66                     search: true,//启用搜索
     67                     showColumns: true,//是否显示 内容列下拉框
     68                     showRefresh: true,//显示刷新按钮
     69                     idField: 'SystemCode',//key值栏位
     70                     clickToSelect: true,//点击选中checkbox
     71                     singleSelect: true,//启用单行选中
     72                     columns: [{
     73                         checkbox: true
     74                     },
     75                     {
     76                         field: 'SystemCode',
     77                         title: '系统代码',
     78                         titleTooltip: 'young for you'
     79                     },
     80                     {
     81                         field: 'SystemDesc',
     82                         title: '系统名称'
     83                     },
     84                     {
     85                         field: 'Isvalid',
     86                         title: '是否有效'
     87                     },
     88                     {
     89                         field: 'UUser',
     90                         title: '更新人'
     91                     },
     92                     {
     93                         field: 'UDate',
     94                         title: '更新时间'
     95                     }],
     96                     onClickCell: function (field, value, row, $element) {
     97                         //alert(row.SystemDesc);
     98                     }
     99                 });
    100             };
    101 
    102             return myTableInit;
    103         };
    104     </script>
    105 </body>
    106 </html>

    OK,今天就写到这儿了~下篇应该会写boostrap-table的行内编辑等内容~

     



     

    转载于:https://www.cnblogs.com/ghwillbe/p/5652312.html

    展开全文
  • 最近公司做项目的时候遇到这样一个问题,就是在Bootstrap选项卡... 原因是这样的,在选项卡中使用DataTables的时候,要首先判断当前选项卡是否显示,要在显示之后再进行DataTables的初始化,否则DataTables会找不到对

                              最近公司做项目的时候遇到这样一个问题,就是在Bootstrap选项卡中使用Data Table的时候,样式什么的都正确,但是表头错位,找了半天才找到原因,分享给大家解决方案。

                               原因是这样的,在选项卡中使用DataTables的时候,要首先判断当前选项卡是否显示,要在显示之后再进行DataTables的初始化,否则DataTables会找不到对应的宽高,从而造成表头缩在一起的样式。废话不多说,上代码:

               如上图,我的解决方案是给Tab加一个click监听事件,判断当点击了相应有DataTables的选项卡时,先让这个选项卡显示,然后判断DataTables是否初始化,没有则进行初始化操作,否则自适应一下表格。这里有一个更好的方法就是使用Bootstrap Tab的shown事件,大家可以自己探索下!

    展开全文
  • bootstrap面板tab

    2018-09-12 20:18:00
    参考自:https://blog.csdn.net/jrn1012/article/details/76043177 github地址:https://github.com/bill1012/bootstrap-tab <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> &...
  • 基于Bootstrap的标签页组件bootstrap-tab

    千次阅读 2018-08-17 10:54:47
    tab初始化 关闭tab页 新增tab 显示tab页 获取tab页ID 使用 Step1 :引入样式 1 2 3 4 Step2:引入脚本 1 2 3 Step3:使用 (&amp;amp;amp;quot;#tabContai...
  • bootstrap-tabbootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用。
  • Bootstraptab标签切换demo

    千次阅读 2015-10-22 21:18:35
    时间轴 投诉 短信回评 订单轨迹 111 222 333 444 $(function() { $('#otherInfoTab a:last').tab('show');//初始化显示哪个tab $('#otherInfoTab a').click(function(e) {
  • 父页面点击查询,附带查询条件,传值另一页面 /*搜索后的企业列表,... function toQykDetail(comName) { /* var prefix = ctx + "system/gxqTyc";*/ /* search("5");*/ /* $.modal.openTab("天眼查企业库详情",...
  • bootstraptab切换时datatable表头错乱 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var table = $.fn.dataTable.fnTables(true); if ( table.length > 0 ) { $(table).dataTable()....
  • bootstraptab.js分析

    千次阅读 2017-04-21 02:08:02
    tabjs是bootstrap选项卡动态,里面常见的下拉框等效果,今天来试试源码难度,顺带温习jQuery的API,何乐不为,反正目前我都是小项目,jQuery,zepto,挺好! 插件外壳,立即执行函数,传形参$和实参jQuery
  • bootstrap标签tab切换

    千次阅读 2018-10-30 14:03:00
    初始化显示哪个tab $( ' #myTab a ' ).click(function (e) { e.preventDefault(); // 阻止a链接的跳转行为 $( this ).tab( ' show ' ); // 显示当前选中的链接及关联的content }) }) 此外...
  • 初始化加载数据,并默认添加一行背景色 代码如下: $(document).ready(function(){ singleIfrTab1(); getTdValue(); }); //加载表格(ifrm) function ...
  • bootStrapTab页签切换

    2019-11-20 20:07:41
    关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: 如: <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a><...
  • #bootStrapTab页签切换

    千次阅读 2016-07-24 17:33:05
    bootStrapTab页签切换转自:http://blog.chinaunix.net/uid-25979788-id-3757108.html 关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航:...
  • 介绍本文以Bootstrap标签页组件为例,介绍如何编写或者封装一个前端组件,以下是实现效果:原生的Bootstrap-tab组件主要有html,css组成,开发者使用时,需要写很多代码,不易于使用,对bootstrap-tab封装后,可以更...
  • Tab页里放轮播图 $('.media_tab a[data-toggle="tab"]').on('show.bs.tab', function(e) { // tab切换时,往swiper容器里存入一个swiper实例,如果相应的实例已经存在,跳过 var selector = '.media_swiper_...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...tab
  • $().tab() bootStrapTab页签切换

    千次阅读 2017-12-19 17:25:14
    style type="text/css"> .tab-pane{ display: none; } .active{ display: block; } style> ul class="nav nav-tabs" id="myTab"> li class="active">a href="#home">Homea
  • Bootstrap插件tab源码的学习

    千次阅读 2015-10-16 22:57:57
    使用方法 可以分为Tab区和Content...下的标签要求带有data-toggle="tab"属性,可以通过data-target或href指定对应的ContentContent区要求带有"tab-content"类名,每个面板要求有"tab-pane"类名以及Id(即Tab里指定的tar
  • bootstrap内部的tab切换,在ejs里不知道怎么配置,迁到vue项目就都乱套了,基本的切换效果有,但是顺序乱了,所以自己写了一个切换功能 ...@click="nanTab(1)" ...在组件数据里,初始化index data () { ...
  • 引入bootstrap-closable-tab.js文件 在需要显示标签的位置如下代码 <!-- 此处是相关代码 --> <ul class="nav navTabs" role="tablist"> </ul> <div class="tabContent" style="width:100%;">...
  • 浅析BootstrapTab(标签页)的使用方法

    万次阅读 多人点赞 2016-11-23 18:43:14
    Bootstrap 导航元素使用相同的标记和基类,改变修饰的class,可以在不同的样式间进行切换 如".nav-pills"(胶囊式导航)与 ".nav-tabs" (标签式导航) 创建一个标签式的导航菜单: 以一个带有 class .nav 的...
  • jQ+ Bootstrap 动态控制tab页面切换最近在做一个功能,一个页面包含多个tab页签,每一个tab页面都有保存和提交按钮功能,现在是希望在某个tab页面点击保存或者提交按钮提交表单后,重新加载的页面停留在当前操作的tab...
  • <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test</title>...link rel="stylesheet" href="bootstrap-3.3.4/css/bootstrap.min.css"...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,941
精华内容 1,576
关键字:

bootstraptab初始化