bootstrap最新?

table.init函数可以传参吗

opyright?1999-2020,CSDN.NET,AllRightsReserved

打开APP

【Bootstrap】—table控件的传参取值原创

2017-05-0500:02:08

奔跑的大白啊

码龄8年

关注

前言

???最近小编接触的项目中，统一采用扁平化的流行风格，前台使用的Bootstrap框架，相对于EasyUI绑定数据的时候有点复杂，在Table控件传值的时候就卡住了，Bootstrap第一次了解，总结一下它的使用套路。

需求描述

???查询一段时间间隔内的数据，需要获取页面上两个日期控件上的日期值传递到Controller的方法中做进一步的逻辑处理。

代码详解

1.在cshtml页面引用相关组件，并定义一个空的表格????

@*bootstraptable组件以及中文包的引用*@

?scriptsrc="~/Content/bootstrap-table/bootstrap-table.js"/script

?linkhref="~/Content/bootstrap-table/bootstrap-table.css"rel="stylesheet"/

?scriptsrc="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"/script

@*定义一个空的table*@

tableid="table"/table?

2.Js初始化??

$(function(){

?

?//初始化Table

?varoTable=newTableInit();

?oTable.Init();

});

?

varTableInit=function(){

?varoTableInit=newObject();

?//初始化Table

?oTableInit.Init=function(){

?$('#table').bootstrapTable({

?url:'/ConfluenceSurvey/Query',//请求后台的URL（*）

?method:'get',//请求方式（*）

?toolbar:'#toolbar',//工具按钮用哪个容器

?striped:true,//是否显示行间隔色

?cache:false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

?pagination:true,//是否显示分页（*）

?sortable:false,//是否启用排序

?sortOrder:"asc",//排序方式

?queryParams:oTableInit.queryParams,//传递参数（*）

?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:'到此日的积分'

??}]

?});

?};

?

?//得到查询的参数

?oTableInit.queryParams=function(params){

?vartemp={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

?limit:params.limit,//页面大小

?offset:params.offset,//页码

startdate:$("#startdate").val(),

?enddate:$("#enddate").val()

?};

?returntemp;

?};

?returnoTableInit;

};

注：初始化Table必须的几个参数小编用（*）做了标记。

3.在Controller中对应的方法

???按照正常的方法传参接收就可以了，此处代码省略

4.效果

???

重点突破-传参取值

1.Table组件中定义传参属性

queryParams:oTableInit.queryParams,//传递参数（*）

2.定义具体传参方法

//得到查询的参数

oTableInit.queryParams=function(params){

vartemp={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

limit:params.limit,//页面大小

offset:params.offset,//页码

startdate:$("#startdate").val(),

enddate:$("#enddate").val()

};

returntemp;

};

returnoTableInit;

};

总结

???不怕不知道，就怕不知道，有需求就一定可以实现。

???

打开CSDN，阅读体验更佳

最新发布bootstrapTable传参示例

bootstrapTable传参示例

继续访问

bootstraptable配置参数例子

主要为大家详细介绍了bootstrapTable的参数设置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

BootstrapinitTable参数传递

queryParams:function(params){varsearchParams=$('#searchForm').getValues();vartemp={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获取所有数据_Bootstraptable教程

Bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现将数据库中提取到数据在前端进行相应操作的功能快速上手对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查操作,以及增加操作的的模态框(bootstrapmodal),以及表单校检(bootstrap-validate),最近有点忙,过一...

继续访问

Bootstrap-Table实现自定义条件查询

鉴于最近有人询问Bootstrap-Table的自定义条件查询如何实现，今天特在此说明。首先展示一下效果：默认查询条件查询测试数据前端代码!DOCTYPEhtmlhtmlheadmetacharset="utf-8"/title/title...

继续访问

BootStraptable传递搜索参数

转载自：看bootStraptable文档不难发现它有一个queryparams属性，是向后台传递参数的，默认参数已有pageSize、pageIndex等，那么怎么传递自定义的参数呢？在网上找了好多也没有找到于是看源码，得到解决方法：functionSearch(

继续访问

bootstraptableoffset参数问题

初始化table的时候：queryParamsType没这个参数oTableInit.queryParams=function(params){console.log(params)vartemp={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit:params.limit...

继续访问

封装ul组件，使用这个element组件库Table相关操作，Drawer抽屉基本用法，elementtable表格选中事件。传参问题。elementui中的input修改宽度

封装ul组件，使用这个element组件库Table相关操作，elementtable表格选中事件。传参问题

继续访问

原生table点击传参问题

大多数情况，我们在做表格的时候，会有一个点击事件，同时会传参数，但是，今天我要描述的是：点击表格传递两个参数(即传“所在行”和“所在列”这两个参数)，表格如下图所示然后给每个单元格一个点击事件tdclass="td"@click="toDeatil()"{{item.num1}}/td只有在这个toDetail()方法中进行传参问题toDetail(){lettable=event.srcElement;letr.

继续访问

《前端》BootstrapTable表格的使用-2020年9月24日--（？？传递参数queryParams）

想做一个可以自定义配置列的table。发现bootstrap-table有这个功能。但是我单独一个文件试验的时候能出效果。但是当组合的其他页面的时候，却不生效报错了。原因：添加引用文件的顺序导致的。放到上面就显示了。效果如图：代码：!--引用--linkrel="stylesheet"href="

继续访问

bootstarp之简单表格$(function(){console.log();//1.初始化TablevaroTable=newTableInit(

点击行事件触发需要jquery-toast.js当然也需要bootstarptable的jscss$(function(){???console.log();??//1.初始化Table??varoTable=newTableInit();??oTable.Init();??//2.初始化Button的点击事件?

继续访问

bootstraptable初始化参数

//初始化Table$('#tb_order').bootstrapTable({url:'/TableStyle/GetOrder',//请求后台的URL（*）method:'get',//请求方式（*）//toolbar:'#too

继续访问

bootstrapTable中queryParams传值到后台获取不到解决办法

1、使用boostrap的table插件做表单时，在传值到后台时，后台获取不到，一直是null，很是头疼解决办法：在对应Action中，定义提交过来的参数，然后提供set，get方法：其set和get方法：之后在Action方法中：

继续访问

JQueryDatatablesColumnsAPI参数详细说明

DataTables:?Version:1.10.0?Columns说明虽然我们可以通过DOM直接获取DataTables元素的信息，但是DataTables提供了更方便的方法，可以自定义列的属性。下边就让我们一起来学习DataTables是怎么来定义列属性的。DataTables提供了两个参数来定义列属性：columns...

继续访问

BootstrapTable使用分享

版权声明：本文为博主原创文章，未经博主允许不得转载。最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案:a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入(pc页面)b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC设备采...

继续访问

热门推荐bootstrap-table的formatter列参数

%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";response.setHeader("X-Frame-Op

继续访问

数据库课程设计

c语言文件读写操作代码

其实自己写demo更多的时候都是手写css的，因为可以自己定制，自由控制且可以随便折腾，但有时候很多流水工厂式的样式写起来就太无趣了，所以还是用Bootstrap吧……

首先新建一个Html页面，把Bootstrap的样式与脚本引用塞进去：

这里有个问题，Bootstrap4.0以上是彻底不支持IE8以下的浏览器的，最新版已经把IE9抛弃了；==

因为Bootstrap是JQuery依赖的，所以需要在脚本中引入JQuery，要注意的是，Bootstrap3.3.6版本以下是不支持JQuery3的，只能用JQuery2.

引入之后，在页面上插入container容器：

在这里是使用container还是container-fluid，主要看页面需求，两者区别在于：container-fluid是一个全宽的容器，使用整个宽度，而container则相当于一个margin：auto；的响应式的静态宽度div盒子；

两者的css设置：

标题与导航栏都可以写在header里：

在这里，导航使用nav标签创建的，Bootstrap里的导航条称为navbar，navbar默认样式为白色，.navbar-inverse为颜色反白，可以得到黑色的导航条，需要其他颜色可以自己手动设置；

在.navbar-collapse中写入导航栏，.nav表明该ul为一导航栏，各li为导航类目；.navbar-nav说明是用于navbar中的导航;

在li中设置.active,可以在JavaScript中控制鼠标click或者mouseover效果；

例如：

.navbar-collapse是说在视口的宽度小于768px的时候，将导航变成垂直方向。

对比：

如果想要获得移动端的三明治型显示，需要额外进行修改：

这里a标签是左侧的链接，button为右侧的三明治导航按钮，span为导航按钮的设计构成（三条白线和边框……）；

然后要完成点击三明治导航菜单的显示/隐藏，这时需要用到button里的data-target="#navbar-menu"，这个#navbar-menu就是我们为原来的导航所起的id标识。

其中showoff和mainnav分别是给button和div.navbar-collapse添加的id；

页面主体如果是传统样式，符合栅格化，则使用栅格化样式最快捷；

栅格样式具体可以参阅Bootstrap文档；

以两栏布局为例：

然后设置侧边栏，侧边栏也可以设置为导航nav；

使用nav-tabs和nav-stacked设置导航栏外观；

这样主题搭建就完成了。

ref:

20分钟打造你的Bootstrap站点;

Bootstrap中文文档;

什么是Bootstrap？

Bootstrap是Web应用程序的前端框架。基于HTML、CSS、JAVASCRIPT。

Bootstrap由美国Twitter公司的设计师MarkOtto和JacobThornton合作开发的，基于HTML、CSS、JavaScript的简洁、直观、强悍的前端开发框架，使得Web开发更加快