Maison interface Web js tutoriel Comment faire fonctionner les tables dans Bootstrap

Comment faire fonctionner les tables dans Bootstrap

Apr 14, 2018 pm 04:39 PM
bootstrap table 怎么

Cette fois je vais vous montrer comment faire fonctionner les tables en Bootstrap et quelles sont les précautions pour les tables d'opération en Bootstrap. Voici des cas pratiques, jetons un coup d'oeil.

bootstrap-table est écrit sur la base de bootstrap-table et est un plug-in de table spécialement utilisé pour afficher des données. Et le bootstrap vient de Twitter est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS, 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 comment l'apprendre.

Tout d'abord, laissez-moi vous expliquer, jquery, bootstrap, bootstrap-table la relation entre les trois. De nombreuses parties du code bootstrap impliquent jquery, c'est-à-dire Bootstrap s'appuie sur jquery et la table d'amorçage que nous souhaitons utiliser est créée sur la base de bootstrap, donc avant d'utiliser bootstrap-table, vous devez référencer les fichiers js et css liés à jquery et bootstrap.

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, mais pour les tables parent-enfant, etc. Le support est également très bon, et le plus important est qu'il peut être combiné de manière transparente avec d'autres balises bootstrap.

1. Présentez 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>
Copier après la connexion

2. Remplissage des données du tableau

Il existe deux façons d'obtenir des données à partir de la table bootStrap. L'une consiste à spécifier la source de données via l'attribut data-url de la table. L'autre consiste à obtenir les données en spécifiant l'URL lors de l'initialisation de la table via JavaScript

<table data-toggle="table">
 <thead>
 ...
 </thead>
</table>
 ...
Copier après la connexion
$('#table').bootstrapTable({
 url: 'data.json'
 });
Copier après la connexion
La deuxième méthode est plus flexible que la première méthode dans le traitement de données complexes. La deuxième méthode est généralement utilisée pour remplir les données des tableaux.

$(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;
 };
Copier après la connexion
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

a. la servlet obtient des donné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");//通过此方法获取前端数据
 ...
Copier après la connexion
b. La méthode correspondante dans springMvc Controller pour obtenir des données

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype)
{
 ...
}
Copier après la connexion
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois !

Lecture recommandée :

JS implémente la conversion des millisecondes + jours + heures + minutes et secondes

Ce que font les modèles de carrousel bootstrap avez-vous? Vous pouvez utiliser


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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment introduire le bootstrap dans Eclipse Comment introduire le bootstrap dans Eclipse Apr 05, 2024 am 02:30 AM

Comment introduire le bootstrap dans Eclipse

Comment introduire une idée dans bootstrap Comment introduire une idée dans bootstrap Apr 05, 2024 am 02:33 AM

Comment introduire une idée dans bootstrap

Comment lire les résultats du test d'effet de médiation bootstrap dans stata Comment lire les résultats du test d'effet de médiation bootstrap dans stata Apr 05, 2024 am 01:48 AM

Comment lire les résultats du test d'effet de médiation bootstrap dans stata

750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième 750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième Apr 23, 2024 pm 03:28 PM

750 000 rounds de bataille en tête-à-tête entre grands modèles, GPT-4 a remporté le championnat et Llama 3 s'est classé cinquième

Comment lire les résultats du test de médiation bootstrap Comment lire les résultats du test de médiation bootstrap Apr 05, 2024 am 03:30 AM

Comment lire les résultats du test de médiation bootstrap

Comment utiliser bootstrap pour tester l'effet de la médiation Comment utiliser bootstrap pour tester l'effet de la médiation Apr 05, 2024 am 03:57 AM

Comment utiliser bootstrap pour tester l'effet de la médiation

Quelle est la différence entre bootstrap et springboot Quelle est la différence entre bootstrap et springboot Apr 05, 2024 am 04:00 AM

Quelle est la différence entre bootstrap et springboot

Comment exporter les résultats de la commande stata de l'effet de médiation du test d'amorçage Comment exporter les résultats de la commande stata de l'effet de médiation du test d'amorçage Apr 05, 2024 am 03:39 AM

Comment exporter les résultats de la commande stata de l'effet de médiation du test d'amorçage

See all articles