表格数据是通过JS插入的，代码如下
有解决方法，万分感谢！！！
-
本版专家分：26结帖率 75% -
第一次使用bootstrap4.0，发现checkbox需要和label 一起使用才可以。所以现在表格使用checkbox出不来，求助一下。
表格数据是通过JS插入的，代码如下
有解决方法，万分感谢！！！
展开阅读全文
-
本版专家分：587 -
一般都是用bootstrap-table显示表格数据的，bootstrap默认提供的表格不够友好。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Table</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="lib/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div style="margin-left:100px;margin-top:100px;width:1200px;">
<div id="toolbar" class="btn-group">
<button id="add" type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="edit" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="delete" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="table"></table>
</div>
<script>
$(document).ready(function () {
$('#table').bootstrapTable({
url: "ashx/LoadDataHandler.ashx", // URL
method: "post", // 请求类型
contentType: "application/x-www-form-urlencoded", // post请求必须要有，否则后台接受不到参数
toolbar: "#toolbar", // 工具条
sidePagination: "server", // 设置在服务端还是客户端分页
showRefresh: true, // 是否刷新按钮
sortStable: true, // 是否支持排序
cache: false, // 是否使用缓存
pagination: true, // 是否显示分页
search: true, // 是否有搜索框
clickToSelect: true, // 是否点击选中行
pageNumber: 1, // 首页页码，默认为1
pageSize: 10, // 页面数据条数
pageList: [10, 20, 30],
queryParamsType: "",
queryParams: function (params) {
return {
pageSize: params.pageSize, // 每页记录条数
pageNumber: params.pageNumber, // 当前页索引
sortName: params.sortName, // 排序字段名称
sortOrder: params.sortOrder, // 降序还是升序
searchText: params.searchText // 搜索关键字
};
},
formatLoadingMessage: function () {
return "请稍后，正在加载....";
},
formatNoMatches: function () {
return "暂无匹配数据.";
},
columns: [{
field: "select",
title: "全选",
align: "center",
halign: "center",
checkbox: true,
},
{
field: 'Id',
title: '编号',
align: "center",
halign: "center",
sortable: true
},
{
field: 'Name',
title: '姓名',
align: "center",
halign: "center"
},
{
field: 'Gender',
title: '性别',
align: "center",
halign: "center"
},
{
field: 'Age',
title: '年龄',
align: "center",
halign: "center"
},
{
field: 'PhoneNumber',
title: '手机号',
align: "center",
halign: "center"
}]
})
});
</script>
</body>
</html>
-
本版专家分：26
-
使用bootstrap-table确实可以显示checkbox出来，但是和我其它表格的样式就不一样了，之前做的就白费了，而且不是很好看。所以还有其它解决方案没有。没有的话我就按这个来。
-
本版专家分：587
-
现在主流的前端库都提供这种带复选款的表格样式。另外提个建议：个人觉得你的表格处理方法有些繁琐。看你发的图片，你应该是采用字符串拼接的方式显示表格数据，这种写法不太优雅，也不利于后期维护。当前主流的表格处理方式是后台生成JSON数据返回前端，前端利用JSON数据填充表格，而且做法都是大同小异：html只声明一个简单的<table></table>标签，剩下的属性和方法都在js中进行定义，如果后期要修改，只需要找到js中对应的属性或方法进行修改即可。
-
本版专家分：26
-
ok 那样表格我也用过，我调整写法试试，还是想尽量做的好看一点，谢谢您的提示。
- bootstrap-table中的checkbox（复选框）被选中时触发的函数
当我们点击选择框的时候也许想要触发一些操作调用对应的函数...大致总结了一下：项目中用的几个方式。 ... ... 但是需要注意的时；1.与2，，不能同时存在，否则两者的函数都会同时触发，会执行两次；...在下面会进行详细的描述，
- Bootstrap实现表格复选框全选
最近在做一个后台页面，全部使用的Bootstrap，在此记录一下全选单选的做法。 效果图： 主要代码如下（正常表格布局）： $(function(){ function initTableCheckbox() { var $thr = $('table thead tr...
- Bootstrap之表格checkbox复选框全选
HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： <table class="table table-bordered table-hover"> <thead> <tr class="success"> <th>...
- Bootstrap之表格自定义checkbox复选框全选
Bootstrap之表格自定义checkbox复选框全选
- 转载：Bootstrap之表格checkbox复选框全选
HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： 版权声明：如需转载，请标明出处：http://blog.csdn.net/shangmingchao【商明超的博客】 效果图： HTML中无需添加额外...
- Bootstrap3.3.7全面解读和Bootstrap4.0全面分析----------001（全局CSS样式）
看到网上很多帖子介绍这个Bootstrap，介绍的一点也不系统。首先在我的印象中，Bootstrap一直的定位是“不懂美工的前端工程师的利器”，它的很多命令基本是基于class的定义来实现的。如果你的英文很不错，那Bootstrap...
- bootstrap使用说明
后台人员较为喜欢使用，因为几乎不用书写css样式，自带的就基本让你满意。前端人建议工作中不要过于依赖，否则呵呵了。框架的分类：html、css、js应用1 移动端开发；（pc端也可以使用，支持不太好）2 响应式布局；...
- bootstrap:tab和jqGrid的使用表格实现自适应（自用）
参考：https://blog.csdn.net/qq122453418/article/details/79051823 <!DOCTYPE html> <html> <head> <meta charset="utf-8">...meta name="viewport" content="width=device-width, ini...
- J2EE之 Extjs4.0 Grid 分页显示
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。...自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些
- bootstrap editable初始化后表单可修改数据
function loadData() { var url = "${ctx }/sys/marketing/product/page"... $('#tablepager').bootstrapTable({ url: url, dataType: "json", pagination: true, //分页 singl...
- 3 Bootstrap4样式
3 Bootstrap4样式3.1 文本1、标题2、内联文本元素3、文本对齐方式4、英文大小写3.2 列表3.3 表格1、表格样式2、响应式表格3、状态类3.4 图片1、图片的样式2、缩略图处理3、图片对齐处理4、响应式图片3.5 公共样式...
- Bootstrap4学习笔记1
Bootstrap4 学习笔记1 初始模板 html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> link rel="stylesheet" h
- Bootstrap
一、Bootstrap简介 1、Bootstrap是什么？ Bootstrap是由Twitter公司(全球最大的微博)的两名技术工程师研发的一个开源的前端开发框架 基于HTML、CSS、JavaScript,代码简洁、视觉优美，用来快速开发基于PC以及...
- MiniUI、Easyui、layui与Bootstrap对比
MiniUI、Easyui、layui与Bootstrap对比MiniUIEasyuilayuiBootstrap 最近要做一个后端的系统，boos让找个框架给他，顺道就写了一个这个。首先声明一下自己并不是专门做前端的不对的地方请评论指出，而且大多此文章以...
- JeeSite 4.0 说说前端的那些事
2019独角兽企业重金招聘Python工程师标准>>> ...
- bootstrap笔记①
bootstrap简介 （1）bootstrap是twitter公司开发基于HTML\CSS\javascript 的前端框架 （2）为实现web应用程序快速开发提供的一套前端工具包 （3）响应式布局 （4）移动设备优先
- JeeSite4.0学习
JeeSite 4.0 规划（一） JeeSiteJava EEJava企业架构快速开发平台 时隔3年，偶得OSC举办的2016最优秀的开源项目之一，让Gem兴奋了一下，也再次燃起了对JeeSite升级的强烈欲望。感谢OSC提供码云这么好的平台，...
- 看了一下bootstrap css
* Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ /*! normalize.css v3.0.3...
- KindEditor富文本编辑器的使用
一.初始化 kindeditor 编辑器 在页面中添加 JS 代码，用于初始化 kindeditor < script type="text/javascript"> var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name=...
- Maven+SSM+bootstrap+pagehelper+逆向工程实现CRUD
1、项目运行效果图 首页 末尾 增加 删除 修改 2、文件目录 3、pom.xml和web.xml pom.xml <project xmlns=...