bootstrap-table样式修改

bootstrap-table修改后的效果如下

1.删除边线

<style>.table>tbody>tr>td{border-top: 1px solid transparent !important;border-right: 1px solid transparent !important;border-left: 1px solid transparent !important;}.table>thead>tr>th{border-right: 1px solid transparent !important;border-left: 1px solid transparent !important;}
</style>

2. 修改toolbar位置

<section id="main-content"><section class="wrapper"><!-- page start--><div class="row "><div class="col-sm-12"><section class="panel"><div class="panel-body"><h4><i class="fa fa-tasks"></i> 用户管理 </h4><hr><div id="toolbar"><form class="form-inline">姓名<input type="text" name="username" class="form-control"  size="15"  id="name">工号<input type="text" name="employeeNum"  class="form-control"  size="15" id="num">部门<input type="text" name="department"  class="form-control"  size="15" id="depart"><input type="button" value="搜索" class="btn btn-default btn-sm"  onclick="searchUser()"><input type="button" value="重置" class="btn btn-default btn-sm" onclick="resetUser()"></form></div><!-- 加载bootstraptable的表格，ID名称必须为bootstrap-table --><table id="bootstrap-table"  class="table table-striped table-advance table-hover"><thead><tr><th data-field="state" data-checkbox="true"></th><th data-field="id" data-sortable="true">ID</th><th data-field="username" data-sortable="true" data-searchable="true" data-filter-control="input">姓名</th><th data-field="employeeNum" data-sortable="true" data-searchable="true" data-filter-control="input">工号</th><th data-field="unitName">单位</th><th data-field="department">部门</th><th data-field="sex">性别</th></tr></thead></table><div class="add-task-ro"><input  type="button" value="新增用户" id="addBtn" data-toggle="modal" onclick="targetAddUser()" class="btn btn-success  btn-sm" data-backdrop="false"><input  type="button" value="修改用户" id="editBtn" data-toggle="modal" class="btn btn-success  btn-sm" onclick="editUser()" data-backdrop="false"><input  type="button" value="删除用户" id="deleteBtn" data-toggle="modal" class="btn btn-danger btn-sm" onclick="deleteModel()"></div></div></section></div></div></section>
</section>

3.js代码，不显示bootstrap-table多余按钮

/bootstrap-table初始化
$("#bootstrap-table").bootstrapTable({url: "pageModel",//请求后台的URL（*）dataType: "json",// 此间是与client不一样的地方=======================开始contentType: "application/x-www-form-urlencoded",sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）//修改请求参数，不设置则有默认值 ，返回值必须是一个对象method: 'POST',//请求方式（*）toolbar: '#toolbar',toolbarAlign:'right',sortable: true,sortName: "id",sortOrder: "desc",//排序方式// 此间是与client不一样的地方=======================结束striped: true,//是否显示行间隔色cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pagination: true,showHeader: true,pageNumber: 1,//初始化加载第一页，默认第一页,并记录pageSize: 10,//每页的记录行数（*）pageList: [10, 20, 100],queryParams:queryParam,//最少允许的列数clickToSelect: true,//是否启用点击选中行uniqueId: "id",//每一行的唯一标识，一般为主键列
});function queryParam(params){var name = $('#name').val();   var num = $('#num').val();var depart = $('#depart').val();var param = {pageNumber : this.pageNumber,pageSize : this.pageSize,name: name,num: num,depart:depart};return param;}

bootstrap-table样式修改相关推荐

antd table 样式修改
.ant-table-wrapper {width: 98%;height: 100%;position: relative;top: 30px; } .ant-table {background-c ...
layer.tips使用+样式修改
文章目录使用--鼠标滑过或移开控制tips的显示和隐藏步1:$('.fujian') ------ 获取需要显示tips的元素步2: $('.fujian').on() ----- 绑定事件步 ...
bootstrap分页css样式,修改bootstrap-table中的分页样式
使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧. 最终找到与之对应的js(bootstrap-table ...
layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_js相关：layui中table表头样式修改方法
js相关:layui中table表头样式修改方法发布于 2020-7-25| 复制链接分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...
theadClasses设置Bootstrap Table表头样式
通过theadClasses属性设置表头样式. thead-light设置灰色背景 //bootstrap table初始化数据 itxst.com $('#table').bootstrapTabl ...
Bootstrap 之Table样式
将<table>标签添加class='table' 类后的样式 <html> <head><meta name="viewport" co ...
去除bootstrap的table样式中单元格边框线
使用bootstrap的table样式,在非纯白背景下,会有单元格边框线,影响美观. 去除方式: <style type="text/css"> bod ...
bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...

bootstrap-table样式修改

bootstrap-table样式修改相关推荐

最新文章

热门文章