打开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-table.js"></script>
<link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
@*定义一个空的table*@
<table id="table"></table>
2. Js初始化
$(function () {
//初始化Table
var oTable = new TableInit()
oTable.Init()
})
var TableInit = function () {
var oTableInit = new Object()
//初始化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) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
startdate: $("#startdate").val(),
enddate: $("#enddate").val()
}
return temp
}
return oTableInit
}
注:初始化Table必须的几个参数小编用(*)做了标记。
3. 在Controller中对应的方法
按照正常的方法传参接收就可以了,此处代码省略
4. 效果
重点突破-传参取值
1.Table组件中定义传参属性
queryParams: oTableInit.queryParams,//传递参数(*)
2. 定义具体传参方法
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
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 传递搜索参数
转载自:http://www.cnblogs.com/huhangfei/p/5019733.html 看bootStrap table文档不难发现它有一个queryparams属性,是向后台传递参数的,默认参数已有pageSize、pageIndex等,那么怎么传递自定义的参数呢?在网上找了好多也没有找到于是看源码,得到解决方法: function Search(
继续访问
bootstrap table offset 参数问题
初始化table的时候:queryParamsType 没这个参数 oTableInit.queryParams = function (params) { console.log(params) var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit...
继续访问
封装ul组件,使用这个element组件库Table相关 *** 作,Drawer 抽屉基本用法,element table表格选中事件。传参问题。elementui中的input修改宽度
封装ul组件,使用这个element组件库Table相关 *** 作,element table表格选中事件。传参问题
继续访问
原生table点击传参问题
大多数情况,我们在做表格的时候,会有一个点击事件,同时会传参数,但是,今天我要描述的是:点击表格传递两个参数(即传“所在行”和“所在列”这两个参数),表格如下图所示 然后给每个单元格一个点击事件 <td class="td" @click="toDeatil()">{{item.num1}}</td>只有在这个toDetail()方法中进行传参问题 toDetail() { let table = event.srcElementlet r.
继续访问
《前端》BootstrapTable表格的使用-2020年9月24日--(??传递参数queryParams)
想做一个可以自定义配置列的table。发现bootstrap-table有这个功能。但是我单独一个文件试验的时候能出效果。但是当组合的其他页面的时候,却不生效报错了。 原因:添加引用文件的顺序导致的。 放到上面就显示了。 效果如图: 代码: <!-- 引用 --><link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.c
继续访问
bootstarp 之 简单表格$(function () { console.log()//1.初始化Table var oTable = new TableInit(
点击行事件触发需要jquery-toast.js 当然也需要bootstarp table 的js css $(function () { console.log() //1.初始化Table var oTable = new TableInit() oTable.Init() //2.初始化Button的点击事件
继续访问
bootstrap table初始化参数
//初始化Table $('#tb_order').bootstrapTable({ url: '/TableStyle/GetOrder', //请求后台的URL(*) method: 'get', //请求方式(*) //toolbar: '#too
继续访问
bootstrapTable中queryParams传值到后台获取不到解决办法
1、使用boostrap的table插件做表单时,在传值到后台时,后台获取不到,一直是null,很是头疼 解决办法:在对应Action中,定义提交过来的参数,然后提供set,get方法: 其set和get方法: 之后在Action方法中:
继续访问
JQuery Datatables Columns API 参数详细说明
Data Tables: http://datatables.net/ Version: 1.10.0 Columns说明 虽然我们可以通过DOM直接获取DataTables元素的信息,但是DataTables提供了更方便的方法,可以自定义列的属性。下边就让我们一起来学习DataTables是怎么来定义列属性的。 DataTables提供了两个参数来定义列属性:columns ...
继续访问
Bootstrap Table使用分享
版权声明:本文为博主原创文章,未经博主允许不得转载。 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机、平板、PC 设备 采...
继续访问
热门推荐 bootstrap-table的formatter列参数
<% String path = request.getContextPath()String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"response.setHeader("X-Frame-Op
继续访问
数据库课程设计
c语言文件读写 *** 作代码
1、批处理脚本中,要想与用户实行交互,需要用到命令set 配合/p参数一起使用。
2、set命令是用来定义变量并赋值的,而使用/p参数后,set 并不马上在命令中给变量赋值,而是另起一行,等待用户的输入,并用户的输入内容做为值赋给变量。
3、而且在set /p后,可以加入提示语句,让用户知道,程序正在等待输入。
4、与用户交互,虽然已经实现了用户输入的接收。但还需要对接收到的内容进行处理,这时可以利用if 语句来完成。
5、运行后的效果如下,用户输入admin时,显示“输入正确”,否则,显示“请输入正确的用户名”。
6、再来完善一下脚本代码,做一个简单的用户登录判断。主要用到goto语句和if语句,实现python写网页后台实现与数据库交互。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)