Bootstrap table的基本使用总结

最新推荐文章于 2024-05-21 16:45:41 发布
最新推荐文章于 2024-05-21 16:45:41 发布
阅读量1w 收藏 1
点赞数
文章标签： js bootstrap jquerybootstrap
原文链接：https://www.cnblogs.com/mr-wuxiansheng/p/8017389.html
版权 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    <div class="wrapper wrapper-content ">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-body">
                    <div class="fixed-table-toolbar">
                        <div class="columns pull-left">
                            <button type="button" class="btn  btn-primary" onclick="add()">
                                <i class="fa fa-plus" aria-hidden="true"></i>添加
                            </button>
                            <button type="button" class="btn  btn-danger"
                                onclick="batchRemove()">
                                <i class="fa fa-trash" aria-hidden="true"></i>删除
                            </button>
                        </div>
                        <div class="columns pull-right">
                            <button class="btn btn-success" onclick="reLoad()">查询</button>
                        </div>
                        <div class="columns pull-right">
                            <input id="searchName" type="text" class="form-control"
                                placeholder="">
                        </div>
                    </div>
                    <table id="exampleTable" data-mobile-responsive="true">
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div th:include="include :: footer"></div>
    <script type="text/javascript"
        src="/js/appjs/common/job/job.js"></script>
</body>
</html>

$('#exampleTable')
        .bootstrapTable(
            {
                method: 'get', // 服务器数据的请求方式 get or post
                url: prefix + "/list", // 服务器数据的加载地址
                // showRefresh : true,
                // showToggle : true,
                // showColumns : true,
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                dataType: "json", // 服务器返回的数据类型
                pagination: true, // 设置为true会在底部显示分页条
                // queryParamsType : "limit",
                // //设置为limit则会发送符合RESTFull格式的参数
                singleSelect: false, // 设置为true将禁止多选
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize: 10, // 如果设置了分页，每页数据条数
                pageNumber: 1, // 如果设置了分布，首页页码
                // search : true, // 是否显示搜索框
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者
                // "server"
                queryParams: function (params) {
                    return {
                        // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        limit: params.limit,
                        offset: params.offset
                        // name:$('#searchName').val(),
                        // username:$('#searchName').val()
                    };
                },
                // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                // queryParamsType = 'limit' ,返回参数必须包含
                // limit, offset, search, sort, order 否则, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false将会终止请求
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        field: 'id',
                        title: 'id'
                    },
                    {
                        field: 'jobName',
                        title: '任务名称'
                    },
                    {
                        field: 'jobGroup',
                        title: '任务分组'
                    },
                    {
                        field: 'beanClass',
                        title: '任务类'
                    },
                    {
                        field: 'cronExpression',
                        title: 'cron表达式'
                    },
                    {
                        visible: false,
                        field: 'methodName',
                        title: '方法名称'
                    },
                    {
                        visible: false,
                        field: 'isConcurrent',
                        title: '任务是否有状态'
                    },
                    {
                        visible: false,
                        field: 'description',
                        title: '任务描述'
                    },
                    {
                        visible: false,
                        field: 'updateBy',
                        title: '更新者'
                    },

                    {
                        visible: false,
                        field: 'createDate',
                        title: '创建时间'
                    },


                    {
                        visible: false,
                        field: 'updateDate',
                        title: '更新时间'
                    },
                    {
                        visible: false,
                        field: 'createBy',
                        title: '创建者'
                    },
                    {
                        visible: false,
                        field: 'springBean',
                        title: 'Spring bean'
                    },

                    {
                        field: 'jobStatus',
                        title: '停起操作',
                        formatter: function (value, row, index) {
                            var e = '<a class="btn btn-success btn-xs" href="#" mce_href="#" title="点击开启" οnclick="changeStatus(\''
                                + row.id + '\',\'' + row.jobStatus
                                + '\')"><i class="fa fa-hourglass-start"></i>开启</a> ';
                            var f = '<a class="btn btn-danger btn-xs" href="#" mce_href="#" title="点击关闭" οnclick="changeStatus(\''
                                + row.id + '\',\'' + row.jobStatus
                                + '\')"><i class="fa fa-square-o">关闭</i></a> ';
                            if (row.jobStatus == 0) {
                                return e;
                            } else {
                                return f;
                            }

                        }
                    },

                    {
                        title: '操作',
                        field: 'id',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var e = '<a class="btn btn-primary btn-sm" href="#" mce_href="#" title="编辑" οnclick="edit(\''
                                + row.id + '\',\'' + row.jobStatus
                                + '\')"><i class="fa fa-edit"></i></a> ';
                            var d = '<a class="btn btn-warning btn-sm" href="#" title="删除"  mce_href="#" οnclick="remove(\''
                                + row.id
                                + '\')"><i class="fa fa-remove"></i></a> ';
                            var f = '<a class="btn btn-success btn-sm" href="#" title="开启"  mce_href="#" οnclick="resetPwd(\''
                                + row.id
                                + '\')"><i class="fa fa-key"></i></a> ';
                            return e + d;
                        }
                    }]
            });
俺叫啥好嘞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table的使用
浪里xiao白龙
05-31 1555
最近在做毕业设计，需要在前台把后台的数据用表格显示出来，发现一款表格组件神器–Bootstrap Table, 这次记录下来，方便以后使用。 1.第一种 只是用到table标签 注意：data-url的路径和data-method是controller层的@PostMapping <table id="mytable" data-toggle="table" data-...
Bootstrap table简单使用总结
08-31
通过JavaScript初始化Bootstrap Table，调用`bootstrapTable`方法，并传入配置对象。配置对象可以包含`url`（数据源）、`search`（搜索功能）、`pagination`（分页）等选项。`icons`属性可以自定义工具栏图标，而`...
bootstrap table使用总结
最新发布
weixin_43704154的博客
05-21 1803
使用服务器端处理时，bootstrap-table的默认操作模式是简单地丢弃表中当前存在的任何数据，并向服务器发出请求以获取要显示的第一页数据。因此，您可以使用data-defer-url而不是data-url来指示bootstrap-table不发出初始请求，而是使用页面上已有的数据。依赖：tablednd v0.9，如果你想要你可以包含bootstrap-table-reorder-rows.css文件来使用默认的。1，$ 100，$ 2，$ 20而不是$ 1，$ 2，$ 20，$ 100。
使用 BootstrapTable 实现数据的分页显示（一）
热门推荐
稚枭天卓
10-08 1万+
使用 json 实现数据表格的分页显示。 方法一，使用 json 格式的数据，实现分页显示。 Dashboard | Nadhif - Responsive Admin Template 已添加教师账号
bootstrap table的使用
qq_37580539的博客
07-23 205
第一步: 引用bootstrap table需要的组件 <script src="~/Scripts/bootstrap.js"></script> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap-table.js...
BootstrapTable简单的使用
FeiSir_PC的博客
03-24 6748
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 本篇文章介绍bootstrap-table的简单的使用（查询，新增，修改，删除），在看之前，需要有一点点bootstrap的基础知识，很多bootstrap的相关知识点就不介绍了，只讲bootstrap-table的相关内容。bootstrap-table 的使用非常简单，只需要像引用JQuery一样将js文件以
Bootstrap Table的使用总结
09-01
$('#myTable').bootstrapTable({ url: 'getData', // 数据源 URL columns: [ // 表头定义 {field: 'id', title: 'ID'}, {field: 'name', title: 'Name'}, {field: 'price', title: 'Price'} ], pagination: ...
Bootstrap table使用方法总结
08-30
JS 构造方式是使用 `bootstrapTable` 方法来初始化表格，并传入配置选项来定制表格的行为。 服务器分页和客户端分页 Bootstrap Table 支持服务器分页和客户端分页两种分页方式。服务器分页是将分页逻辑交给服务器...
Bootstrap Table使用整理（四）之工具栏
08-30
此外，还可以通过调用 `bootstrapTable('refresh')` 方法手动刷新表格，可选地传递一个对象来设置刷新时的参数。 ```javascript $('#heartBtn').click(function () { $table1.bootstrapTable('refresh'); // 简单...
Bootstrap table使用方法汇总
11-29
$('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', // 请求后台的URL method: 'post', // 请求方式 toolbar: '#toolbar', // 工具按钮用哪个容器 striped: true, // 是否显示行间隔色 cache...
Bootstrap Table使用整理(一)
12-01
相关阅读： Bootstrap Table使用整理(二)  //www.jb51.net/article/115791.htm Bootstrap Table使用整理（三）  //www.jb51.net/article/115795.htm Bootstrap Table使用整理（四）之工具栏 //www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 //www.jb51.net/article/115785.htm 一、Bootstrap Table相关整理 基于 Bootstrap 的 jQuery 表格插件，通过简单
bootstrapTable使用示例.rar
04-14
bootstrapTable组件的使用示例，里面包含父子表、treegrid以及结合knockoutjs的使用示例。博客园博主本人资源，有问题可以联系。
JS组件Bootstrap Table使用方法详解
04-27
JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签： Bootstrap Table 最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面) b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备 采用a方案，需要设计一套界面，并且要得重新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案 一、效果展示 二、BootStrap table简单介绍 bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"> <!--js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] 2、table数据填充 bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy ... ... [xhtml] view plain copy $('#table').bootstrapTable({ url: 'data.json' }); 第二种方式交第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。 [js] view plain copy $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的URL（*） method: 'post', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 50, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识，一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ field: 'id', title: '序号' }, { field: 'liushuiid', title: '交易编号' }, { field: 'orderid', title: '订单号' }, { field: 'receivetime', title: '交易时间' }, { field: 'price', title: '金额' }, { field: 'coin_credit', title: '投入硬币' }, { field: 'bill_credit', title: '投入纸币' }, { field: 'changes', title: '找零' }, { field: 'tradetype', title: '交易类型' },{ field: 'goodmachineid', title: '货机号' },{ field: 'inneridname', title: '货道号' },{ field: 'goodsName', title: '商品名称' }, { field: 'changestatus', title: '支付' },{ field: 'sendstatus', title: '出货' },] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; }; field字段必须与服务器端返回的字段对应才会显示出数据。 3、后台获取数据 a、servlet获取数据 [js] view plain copy BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//通过此方法获取前端数据 ... b、springMvc Controller里面对应的方法获取数据 [js] view plain copy public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype) { ... } 4、分页(遇到问题最多的) 使用分页，server端返回的数据必须包括rows和total，代码如下： [js] view plain copy ...gblst = SqlADO.getTradeList(sql,pageindex,maxrows); JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i<len;i++) { TradeBean tb = gblst.get(i); if(tb==null) { continue; } jo=new JSONObject(); jo.put("id", i+1); jo.put("liushuiid", tb.getLiushuiid()); jo.put("price", String.format("%1.2f",tb.getPrice()/100.0)); jo.put("mobilephone", tb.getMobilephone()); jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime())); jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]); jo.put("changestatus", (tb.getChangestatus()!=0)?"成功":"失败"); jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失败"); jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0)); jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0)); jo.put("goodroadid", tb.getGoodroadid()); jo.put("SmsContent", tb.getSmsContent()); jo.put("orderid", tb.getOrderid()); jo.put("goodsName", tb.getGoodsName()); jo.put("inneridname", tb.getInneridname()); jo.put("xmlstr", tb.getXmlstr()); jsonData.add(jo); } int TotalCount=SqlADO.getTradeRowsCount(sql); JSONObject jsonObject=new JSONObject(); jsonObject.put("rows", jsonData);//JSONArray jsonObject.put("total",TotalCount);//总记录数 out.print(jsonObject.toString()); ... 5、分页界面内容介绍 前端获取分页数据，代码如下： [js] view plain copy ...oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //第几条记录 offset: params.offset, //显示一页多少记录 sdate: $("#stratTime").val(), }; return temp; };... 后端获取分页数据,代码如下： [js] view plain copy ...int pageindex=0; int offset = ToolBox.filterInt(json1.getString("offset")); int limit = ToolBox.filterInt(json1.getString("limit")); if(offset !=0){ pageindex = offset/limit; } pageindex+= 1;//第几页... 以上就是为大家分享的Bootstrap Table使用方法，希望对大家熟练掌握Bootstrap Table使用方法有所帮助。 转自：http://www.jb51.net/article/79033.htm
JS表格组件神器bootstrap table使用指南详解
10-20
主要为大家详细介绍了JS表格组件神器bootstrap table使用指南，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap-table案例
05-05
该资源暂时只有查询功能，增删改未添加，相关文章：http://blog.csdn.net/sutongxuevip/article/details/56485113
bootstrap中table的使用
weixin_43487532的博客
07-24 3467
bootstrap、java实现数据表单展示
bootstrap-table的使用
abcwanglinyong的博客
04-18 1034
一、背景 使用bootstrap框架进行页面编写的时候发现其组件中没有表格，网上查找发现有一个插件bootstrap-table，但是使用教程有些繁杂，走了一点弯路，希望写下此篇博客，让需要的人可以直接使用，避免采坑。 二、使用 bootstrap-table的使用包含客户端和服务端的使用，我这里主要说服务端的使用，因为一般数据都是从后台动态加载的。 在说如何使用之前先上一张图，看看达到的...
bootstrap之bootstrapTable的基本使用
wangchaohpu的博客
08-10 953
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrapTable</title> <script type="text/javascript" src="../../libs/jquery/j...
bootstrap-table重载_Bootstrap Table的使用总结
05-31
除此之外，我还给你提供一些 Bootstrap Table 的使用总结： 1. Bootstrap Table 支持通过 `data` 属性或 `ajax` 属性设置数据源； 2. 可以通过 `columns` 属性设置表格列； 3. 支持表格排序、分页、搜索、过滤等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值