Detailed explanation of JS table component artifact bootstrap table (enhanced version)

高洛峰
Release: 2017-01-04 11:52:17
Original
1864 people have browsed it

1. Introduction of Bootstrap Table

Regarding the introduction of Bootstrap Table, there are generally two methods:

1. Directly download the source code and add it to the project.
Since Bootstrap Table is a component of Bootstrap, it depends on Bootstrap. We first need to add a reference to Bootstrap.

2. Use our magical Nuget
Open Nuget and search for these two packages

JS表格组件神器bootstrap table详解(强化版)

Bootstrap is already the latest 3.3.5, we Just install it directly.

JS表格组件神器bootstrap table详解(强化版)

The version of Bootstrap Table is actually 0.4, which is too cheating. Therefore, the blogger suggests that the Bootstrap Table package should be downloaded directly from the source code. The latest version of Bootstrap Table seems to be 1.9.0.

Introduction to the background of this article:

Recently, customers have put forward demands and want to optimize the original management system so that it can be displayed well through mobile phones. Two solutions come to mind:

a Plan: Keep the original page and design a new page suitable for mobile phones. When accessed by mobile phone, enter m.zhy.com (mobile page). When accessed by PC device, enter www.zhy.com (pc page). )

b plan: Use bootstrap framework to replace the original page and automatically adapt to mobile phones, tablets, and PC devices

Using plan a, you need to design an interface and rewrite the appropriate page Interface, considering time and cost issues, the project adopted plan b

2. Effect display

JS表格组件神器bootstrap table详解(强化版)

2. Brief introduction to BootStrap table

bootStrap table is a lightweight table plug-in that uses AJAX to obtain data in JSON format. Its paging and data filling are very convenient and supports internationalization.

3. How to use

1. Introducing js and css

       
Copy after login

2. Table data filling

bootStrap table has two ways to obtain data. One is to specify the data source through the data-url attribute of the table; the other is Specify the url to obtain the data when initializing the table through JavaScript

 ... 
...
Copy after login
$('#table').bootstrapTable({ url: 'data.json' });
Copy after login

The second method is more flexible than the first method when processing complex data. The second method is generally used to fill the table data.

$(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; };
Copy after login

The field field must correspond to the field returned by the server to display the data.

3. Obtaining data from the background

a. Obtaining data from servlet

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");//通过此方法获取前端数据 ...
Copy after login

b. Obtaining data through the corresponding method in springMvc Controller

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype) { ... }
Copy after login

4. Paging ( The most encountered problems)

When using paging, the data returned by the server must include rows and total. The code is as follows:

...
gblst = SqlADO.getTradeList(sql,pageindex,maxrows); JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i...
Copy after login

5. Introduction to the content of the paging interface

Front-end acquisition Paging data, the code is as follows:

...
oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //第几条记录 offset: params.offset, //显示一页多少记录 sdate: $("#stratTime").val(), }; return temp; };
...
Copy after login

The backend gets the paging data, the code is as follows:

...
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;//第几页
...
Copy after login

The above is the entire content of this article, I hope it can Help everyone better learn the JS table component artifact bootstrap table.

For more detailed explanations of the JS table component artifact bootstrap table (enhanced version), please pay attention to the PHP Chinese website!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!