Résumé de l'utilisation de la table Bootstrap

Cet article résume principalement l'utilisation simple de la table Bootstrap pour tout le monde, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

[Recommandations vidéo associées : Tutoriel Bootstrap]

bootstrap-table est écrit sur la base de bootstrap-table et est spécialement utilisé pour Table plugin pour afficher les données. Bootstrap vient de Twitter et est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS et JAVASCRIPT et présente les avantages de la simplicité, de la flexibilité et d'un développement frontal rapide. Je ne décrirai pas le bootstrap et le bootstrap ici. Cet article se concentrera sur l'explication d'une partie de ma compréhension de l'utilisation de bootstrap-table dans mon projet et sur la façon de l'apprendre.

Tout d’abord, expliquons la relation entre jquery, bootstrap et bootstrap-table. De nombreuses parties du code bootstrap impliquent jquery, ce qui signifie que bootstrap repose sur jquery, et la table bootstrap que nous voulons utiliser est créée sur la base de bootstrap, donc avant d'utiliser bootstrap-table, vous devez référencer jquery et bootstrap js, fichiers css.

Ensuite, les caractéristiques de bootstrap-table : Comparé à jquery-ui, jqgrid et d'autres plug-ins d'affichage de table, bootstrap-table est plat et léger, il est plus que suffisant pour un affichage de données léger. et la prise en charge des tables parent-enfant, etc. est également très bonne. Le plus important est qu'elle peut être combinée de manière transparente avec d'autres balises bootstrap.

1. Introduisez js et css

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2. Remplissage des données de la table

Il existe deux façons d'obtenir des données dans la table bootStrap. attribut de la table Spécifiez la source de données. La deuxième méthode consiste à spécifier l'url lors de l'initialisation de la table via JavaScript pour obtenir les données. Deux façons de remplir les données du tableau.

<table data-toggle="table">
 <thead>
 ...
 </thead>
</table>
 ...

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

Le champ champ doit correspondre au champ renvoyé par le serveur pour afficher les données.

3. Obtenez des données en arrière-plan

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

a. Obtenez des données avec le servlet

b. Obtenez des données avec la méthode correspondante dans springMvc Controller

Recommandations associées :

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

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

Comment implémenter le tri par glisser-déplacer de la souris dans un tableau HTML

JS pour implémenter un en-tête de tableau fixe et un défilement horizontal du en-tête de table et défilement

le serveur de table bootstrap gère le partage d'instance de pagination

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!