表格组件---bootstrapTable
2024-08-27 11:40:34
bootstrapTable
中文官方网站http://bootstrap-table.wenzhixin.net.cn
1.文件引用
//1、引用Jquery
<script src="~/Scripts/jquery-1.10.2.js"></script> //2、应用bootstrap
<script src="~/Content/bootstrap/bootstrap.js"></script>
<link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" /> //3、引用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>
2.bootstrap-table说明
关于列参数的操作
formatter:对列参数进行格式化，可以返回value值，也可以返回一个dom元素，例如一个操作按钮
editable：实现列参数的可编辑功能。validate：对列参数的内容限制，可提示异常信息
关于分页
sidePagination可以在客户端分页，填写参数的值为"client",客户端分页也就是将所有数据取出，前端分页展示，弊端就是数据量比较大的时候，会查询比较慢；
也可以在服务端分页，填写参数的值为"server",服务端分页也就是后端分页，后端接收到分页参数，每次查询传递的参数那么多数据，点击其他页面时再次出发查询请求，需要limit页面大小，offset页面偏移量两个参数
具体需要在queryParams处，填写页面大小和页面偏移量
limit: params.limit, //页面大小
offset: params.offset, //页码偏移量
hibernate 数据dao的实现层，具体的sql语句如下
@Override
public List findByPage(final String hql, final Object value, final int offset, final int pageSize) {
// TODO Auto-generated method stub
// 通过一个HibernateCallback 对象来执行查询
// System.out.println(hql);
List list = getHibernateTemplate().executeFind(new HibernateCallback() {
// 实现hibernateCallback接口必须实现的方法
@Override
public Object doInHibernate(Session session)
throws HibernateException {
// 执行hibernate 分页查询
Query query= session.createQuery(hql);
whereParameter((AppiumConfig)value, query);
List result =query
.setFirstResult(offset).setMaxResults(pageSize).list();
session.close();
return result;
} });
return list;
}
3.bootstrap-table代码
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_appiumconfig').bootstrapTable({
url: '/appAppium/list.do', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索会进服务端
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true,
width: '3%',
}, {
field: 'id',
title: 'id',
visible: false
}, {
field: 'projectid',
title: 'projectid',
visible: false
}, {
field: 'projectname',
title: '项目名称',
width: '10%',
}, {
field: 'apppackage',
title: 'app包名',
width: '10%',
}, {
field: 'apkupload',
title: 'apk路径',
width: '30%',
formatter: function (value, row, index) {
console.log(row);
return value;
}
},
{
field: 'updatetime',
title: '更新时间',
width: '10%',
},
/*{
field: 'clientip',
title: '客户端IP',
width: '7%',
formatter: function (value, row, index) {
if (value.indexOf("**0") > -1) {
return '<font style="color:#00bf5f">' + value.substring(0, value.indexOf("**0")) + '</font>';
} else if (value.indexOf("**1") > -1) {
return '<font style="color:#ff0000">' + value.substring(0, value.indexOf("**1")) + '</font>';
} else {
return '<font style="color:#FF7F00">' + value + '</font>';
}
}
},*/
{
field: 'operationer',
title: '更新人员',
width: '10%',
},
{
field: 'remark',
title: '备注',
width: '20%',
editable: {
type: 'textarea',
title: '备注',
emptytext: "无备注",
validate: function (value) {
if (value.length > 200)
return '备注不能超过200个字符';
}
}
}],
onEditableSave: function (field, row, oldValue, $el) {
var status = document.getElementById("loginstatus").value;
if (status == "false") {
if (window.confirm("你未登录哦，要先去登录吗？")) {
var url = '/progressus/signin.jsp';
window.location.href = url;
return true;
} else {
return false;
}
}
$('#tb_appiumconfig').bootstrapTable("resetView");
$.ajax({
type: "post",
url: "/appAppium/update.do",
data: row,
dataType: 'JSON',
success: function (data, status) {
if (data.status == "success") {
toastr.success(data.ms);
} else {
$('#tb_appiumconfig').bootstrapTable('refresh');
toastr.info(data.ms);
}
},
error: function () {
toastr.error('编辑失败!');
},
complete: function () {
}
});
}
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码偏移量
search: params.search, //搜索参数
projectid: $('#search_project').val(), //项目ID
};
return temp;
};
return oTableInit;
};
使用过程中遇到的问题后续补充，，，
最新文章
- 源码编译安装mysql
- vs2010 2013 2015+ 必备插件精选（15个）
- (转)ACM next_permutation函数
- Linux 的账号与群组[转自vbird]
- javaweb笔记1之入门
- 移动端Click300毫秒点击延迟的来龙去脉(转)
- Mac 搭建svn本地服务端
- Linux下如果忘记了Mysql的root密码该怎么办？
- 【原创】 Docker 中 运行 ASP.NET Core 站点
- 使用Xamarin开发手机聊天程序 -- 基础篇（大量图文讲解 step by step，附源码下载）
- 剑指Offer——美团内推+校招笔试题+知识点总结
- 深度学习框架PyTorch一书的学习-第三章-Tensor和autograd-1-Tensor
- Confluence 6 服务器的许可证信息
- tomcat配置介绍
- windows中连接hive-客户端
- php把时间戳转换成英文格式
- IOS AudioServicesPlaySystemSound 后台锁屏播放
- MongoDB day03
- Centos 7 安装Anaconda3
- Linux学习笔记之文件权限