*** 作步骤：
创建一个默认的导航栏的步骤如下：
向 <nav> 标签添加 class navbar、navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class nav、navbar-nav 的无序列表即可。
实例演示：
<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 默认的导航栏</title> <link href="/bootstrap/css/bootstrapmincss" rel="stylesheet"> <script src="/scripts/jqueryminjs"></script> <script src="/bootstrap/js/bootstrapminjs"></script></head><body><nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div></nav></body></html>
前端代码块
<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">
function initTable(){
$('#test-table')bootstrapTable({
method: 'get',
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）
pagination: true, //是否显示分页（）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（）
url: "/testProject/page4listjson",//这个接口需要处理bootstrap table传递的固定参数
queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
//queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（）
//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
//showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true,
columns: [{
field: 'id',
title: 'id',
align: 'center'
}, {
field: 'testkey',
title: '测试标识',
align: 'center'
}, {
field: 'testname',
title: '测试名字',
align: 'center'
},{
field: 'id',
title: ' *** 作',
align: 'center',
formatter:function(value,row,index){
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
var a = '<a href="" >测试</a>';
}
}],
pagination:true
});
}
在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。
服务端代码
@RequestMapping(value = "/page4listjson")
public void page4list(Integer pageSize, Integer pageNumber, String searchText, >
opyright © 1999-2020, CSDNNET, All Rights Reserved
打开APP
Bootstrap—table控件的传参取值 原创
2017-05-05 00:02:08
奔跑的大白啊
码龄8年
关注
前言
最近小编接触的项目中，统一采用扁平化的流行风格，前台使用的Bootstrap框架，相对于EasyUI绑定数据的时候有点复杂，在Table控件传值的时候就卡住了，Bootstrap第一次了解，总结一下它的使用套路。
需求描述
查询一段时间间隔内的数据，需要获取页面上两个日期控件上的日期值传递到Controller的方法中做进一步的逻辑处理。
代码详解
1 在cshtml页面引用相关组件，并定义一个空的表格
@bootstrap table组件以及中文包的引用@
<script src="~/Content/bootstrap-table/bootstrap-tablejs"></script>
<link href="~/Content/bootstrap-table/bootstrap-tablecss" rel="stylesheet" />
<script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CNjs"></script>
@定义一个空的table@
<table id="table"></table>
2 Js初始化
$(function () {
//初始化Table
var oTable = new TableInit();
oTableInit();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInitInit = function () {
$('#table')bootstrapTable({
url: '/ConfluenceSurvey/Query', //请求后台的URL（）
method: 'get', //请求方式（）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）
pagination: true, //是否显示分页（）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInitqueryParams,//传递参数（）
sidePagination: "client", //分页方式：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: 'date',
title: '日期'
}, {
field: 'daycoin',
title: '每日小计'
}, {
field: 'totalcoin',
title: '到此日的积分'
} ]
});
};
//得到查询的参数
oTableInitqueryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: paramslimit, //页面大小
offset: paramsoffset, //页码
startdate: $("#startdate")val(),
enddate: $("#enddate")val()
};
return temp;
};
return oTableInit;
};
注：初始化Table必须的几个参数小编用（）做了标记。
3 在Controller中对应的方法
按照正常的方法传参接收就可以了，此处代码省略
4 效果
重点突破-传参取值
1Table组件中定义传参属性
queryParams: oTableInitqueryParams,//传递参数（）
2 定义具体传参方法
//得到查询的参数
oTableInitqueryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: paramslimit, //页面大小
offset: paramsoffset, //页码
startdate: $("#startdate")val(),
enddate: $("#enddate")val()
};
return temp;
};
return oTableInit;
};
总结
不怕不知道，就怕不知道，有需求就一定可以实现。
打开CSDN，阅读体验更佳
最新发布 bootstrapTable传参示例
bootstrapTable传参示例
继续访问
bootstrap table配置参数例子
主要为大家详细介绍了bootstrapTable的参数设置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap initTable参数传递
queryParams: function (params) { var searchParams = $('#searchForm')getValues(); var temp = { paraId: arr['id'], paraLB: arr['leibie'] ,
继续访问
Bootstrap-table 查询时通过Post请求传入复杂类型参数到后台控制器
Bootstrap-table默认的传参 Bootstrap-table每次刷新或者排序都会自动向设置好的url发送一个请求，请求中包含4个默认的参数 当data-query-params-type属性设置成limit时（默认情况） 四个参数为：limit,offset,sort,order 当data-query-params-type为空时 四个参数为：pageSize,pa
继续访问
bootstrap-table 获取所有数据_Bootstrap table教程
Bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现将数据库中提取到数据在前端进行相应 *** 作的功能快速上手 对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查 *** 作,以及增加 *** 作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过一
继续访问
Bootstrap-Table实现自定义条件查询
鉴于最近有人询问Bootstrap-Table的自定义条件查询如何实现，今天特在此说明。首先展示一下效果： 默认查询 条件查询 测试数据 前端代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <
继续访问
BootStrap table 传递搜索参数
转载自：>
以上就是关于怎样使bootstrap导航栏始终显示成一行全部的内容，包括:怎样使bootstrap导航栏始终显示成一行、bootstrap table服务器分页的问题（PHP）、table.init函数可以传参吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）