时间:2021-05-28
Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到
这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值
当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了。
2.我的后台呢,是使用SpringMVC进行写的,期间呢也是遇到了很多的问题,进行分页处理的时候
使用了离线查询,但是呢,我使用的是execute()这个方法,传入的session为代理类的数据,不能再下面这个方法中进行转换
导致错误了,我还百度了很久,最后才发现是这个问题导致的
后台呢,我返回的数据和格式不是按照BootStrap中的格式有点差别吧,反正就是不一样
{ "success": true, "message": null, "data": { "pageSize": 15, "rows": [ { "userName": "333", "userType": 333, "password": "333", "id": 11, "indexcode": "333" }, { "userName": "3", "userType": 333, "password": "333", "id": 5, "indexcode": "33333" } ....... ], "total": 17, "totalPage": 2, "page": 0, "hasPreviousPage": true, "hasNextPage": true, "lastPage": false, "firstPage": false }}主要是这里我是用了统一的返回接口 ActionResult,这样比较方便书写格式,统一后端
** * Created by JetWang on 2016/10/1. */public class ActionResult { private boolean success; private String message; private Object data; public ActionResult(){ } public ActionResult(boolean success){ this(success, null, null); } ............}来看看前端的效果吧
前端的页面
<%@ include file="./common/common.jsp"%> //什么公用的bootstrapt ,JQuery啊之类的引用放进去处理了<script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.js" type="text/javascript"></script><script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table-locale-all.js" type="text/javascript"> </script><link rel="stylesheet" href="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.css" type="text/css">//这里就是容器中放置table的<div class="container"> <table id="table" data-url="/cms/UserInfo/userInfoPage">//使用的路径,后台请求的URL </table></div>比较重要的JS代码的说明
下面的配置文件和一些事件的重写呢,你可以查看文档,或者自己去看看你源码
这里你可以进行重写哦~~ ,extentd进行重新的覆盖!
看看上面的自己也基本上晓得怎么去,书写了!其实之前我根本不敢这么玩,只不过之前实习过程中导师教过我怎么去玩,所以我才敢,我相信,我可以好好的 玩好这些东西的!
function initTable() { $table.bootstrapTable({ striped: true, //表格显示条纹 pagination: true, //启动分页 pageSize: 15, //每页显示的记录数 pageNumber:1, //当前第几页 pageList: [10, 15, 20, 25], //记录数可选列表 search: false, //是否启用查询 showColumns: true, //显示下拉框勾选要显示的列 showRefresh: true, //显示刷新按钮 sidePagination: "server", //表示服务端请求 //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder //设置为limit可以获取limit, offset, search, sort, order responseHandler:function(res){ //远程数据加载之前,处理程序响应数据格式,对象包含的参数: 我们可以对返回的数据格式进行处理 //在ajax后我们可以在这里进行一些事件的处理 return res.data; }, queryParamsType : "undefined", queryParams: function queryParams(params) { //设置查询参数 var param = { //这里是在ajax发送请求的时候设置一些参数 params有什么东西,自己看看源码就知道了 pageNo: params.pageNumber, pageSize: params.pageSize }; return param; }, onLoadSuccess: function(data){ //加载成功时执行 alert("加载成功"+data); }, onLoadError: function(){ //加载失败时执行 layer.msg("加载数据失败", {time : 1500, icon : 2}); }, height: getHeight(), columns: [ { field: 'state', checkbox: true, align: 'center', valign: 'middle' }, { title: 'ID', field: 'id', align: 'center', valign: 'middle' }, { field: 'userName', title: 'UserName', sortable: true, footerFormatter: totalNameFormatter, align: 'center' }, { field: 'userType', title: 'UserType', sortable: true, align: 'center' }, { field: 'password', title: 'UserPass', sortable: true, align: 'center' },{ field: 'indexcode', title: 'Indexcode', sortable: true, align: 'center' },{ field: 'operate', title: 'Item Operate', align: 'center', events: operateEvents, formatter: operateFormatter } ] });上面的 footerFormatter 和 formatter 都是对于当前列的显示进行处理的事件,文档中如下
formatter:
The context (this) is the column Object. The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index.
footerFormatter :
The context (this) is the column Object. The function, take one parameter:
data: Array of all the data rows. the function should return a string with the text to show in the footer cell.
都是对于当前列进行处理显示
如下就是增加了两个按钮在一个单元格中
function operateFormatter(value, row, index) { return [ '<a class="like" href="javascript:void(0)" title="Like">', '<i class="glyphicon glyphicon-heart"></i>', '</a> ', '<a class="remove" href="javascript:void(0)" title="Remove">', '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join(''); }也可以在这里就增加事件的处理
<%--{ title: '操作', field: 'id', align: 'center', formatter:function(value,row,index){ var e = '<a href="#" rel="nofollow" target="_blank" mce_href="#" rel="nofollow" target="_blank" onclick="edit(\''+ row.id + '\')">编辑</a> '; var d = '<a href="#" rel="nofollow" target="_blank" mce_href="#" rel="nofollow" target="_blank" onclick="del(\''+ row.id +'\')">删除</a> '; return e+d; 也可以这样处理事件的 } }--%>官方中文档说的处理事件可以像下面这里处理
The cell events listener when you use formatter function, take four parameters: event: the jQuery event. value: the field value. row: the row record data. index: the row index.
Example code:
{ field: 'operate', title: 'Item Operate', align: 'center', events: operateEvents, formatter: operateFormatter } function operateFormatter(value, row, index) { return [ '<a class="like" href="javascript:void(0)" title="Like">', '<i class="glyphicon glyphicon-heart"></i>', '</a> ', '<a class="remove" href="javascript:void(0)" title="Remove">', '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join(''); } window.operateEvents = { 'click .like': function (e, value, row, index) { alert('You click like action, row: ' + JSON.stringify(row)); }, 'click .remove': function (e, value, row, index) { $table.bootstrapTable('remove', { field: 'id', values: [row.id] }); } };处理系统中存在的事件的处理,文档中有说
$('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) { // ... }});$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) { // ...});//这个名字文档中很多!onAll all.bs.table name, args Fires when all events trigger, the parameters contain: name: the event name, args: the event data.处理一些方法,比如当前选择了多少行,全选等等
.....很多很多的东西!
一个删除的按钮,删除所有的选择的事件!是不是很好呢!
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1、bootstrap-table是在bootstrap的基础上面做了一些封装,所以在使用bootstrap-table之前要导入的js和css有 1)基本的
本文实例为大家分享了bootstrap输入框组的使用方法,供大家参考,具体内容如下Bootstrap@@搜索学院课程htmlcssjavascriptlessb
iview的table组件自带的过滤器实现iview框架的table组件自带的过滤器的使用方法:exportdefault{data(){return{colu
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下:使用bootstrap-table实现后台分页插件资源点击此处本站下载
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.ne