Explication sur l'utilisation de plug-ins dans bootstraptable pour implémenter des opérations de requête, de pagination et de tri de table

Cet article présente principalement l'utilisation du plug-in bootstraptable pour implémenter les opérations de requête, de pagination et de tri des enregistrements de table. Les amis dans le besoin peuvent se référer au Tutoriel Bootstrap.

Dans le développement de systèmes d'entreprise, les requêtes, la pagination, le tri et autres traitements des enregistrements de table sont très courants. Dans le développement Web, de nombreux plug-ins puissants peuvent être utilisés pour répondre aux exigences et sont extrêmement efficaces. Améliore considérablement l'efficacité du développement, cet essai présente bootstrap-table, qui est un plug-in de table open source très célèbre et largement utilisé dans de nombreux projets. Le plug-in Bootstrap-table fournit un ensemble très riche de propriétés, qui peuvent implémenter des requêtes, des paginations, des tris, des cases à cocher, la configuration des colonnes d'affichage, la vue Carte, l'affichage de tables maître-esclave, la fusion de colonnes, le traitement d'internationalisation et d'autres fonctions de traitement. et le plug-in En même temps, il fournit également de bonnes fonctions d'extension, telles que le déplacement des lignes, le déplacement des positions des colonnes et d'autres fonctions spéciales. Le plug-in peut être défini à l'aide de l'identifiant d'attribut data-* basé sur HTML5, ou. il peut être configuré en utilisant Javascript, ce qui est très pratique. Cet essai présente l'application du plug-in bootstrap-table dans mon projet actuel et résume l'expérience dans la gestion des problèmes rencontrés lors d'une utilisation associée.

1. Introduction aux ressources et à l'utilisation de Bootstrap-table

Bootstrap-Table a deux façons d'afficher les données dans la table, l'une est le mode client, l'autre est le serveur. mode.

Le mode dit client fait référence au chargement simultané des données à afficher dans le tableau sur le serveur, puis à leur conversion au format JSON et à leur transmission à l'interface à afficher. est relativement simple. Il s'agit de charger les données en une seule fois et de les placer sur l'interface, puis de générer automatiquement une pagination en fonction du nombre d'enregistrements par page que vous avez défini. Lorsque vous cliquez sur la deuxième page, les données seront automatiquement chargées et plus aucune requête ne sera envoyée au serveur. Dans le même temps, les utilisateurs peuvent utiliser leur propre fonction de recherche pour effectuer une recherche complète des données. Cette méthode peut être utilisée lorsque la quantité de données est faible.

Le mode dit serveur fait référence à l'envoi de données au serveur pour une requête en fonction du nombre défini d'enregistrements par page et du numéro de page actuel à afficher, puis à leur affichage dans le tableau. Cette méthode peut charger dynamiquement des données en fonction des besoins de l'utilisateur, économisant ainsi les ressources du serveur, mais elle ne peut pas utiliser sa propre fonction de recherche de données complète.

Bootstrap-table est un plug-in développé sur la base de Boosttrap, donc lorsque vous l'utilisez, vous devez introduire des scripts et des styles Bootstrap.

Si les fichiers pertinents ne sont pas introduits dans notre projet, vous devez introduire ces fichiers de style et de script, comme indiqué ci-dessous.

<link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

Cependant, le contenu ci-dessus doit être disponible lorsque nous développons le projet, nous nous concentrons donc toujours sur les fichiers d'importation requis pour utiliser ce plug-in.

Introduction au fichier CSS

<link rel="stylesheet" href="bootstrap-table.css" rel="external nofollow" >

Introduction au fichier script

<script src="bootstrap-table.js"></script>
<--汉化文件，放在 bootstrap-table.js 后面-->
<script src="bootstrap-table-zh-CN.js"></script>

De manière générale, si nous développons un système basé sur MVC, les codes CSS et JS sont C'est initialisé dans BundleConfig.cs, comme indiqué ci-dessous

L'utilisation de bootstrap-table dans la page peut être divisée en deux types L'un est purement écrit en HTML5, et chaque paramètre est spécifié via data-*. deux types de paramètres d'attribut, et l'un est la méthode HTML+JS pour obtenir des paramètres flexibles.

Si on initialise le code HTML à l'aide du logo HTML5, il s'agit du code suivant.

<table data-toggle="table" data-url="data1.json">
 <thead>
  <tr>
   <th data-field="id">Item ID</th>
   <th data-field="name">Item Name</th>
   <th data-field="price">Item Price</th>
  </tr>
 </thead>
</table>

Si nous utilisons du code JS pour initialiser le plug-in de table, il nous suffit de déclarer un objet table en HTML, comme indiqué dans le code suivant.

<table id="table"></table>

Ensuite, l'initialisation simple du code JS est la suivante

$('#table').bootstrapTable({
 url: 'data1.json',
 columns: [{
  field: 'id',
  title: 'Item ID'
 }, {
  field: 'name',
  title: 'Item Name'
 }, {
  field: 'price',
  title: 'Item Price'
 }, ]
});

Cependant, en fait, la fonction de configuration JS que nous utilisons bootstrap-table est certainement beaucoup plus compliquée que cela. L'effet d'interface suivant est l'affichage réel des données du tableau.

2. Utilisation détaillée de la table bootstrap

1) L'intégralité de la configuration de l'attribut JS

est dans Dans l'image ci-dessus, nous utilisons JS pour initialiser le contenu de la table. Le code JS est le suivant

 var $table;
  //初始化bootstrap-table的内容
  function InitMainTable () {
   //记录页面bootstrap-table全局变量$table，方便应用
   var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
   $table = $('#grid').bootstrapTable({
    url: queryUrl,      //请求后台的URL（*）
    method: 'GET',      //请求方式（*）
    //toolbar: '#toolbar',    //工具按钮用哪个容器
    striped: true,      //是否显示行间隔色
    cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,     //是否显示分页（*）
    sortable: true,      //是否启用排序
    sortOrder: "asc",     //排序方式
    sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1,      //初始化加载第一页，默认第一页,并记录
    pageSize: rows,      //每页的记录行数（*）
    pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
    search: false,      //是否显示表格搜索
    strictSearch: true,
    showColumns: true,     //是否显示所有的列（选择显示的列）
    showRefresh: true,     //是否显示刷新按钮
    minimumCountColumns: 2,    //最少允许的列数
    clickToSelect: true,    //是否启用点击选中行
    //height: 500,      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: "ID",      //每一行的唯一标识，一般为主键列
    showToggle: true,     //是否显示详细视图和列表视图的切换按钮
    cardView: false,     //是否显示详细视图
    detailView: false,     //是否显示父子表
    //得到查询的参数
    queryParams : function (params) {
     //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
     var temp = { 
      rows: params.limit,       //页面大小
      page: (params.offset / params.limit) + 1, //页码
      sort: params.sort,  //排序列名 
      sortOrder: params.order //排位命令（desc，asc） 
     };
     return temp;
    },
    columns: [{
     checkbox: true, 
     visible: true     //是否显示复选框 
    }, {
     field: 'Name',
     title: '姓名',
     sortable: true
    }, {
     field: 'Mobile',
     title: '手机',
     sortable: true
    }, {
     field: 'Email',
     title: '邮箱',
     sortable: true,
     formatter: emailFormatter
    }, {
     field: 'Homepage',
     title: '主页',
     formatter: linkFormatter
    }, {
     field: 'Hobby',
     title: '兴趣爱好'
    }, {
     field: 'Gender',
     title: '性别',
     sortable: true
    }, {
     field: 'Age',
     title: '年龄'
    }, {
     field: 'BirthDate',
     title: '出生日期',
     formatter: dateFormatter
    }, {
     field: 'Height',
     title: '身高'
    }, {
     field: 'Note',
     title: '备注'
    }, {
     field:'ID',
     title: '操作',
     width: 120,
     align: 'center',
     valign: 'middle',
     formatter: actionFormatter
    }, ],
    onLoadSuccess: function () {
    },
    onLoadError: function () {
     showTips("数据加载失败！");
    },
    onDblClickRow: function (row, $element) {
     var id = row.ID;
     EditViewById(id, 'view');
    },
   });
  };

Les propriétés de configuration du code JS ci-dessus sont essentiellement commentées, ce qui est relativement facile à comprendre.

2) Requête et pagination

La pagination des données de la table ici utilise la pagination du serveur. Les enregistrements de données sont renvoyés par le serveur en fonction des conditions de recherche et la méthode de tri est utilisée ici. Les paramètres sont les paramètres soumis au serveur.

 //得到查询的参数
    queryParams : function (params) {
     //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
     var temp = { 
      rows: params.limit,       //页面大小
      page: (params.offset / params.limit) + 1, //页码
      sort: params.sort,  //排序列名 
      sortOrder: params.order //排位命令（desc，asc） 
     };
     return temp;
    },

De plus, nous voyons que l'interface d'adresse URL pour renvoyer les données est FindWithPager. Voyons comment cette méthode de contrôleur MVC gère le retour des données.

/// <summary>
  /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
  /// </summary>
  /// <returns>指定对象的集合</returns>
  public override ActionResult FindWithPager()
  {
   //检查用户是否有权限，否则抛出MyDenyAccessException异常
   base.CheckAuthorized(AuthorizeKey.ListKey);

   string where = GetPagerCondition();
   PagerInfo pagerInfo = GetPagerInfo();
   var sort = GetSortOrder();

   List<TestUserInfo> list = null;
   if (sort != null && !string.IsNullOrEmpty(sort.SortName))
   {
    list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
   }
   else
   {
    list = baseBLL.FindWithPager(where, pagerInfo);
   } 

   //Json格式的要求{total:22,rows:{}}
   //构造成Json的格式传递
   var result = new { total = pagerInfo.RecordCount, rows = list };
   return ToJsonContent(result);
  }

Le code ci-dessus traite deux parties des informations sur les objets, l'une concerne les informations de classe d'entité de pagination et l'autre trie les informations, puis obtient des enregistrements en fonction de ces conditions et renvoie quelque chose comme
{total :22,rows :{}}

Enregistrement de données JSON au format.                                                                                                          

 /// <summary>
  /// 获取排序的信息
  /// </summary>
  /// <returns></returns>
  protected SortInfo GetSortOrder()
  {
   var name = Request["sort"];
   var order = Request["sortOrder"];
   return new SortInfo(name, order);
  }

最后就是具体实现具体条件、具体页码、具体排序条件下的数据记录了，这部分可以根据自己的要求实现逻辑，这里只是给出一个封装好的处理调用即可。

baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);

实际情况下，我们列表的展示，一般需要使用不同的条件进行数据的查询的，虽然这个Bootstrap-table控件提供了一个默认的查询按钮，不过一般是在客户端分页的情况下使用，而且略显简单，我们一般使用自己查询条件进行处理，如下界面所示。

或者如下的

那么这样对于上面的js属性就需要调整下接受查询条件参数queryParams 了            

 //得到查询的参数
    queryParams : function (params) {
     //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
     var temp = { 
      rows: params.limit,       //页面大小
      page: (params.offset / params.limit) + 1, //页码
      sort: params.sort,  //排序列名 
      sortOrder: params.order //排位命令（desc，asc） 
     };
     return temp;
    },

对于自定义查询条件，我们可以用下面的常规方式增加参数，如下所示

但是查询条件的参数我们不方便一一设置，我们想通过一种较为快捷的方式来处理，那么就需要对这个处理方式进行一个特别的修改了，首先添加一个扩展函数来处理表单的条件

 //自定义函数处理queryParams的批量增加
  $.fn.serializeJsonObject = function () {
   var json = {};
   var form = this.serializeArray();
   $.each(form, function () {
    if (json[this.name]) {
     if (!json[this.name].push) {
      json[this.name] = [json[this.name]];
     }
     json[this.name].push();
    } else {
     json[this.name] = this.value || '';
    }
   });
   return json;
  }

然后我们就可以批量处理表单的查询条件了        

 queryParams : function (params) {
     //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
     var temp = $("#ffSearch").serializeJsonObject();
     temp["rows"] = params.limit;      //页面大小
     temp["page"] = (params.offset / params.limit) + 1; //页码
     temp["sort"] = params.sort;       //排序列名
     temp["sortOrder"] = params.order;     //排位命令（desc，asc） 

     //特殊格式的条件处理
     temp["WHC_Age"] = $("#WHC_Age").val() + "~" + $("#WHC_Age2").val();
     temp["WHC_BirthDate"] = $("#WHC_BirthDate").val() + "~" + $("#WHC_BirthDate2").val();

     return temp;
    },

然后后端统一按照逻辑处理查询参数即可。

3）格式化输出函数及其他

对于上面JS的配置信息，我们再来回顾一下，例如对于数据转义函数，可以格式化输出的内容的，如下界面代码。

格式化的数据转义函数如下，主要就是根据内容进行格式化输出的JS函数，好像是需要放在一个文件内。

 //连接字段格式化
  function linkFormatter(value, row, index) {    
   return "<a href=&#39;" + value + "&#39; title=&#39;单击打开连接&#39; target=&#39;_blank&#39;>" + value + "</a>";
  }
  //Email字段格式化
  function emailFormatter(value, row, index) {
   return "<a href=&#39;mailto:" + value + "&#39; title=&#39;单击打开连接&#39;>" + value + "</a>";
  }
  //性别字段格式化
  function sexFormatter(value) {
   if (value == "女") { color = &#39;Red&#39;; }
   else if (value == "男") { color = &#39;Green&#39;; }
   else { color = &#39;Yellow&#39;; }

   return &#39;<p style="color: &#39; + color + &#39;">&#39; + value + &#39;</p>&#39;;
  }

另外，我们看到行记录的最后增加了几个操作按钮，方便对当前记录的查看、编辑和删除操作，如下效果图所示。

这部分我们也是通过格式化函数进行处理的

 //操作栏的格式化
  function actionFormatter(value, row, index) {
   var id = value;
   var result = "";
   result += "<a href=&#39;javascript:;&#39; class=&#39;btn btn-xs green&#39; onclick=\"EditViewById(&#39;" + id + "&#39;, view=&#39;view&#39;)\" title=&#39;查看&#39;><span class=&#39;glyphicon glyphicon-search&#39;></span></a>";
   result += "<a href=&#39;javascript:;&#39; class=&#39;btn btn-xs blue&#39; onclick=\"EditViewById(&#39;" + id + "&#39;)\" title=&#39;编辑&#39;><span class=&#39;glyphicon glyphicon-pencil&#39;></span></a>";
   result += "<a href=&#39;javascript:;&#39; class=&#39;btn btn-xs red&#39; onclick=\"DeleteByIds(&#39;" + id + "&#39;)\" title=&#39;删除&#39;><span class=&#39;glyphicon glyphicon-remove&#39;></span></a>";
   return result;
  }

 

如果我们需要双击弹出编辑界面的层，我们可以处理表格的双击事件，如下代码所示。

      onDblClickRow: function (row, $element) {
          var id = row.ID;
          EditViewById(id, 'view');
        },

如果我们需要设置行的不同的样式展示，可以通过增加rowStyle的JS处理函数即可，如下代码所示

       rowStyle: function (row, index) { //设置行的特殊样式
          //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
          var strclass = "";
          if (index == 0) {
            strclass = "warning";
          }
          return { classes: strclass }
        }

 对于表格记录的获取，我们可以通过下面的代码进行获取：$table.bootstrapTable('getSelections')

      var rows = $table.bootstrapTable('getSelections');
      if (rows.length > 0) {
        ID = rows[0].ID;
      }

如果是多条记录的处理，例如删除记录

    //实现删除数据的方法
    function Delete() {
      var ids = "";//得到用户选择的数据的ID
      var rows = $table.bootstrapTable('getSelections');
      for (var i = 0; i < rows.length; i++) {
        ids += rows[i].ID + &#39;,&#39;;
      }
      ids = ids.substring(0, ids.length - 1);
      DeleteByIds(ids);
    }

如果需要设置显示列显示，如下界面所示

以及排序处理

这些需要在JS代码开启相关的属性即可。

还有就是一种CardView的卡片视图格式，如下所示。

另外一种是父子表的展开明细的格式，如下所示

 以上就是bootstrap-table插件在我实际项目中的应用情况，基本上对JS各个属性的使用进行了一些介绍了，具体的应用我们可以参考它的文档，获取对应属性、方法、事件的详细说明，这样我们就可以更加详细的应用这个插件的各种功能了。

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!