bootstrap 可以点 表格_bootstrap下拉搜索框和bootstrap表格不生效 - CSDN
精华内容
参与话题
  • Bootstrap可编辑表格

    万次阅读 热门讨论 2020-03-26 14:00:04
    继续送福利了,居于Bootstrap可编辑表格,编辑框支持下拉和日期,先上图看下效果,如图1: 这是居于bootstrap-table进行扩展的功能,bootstrap-table的使用这边就不多说了,日期控件用的是bootstrap-...

    1.说明

    继续送福利了,居于Bootstrap可编辑表格,编辑框支持下拉和日期,先上图看下效果,如图1:

    这是居于bootstrap-table进行扩展的功能,bootstrap-table的使用这边就不多说了,日期控件用的是bootstrap-datetimepicker,下拉控件bootstrap-select 这个是小编自己写的

    bootstrap-table API地址:http://www.html580.com/11556/demo 

    bootstrap-datetimepicker API地址:http://www.bootcss.com/p/bootstrap-datetimepicker/

    bootstrap-select API地址:http://blog.csdn.net/lzxadsl/article/details/48859625

    2.用法

    如果有用过easyui或者extjs,就很容易上手了,其实感觉现在每套ui用法都差不多。
    先上一段bootstrap-table用法代码
    $('#j-installment_table').bootstrapTable({
    		method:'get',
    		url: 'xxx.htm',
    		striped: true,
    		clickToSelect: true,
    		pagination: true,
    		pageSize: 10,
    		sidePagination:'server',
    		pageList: [10, 20, 50, 100, 200, 500],
    		queryParamsType: 'limit', 
    		queryParams: function (params){
    			//获取查询条件
    			$('#j_serach').getSearchParams(params);
    			return params;
    		},
    		columns: [
    			{field:'',title:'复选框',width:50,checkbox:true},
    			{field:'order_type',title:'订单类型',align:'center'},
    			{field:'status',title:'状态',align:'center'},
    			{field:'CarTrunk',title:'车辆轨迹',align:'center',formatter:function(value,row,rowIndex){
    				var strHtml = '<a href="order/order/edit.htm?id='+row.id+'">修改</a>';
    				if(row.status == '新建'){
    					strHtml += ' <a href="javascript:void(0);" onclick="javascript:void(0)">审核</a>';
    				}
    				return strHtml;
    			}}
    		]
    });

     

    上面主要加了较多的分页信息,如果要让表格可编辑,那就设置editable:true,默认可编辑单元格是文本框,如果要使用下拉或者日期,那就在columns配置中的edit进行配置,设置edit:false,则该列不可编辑

     

    2.1事件

    下拉框跟日期事件的使用参见前面提供的api
    文本框事件:
    edit:{
    click:function(e){},
    blur:function(e){}
    focun:function(e){}
    }

    2.2方法

    这边的方法是我自己加上去的,至于bootstrapTable的那些方法的使用,同样参加上面的api
    $('#reportTable').bootstrapTable('removeRow',rowIndex);  根据行号删除指定行,行号是从0开始的
    $('#reportTable').bootstrapTable('getData');  获取表格全部数据,这个是表格原来就有的功能
    $('#reportTable').bootstrapTable('getModiDatas'); //获取被修改过的行数据
    $('#reportTable').bootstrapTable('getColTotal',2); //获取第三列的合,该列必须是数字
     
    $('#reportTable1').bootstrapTable({
    	method: 'get',
    	editable:true,//开启编辑模式
    	clickToSelect: true,
    	columns: [
    		{field:"user_email",edit:false,title:"email",align:"center"},
    		{field:"user_company",edit:{
    					type:'select',//下拉框,如果是下拉则需要设置type为select
    					//url:'user/getUser.htm',//从服务器加载
    					data:[{id:1,text:'lzx'},{id:2,text:'lsl'}],
    					valueField:'id',
    					textField:'text',
    					onSelect:function(val,rec){
    						console.log(val,rec);
    					}
    		},title:"company",align:"center",width:"200px"},
    		{field:"user_dates",edit:{
    			type:'date'//日期
    		},title:"date",align:"center"},
    		{field:"user_version",title:"version",align:"center",
    			edit:{
    				required:true,
    				click:function(){
    				}
    			}
    		},
    		{field:"user_isv2",title:"isv2",align:"center"},
    		{field:"userstatus_usertype",title:"usertype",align:"center"},
    		{field:"userstatus_package_id",title:"package_id",align:"center"},
    		{field:"userstatus_end_time",title:"end_time",align:"center",formatter:function(value,row,rowIndex){
    			var strHtml = '<a href="javascript:void(0);" onclick="removeRow('+rowIndex+')">删除</a>';
    			return strHtml;
    		},edit:false},
    		{field:"user_lastlogintime",title:"lastlogintime",align:"center",valign:'middle'}
    	],
    	data : []
    });
     
    
     
    由于时间比较赶,这边就不多说了,下载地址:https://download.csdn.net/download/lzxadsl/9194009
    bootstrap-table、bootstrap-datetimepicker、bootstrap-select都包含在里面了,源码也在里面,还有demo。
    建议先去看看bootstrap-table的API
     
    日期控件使用例子:
     
    <div class="input-group date form_datetime col-sm-12" data-link-field="dt_set_order_time_input">
    	<input class="form-control"  id="dt_set_order_time" type="text" value="2015-10-16">
    	<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
    	<input type="hidden" id="dt_set_order_time_input" value="2015-10-16" name="set_order_time"/>
     </div>
    $('.form_datetime').datetimepicker({
    		weekStart: 1,
    		todayBtn:  1,
    		autoclose: 1,
    		todayHighlight: 1,
    		startView: 2,
    		forceParse: 0,
    		language:'zh-CN',
    		format: 'yyyy-mm-dd hh:ii:ss',
    		pickerPosition: 'bottom-left',
    		showMeridian: 1
    	 });

    这些配置属性如果不知道什么意思,上面提供的API中都有说明。


     
     

     

    展开全文
  • Bootstrap3 表格样式

    2019-05-05 15:26:49
    表格 HTML表格是数据的二维容器,它的基本作用是用来存放数据。表格能够清晰、直观地描述数据间的逻辑关系,如果借助CSS设计表格的样式,阅读数据将会变得更轻松。 表格结构包括众多标签,这些标签各司其职,共同...

    表格

    HTML表格是数据的二维容器,它的基本作用是用来存放数据。表格能够清晰、直观地描述数据间的逻辑关系,如果借助CSS设计表格的样式,阅读数据将会变得更轻松。

    表格结构包括众多标签,这些标签各司其职,共同完成二维数据的呈现功能。Bootstrap支持的表格标签及其功能描述见表 2‑1:

    表 2‑1 Bootstrap支持的表格标签
    标签 描述
    <table> 定义表格容器
    <thead> 定义表头容器,用来容纳标题行(<tr>)
    <tbody> 定义表格内容容器,用来容纳数据行(<tr>)
    <tr> 定义表格的行,用来容纳一组单元格(<th> 或 <td>)
    <th> 定义表格的列标题或行标题的单元格,必须放在 <thead> 标签内
    <td> 定义表格的数据单元格
    <caption> 定义表格标题,用于对表格的用途进行描述或总结,这对屏幕阅读器特别有用

    Bootstrap中,只需为任意的 <table> 元素应用 .table 类,即可使用基本的表格样式。另外,还为表格提供了4个额外的辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed,分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥,可以根据需要,为一个表格同时应用多个类。

    基本的表格

    Bootstrap中,基本的表格样式相当简单,它仅仅在每个 <td> 添加了 1px 的灰色实线上边框。同时,为了区分表头,在表头单元格 <th> 添加了 2px 的灰色实线下边框。如:

    
     
    1. <table class="table">
    2.   <thead>
    3.     <tr>
    4.       <th>#</th>
    5.       <th>First Name</th>
    6.       <th>Last Name</th>
    7.       <th>Username</th>
    8.     </tr>
    9.   </thead>
    10.   <tbody>
    11.     <tr>
    12.       <td>1</td>
    13.       <td>Mark</td>
    14.       <td>Otto</td>
    15.       <td>@mdo</td>
    16.     </tr>
    17.     <tr>
    18.       <td>2</td>
    19.       <td>Jacob</td>
    20.       <td>Thornton</td>
    21.       <td>@fat</td>
    22.     </tr>
    23.     <tr>
    24.       <td>3</td>
    25.       <td>Larry</td>
    26.       <td>the Bird</td>
    27.       <td>@twitter</td>
    28.     </tr>
    29.   </tbody>
    30. </table>

    效果如图 2‑40所示:

    表格默认的样式

    图2-40 表格默认的样式

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 测试可用bootstrap可编辑表格完整代码,测试可用bootstrap可编辑表格完整代码
  • bootstrap树形表格

    2020-07-27 23:32:35
    bootstrap风格的树形表格,支持多层级展开,包含事例和源码
  • bootstrap可编辑表格完整代码

    热门讨论 2020-07-30 23:32:12
    bootstrap可编辑表格,包含编辑单元格文本、日期类型、下拉框(代码可运行)
  • Bootstrap 表格的可选样式

    万次阅读 2018-05-24 16:59:06
    表格的可选样式除了 .table 类之外,Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed,分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑...

    除了 .table 类之外,Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed,分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥,可以根据需要,为一个表格应用多个类。

    1、带条纹背景的表格

    为 <table> 添加 .table-striped 类,就可以为 <tbody> 中的表格行添加条纹背景,即实现表格数据行的隔行换色效果。如:

    1. <table class="table table-striped">
    2.   <thead>
    3.     <tr>
    4.       <th>#</th>
    5.       <th>First Name</th>
    6.       <th>Last Name</th>
    7.       <th>Username</th>
    8.     </tr>
    9.   </thead>
    10.   <tbody>
    11.     <tr>
    12.       <td>1</td>
    13.       <td>Mark</td>
    14.       <td>Otto</td>
    15.       <td>@mdo</td>
    16.     </tr>
    17.     <tr>
    18.       <td>2</td>
    19.       <td>Jacob</td>
    20.       <td>Thornton</td>
    21.       <td>@fat</td>
    22.     </tr>
    23.     <tr>
    24.       <td>3</td>
    25.       <td>Larry</td>
    26.       <td>the Bird</td>
    27.       <td>@twitter</td>
    28.     </tr>
    29.   </tbody>
    30. </table>

    效果如图 3‑23所示:

    Bootstrap带条纹背景的表格图3-23 Bootstrap带条纹背景的表格

    注意:这个效果是通过 :nth-child 选择器实现的,但 IE8 及以下的版本不支持这个选择器,需要考虑兼容性处理方案。

    2、带边框的表格

    为 <table> 添加 .table-bordered 类,就可以为所有单元格加上边框,也同时为整个表格添加圆角边框效果。如:

    1. <table class="table table-bordered">
    2.   <thead>
    3.     <tr>
    4.       <th>#</th>
    5.       <th>First Name</th>
    6.       <th>Last Name</th>
    7.       <th>Username</th>
    8.     </tr>
    9.   </thead>
    10.   <tbody>
    11.     <tr>
    12.       <td rowspan="2">1</td>
    13.       <td>Mark</td>
    14.       <td>Otto</td>
    15.       <td>@mdo</td>
    16.     </tr>
    17.     <tr>
    18.       <td>Mark</td>
    19.       <td>Otto</td>
    20.       <td>@TwBootstrap</td>
    21.     </tr>
    22.     <tr>
    23.       <td>2</td>
    24.       <td>Jacob</td>
    25.       <td>Thornton</td>
    26.       <td>@fat</td>
    27.     </tr>
    28.     <tr>
    29.       <td>3</td>
    30.       <td colspan="2">Larry the Bird</td>
    31.       <td>@twitter</td>
    32.     </tr>
    33.   </tbody>
    34. </table>

    效果如图 3‑24所示:

    Boostrap带边框的表格图3-24 Boostrap带边框的表格

    3、带悬停效果的表格

    为 <table> 添加 .table-hover 类,就可以为表格的数据行添加鼠标悬停效果。当鼠标经过数据行时,会为该行添加浅灰色背景。如:

    1. <table class="table table-hover">
    2.   <thead>
    3.     <tr>
    4.       <th>#</th>
    5.       <th>First Name</th>
    6.       <th>Last Name</th>
    7.       <th>Username</th>
    8.     </tr>
    9.   </thead>
    10.   <tbody>
    11.     <tr>
    12.       <td>1</td>
    13.       <td>Mark</td>
    14.       <td>Otto</td>
    15.       <td>@mdo</td>
    16.     </tr>
    17.     <tr>
    18.       <td>2</td>
    19.       <td>Jacob</td>
    20.       <td>Thornton</td>
    21.       <td>@fat</td>
    22.     </tr>
    23.     <tr>
    24.       <td>3</td>
    25.       <td colspan="2">Larry the Bird</td>
    26.       <td>@twitter</td>
    27.     </tr>
    28.   </tbody>
    29. </table>

    效果如图 3‑25所示:

    Boostrap带悬停修改的表格图3-25 Boostrap带悬停修改的表格

    4、紧凑的表格

    为 <table> 添加 .table-condensed 类,所有单元格的 padding 都会减半(从8px减到4px),让表格更加紧凑。这种样式适合信息密集的情况。如:

    1. <table class="table table-condensed">
    2.   <thead>
    3.     <tr>
    4.       <th>#</th>
    5.       <th>First Name</th>
    6.       <th>Last Name</th>
    7.       <th>Username</th>
    8.     </tr>
    9.   </thead>
    10.   <tbody>
    11.     <tr>
    12.       <td>1</td>
    13.       <td>Mark</td>
    14.       <td>Otto</td>
    15.       <td>@mdo</td>
    16.     </tr>
    17.     <tr>
    18.       <td>2</td>
    19.       <td>Jacob</td>
    20.       <td>Thornton</td>
    21.       <td>@fat</td>
    22.     </tr>
    23.     <tr>
    24.       <td>3</td>
    25.       <td colspan="2">Larry the Bird</td>
    26.       <td>@twitter</td>
    27.     </tr>
    28.   </tbody>
    29. </table>

    效果如图 3‑26所示:

    Boostrap紧凑的表格图3-26 Boostrap紧凑的表格

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 一套基于bootstrap的漂亮表格,支持响应式布局,包含动态效果的图表,供大家研究学习
  • 基于Bootstrap的多级表格实现

    千次阅读 2017-06-02 17:39:24
    但实际应用中,需要的表格功能更能往往更为复杂,需要在Bootstrap表格类的基础上进行二次开发。  本文实现的主要是一个三级表格的开发,如下图:            主要的功能如下: 开一级菜单,出现全部...

      在JS中,借助于Bootstrap,我们可以高效地绘制表格。但实际应用中,需要的表格功能更能往往更为复杂,需要在Bootstrap表格类的基础上进行二次开发。

      本文实现的主要是一个三级表格的开发,如下图:

              这里写图片描述

      主要的功能如下:

    1. 点开一级菜单,出现全部二级菜单,并使一级菜单前的“缩回展开”图标由“缩回”变为“展开”;
    2. 点开二级菜单,出现全部三级菜单,并使二级菜单前的“缩回展开”图标由“缩回”变为“展开”;
    3. 在二级菜单处于展开状态下,点击对应的一级菜单项,收回二级菜单,并使一级菜单前的“缩回展开”图标由“展开”变为“缩回”;
    4. 在三级菜单处于展开状态下,点击对应的二级菜单项,收回三级菜单,并使二级菜单前的“缩回展开”图标由“展开”变为“缩回”;
    5. 在三级菜单处于展开状态下,点击对应的一级菜单项,收回二级和三级菜单,并使二级和三级菜单前的“缩回展开”图标由“展开”变为“缩回”;

      其中功能的前4点利用slideToggle()函数+类的添加移除可以实现,这里不再赘述。需要注意的主要是功能的第5点,在相邻级菜单互动的基础上,需要注意一、三级菜单间的互动,实现也较为简单,代码如下:

    function StateShow0()
        {
            $(".二级菜单类名").slideToggle("fast");
    
            if ($("#一级菜单ID").hasClass("glyphicon-plus-sign图标类1")) 
                {
                    $("#一级菜单ID").addClass("glyphicon-minus-sign图标类2");
                    $("#一级菜单ID").removeClass("glyphicon-plus-sign");
                } 
            else 
                {
                    $("#一级菜单ID").addClass("glyphicon-plus-sign");
                    $("#一级菜单ID").removeClass("glyphicon-minus-sign");
                    $(".二级菜单1类名").css("display","none");
                    $(".二级菜单2类型").css("display","none");
                    $("#二级菜单1ID").removeClass("glyphicon-minus-sign");
                    $("#二级菜单1ID").addClass("glyphicon-plus-sign");
                    $("#二级菜单2ID").removeClass("glyphicon-minus-sign");
                    $("#二级菜单2ID").addClass("glyphicon-plus-sign");
                }
        }
    展开全文
  • 利用Bootstrap做出简易表格

    千次阅读 2018-08-19 16:29:50
    Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 ...这里利用bootstrap做出一个表格以及分页的静态页面。 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&g...
  • BootStrap Table:表格参数

    万次阅读 2019-05-16 14:22:43
    官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ ...引入 bootstrap.css 和bootstrap-table.css到 <head> 标签下。 <head> <meta http-equiv="Content-Type" con...
  • Bootstrap-表格合并单元格

    万次阅读 2016-05-29 23:31:00
    1、问题背景 利用Bootstrap设计表格,并且表格需要合并单元格2、实现源码 Bootstrap-表格合并单元格 body,html{ width: 99%; height: 98%; font-family: "微软...
  • 如何实现BootStrapTable的动态表格

    万次阅读 多人点赞 2018-09-13 10:48:14
    BootStrapTable的动态表格 在我们构建BootStrapTable(下文中均称:BsTable),其中columns参数作为表格列的内容存储,我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。 columns参数格式...
  • Bootstrap编辑表格插件

    千次下载 热门讨论 2020-07-21 16:31:59
    包含bootstrap可编辑表格、下拉框、日期三个控件,功能齐全,使用简单,用法请参见http://blog.csdn.net/lzxadsl
  • Bootstrap实现边框表格效果 通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示: <!DOCTYPEhtml> <...
  • 深入理解BootStrap -- 表格4

    千次阅读 2016-01-05 15:21:29
    下面我们来看一下,Bootstrap已经为我们准备那些类型的表格呢?如下所示: 1.基本案例 2.条纹状表格 3.带边框的表格 4.鼠标悬停 5.紧缩表格 6.状态class 7.响应式表格 8.
  • 表格的面板 在使用面板组件时,往往可能需要在面板中放很多内容,如图片、表格等。如果在面板中添加表格,建议使用无边框的表格,这让整个面板看上去是一个整体。 如果是带有.panel-body的面板,我们还在表格的...
  • Bootstrap表格样式

    2018-05-24 16:58:21
    表格HTML表格是数据的二维容器,它的基本作用是用来存放数据。...Bootstrap支持的表格标签及其功能描述见表 3‑1:表 3‑1 Bootstrap支持的表格标签标签描述&lt;table&gt;定义表格容器&lt;th...
  • Bootstrap 4 如何自定义表格列宽度

    万次阅读 2018-08-23 08:35:30
    2018-03-28 更新: ...注意,以下的示例会使用到row,col等一系列class来完成表格宽度的自定义,所以如果觉得麻烦,也可以直接自定义css,不过这就不属于我们的讨论范围了。 好了,那我们开始...
  • 说说 Bootstrap 表格样式

    万次阅读 2019-11-16 11:18:26
    Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 &lt;table&gt; 为表格添加基础样式。 &lt;thead&gt; 表格标题行的容器元素。 ...
  • bootstrapTable清空表格重新加载

    万次阅读 2018-05-18 14:04:31
    我有两个加载条件,比如按时间、按地区重新加载,但是触发bootstrap-table之后无法再次触发,后来终于找到办法了:在重新加载表格之前,要将table销毁。$('#table').bootstrapTable('destroy');$('#searchCompanytab...
1 2 3 4 5 ... 20
收藏数 25,670
精华内容 10,268
关键字:

bootstrap 可以点 表格