Dans l'article précédent, le résumé de l'expérience du framework de développement métronique de bootstrap est résumé le traitement du framework [i] et le traitement du module de menu, un résumé de base du framework de développement bootstrap, y compris l'effet d'interface global, ainsi que la disposition, les menus, etc. Cet article continue ce sujet et introduit le traitement de la pagination de données couramment utilisé.
Dans l'affichage de l'interface de données, l'affichage et la pagination des données tabulaires sont des opérations de traitement très courantes. L'utilisation de la disposition du style de bootstrap et du traitement des données AJAX de JQuery, l'affichage dynamique et la pagination des données peuvent être bien réalisés.
1. Liste d'affichage et de pagination Traitement 1) Réservez l'affichage des données
Dans de nombreuses pages, nous devons généralement répertorier et paginer des enregistrements de base de données.
La section suivante de la liste des arborescences à gauche est la zone générale d'affichage de requête de données à droite, qui est divisée en deux parties: contenu de requête et liste de données. Le contenu de requête est généralement placé sous forme de traitement. Lorsque l'utilisateur déclenche la requête, nous traitons l'événement et demandons les données correspondantes du contrôleur dans l'arrière-plan MVC pour le retourner à l'extrémité avant de la page, et afficher et paginez les données.
Comme indiqué dans le code de requête de la page de menu, les éléments suivants sont affichés.
<form id = "ffSearch"> <div> <div> <vabe> Nom d'affichage </ label> <div> <entrée name = "whc_name" type = "text"> </ div> </ div> </div> <v> <label id </ label> <div> <entre nom = "whc_functionid" Type = "Text"> </v> </v> </v> <label> Adresse de connexion Web </ Label> <div> <input name = "whc_url" type = "text"> </ div> </ div> </ div> <div> <div> <label> icône du menu Web </ label> <v> <entrée name = "whc_webicon" type = "text"> </v> </v> </v> </orm>
Dans le code JS de la page, nous traitons le traitement des données après l'initialisation de la page, comme indiqué dans le script suivant.
// Initialisation de la page $ (function () {initjStree (); // Initialisation Tree BindEvent (); // Binding Event Processing Search (CurrentPage); // Initialisation de la première page Data InitDicTitem (); // Informations sur le dictionnaire d'initialisation});Le code HTML pour afficher les données est illustré ci-dessous. Le contenu principal de l'en-tête de table est affiché et le contenu principal de la table Grid_Body est construit dynamiquement et affiché par les scripts.
<table id="grid" cellpadding="0" cellpacing="0"> <thead id="grid_head"> <tr> <th><input type="checkbox" onclick="selectAll(this)"></th> <th>Display name</th> <th>Sorting</th> <th>Function ID</th> <th>Menu visible</th> <th>Web connection address</th> <th>Web menu icône </ th> <th> Numéro système </ th> <th> Operation </ th> </tr> </thaid> <tbody id = "grid_body"> </fbody> </s table> <div> <ul id = 'grid_paging'> </ul> </div>
L'affichage de données est traité via la fonction de script de recherche une fois la page prête. Lors du traitement, passez d'abord les conditions du formulaire de numéro de série et les informations sur la condition de pagination dans le contrôleur MVC pour obtenir les données de liste correspondantes et liez-la dynamiquement sur l'interface pour terminer l'ensemble du processus de traitement. La capture d'écran de code spécifique est indiquée ci-dessous.
Et le code à l'intérieur
tr + = getActionHtml (item.id);
Ensuite, certains boutons de fonctionnement sont générés via des scripts, l'interface est la suivante.
2) Traitement de pagination de données
Les données affichées sur notre page ne sont généralement pas un enregistrement fixe, donc la pagination est également un traitement nécessaire, ce qui peut améliorer les performances et améliorer l'expérience conviviale. La pagination de données est traitée à l'aide du paginateur bootstrap de Bootstrap de Bootstrap. Ce contrôle est beaucoup utilisé et est un plugin de pagination très puissant.
Bootstrap Paginator Son adresse de code GitHub est: https://github.com/lyonlai/bootstrap-paginator
Ses exemples d'utilisation peuvent être introduits, veuillez vous référer à: http://lyonlai.github.io/bootstrap-paginator/
Lorsque vous utilisez ce contrôle, après avoir introduit des styles jQuery et bootstrap et des bibliothèques de classe, vous pouvez les ajouter et les utiliser via la ligne de code suivante.
<script src = "/ js / bootstrap-paginator.min.js"> </ script>
Cette pagination de contrôle peut être implémentée en manipulant des événements clicés par page et modifiés par page.
Pour afficher le contenu sur la page, nous ajoutons un div au code HTML et déclarons un élément UL avec ID Grid_paging. Le code est le suivant.
<div> <ul id = 'grid_paging'> </ul> </div>
Ensuite, le code de traitement JS spécifique est le suivant.
Dans l'arrière-plan de MVC, nous devons obtenir les conditions de pagination et former les conditions de données réalisées par l'utilisateur sur la page frontale, afin que nous puissions obtenir les données correspondantes en fonction de ces paramètres et les renvoyer au client.
Étant donné que ces traitements sont très courants, nous pouvons le mettre dans le contrôleur de classe de base pour le traitement. Si un traitement spécial est requis, réécrivez la fonction de pagination FinDithPager dans le contrôleur de sous-classe.
/// <summary> /// Interrogez la base de données en fonction des conditions et renvoyez la collecte d'objets (pour l'affichage de données de pagination) /// </summary> /// <retourne> spécifiez la collection de l'objet </peepings> public virtual ActionResult FindWithPager () {// Vérifiez si l'utilisateur a la permission, sinon lance un MydenyAccessException Except Base.CheckaThorized (autorise); String où = getPagerCondition (); PageRinfo pageRinfo = getPageRinfo (); List <T> list = Basebll.FindWithPager (où, pageRinfo); // Format JSON Exigences {Total: 22, lignes: {}} // Construisez le format de JSON pour passer var result = new {total = pageRinfo.recordCount, Rows = list}; Retour àjsonContentDate (résultat); }Parmi eux, GetPageRinfo est d'obtenir les paramètres de pagination transmis par l'utilisateur. Vous souvenez-vous encore des paramètres URL traités par la page frontale ci-dessus, comme indiqué ci-dessous.
url = "/ menu / findWithPager? Page =" + page + "& rows =" + lignes;
Le code d'implémentation de la fonction MVC GetPageRinfo spécifique est le suivant.
/// <summary> /// Obtenez des données d'objet de pagination en fonction des paramètres de demande /// </summary> /// <feewards> </ returns> PageRinfo virtuel protégé getPageRinfo () {int pageIndex = request ["page"] == null? 1: int.parse (demande ["page"]); int pagesize = request ["lignes"] == null? 10: int.parse (demande ["lignes"]); PageRinfo pageRinfo = new PageRinfo (); pageRinfo.CURRENETPAGEIDEX = PageIndex; pageRinfo.pagesize = pagesize; retour PageRinfo; }Ensuite, après avoir obtenu les conditions de forme et les conditions de pagination, la classe de logique métier transmise au cadre est suffisant. Il s'agit déjà de la catégorie de support au bas du cadre et ne continuera pas à se développer.
List <T> list = Basebll.FindWithPager (où, pageRinfo);
L'effet d'interface final est le suivant
2. Plugin Jtree
La section précédente améliore également l'affichage des listes d'arbres. En général, si les données sont hiérarchiques, l'affichage des listes d'arbres peut afficher intuitivement leur structure. Par conséquent, dans de nombreux cas, les listes d'arbres peuvent nous aider à afficher la classification des données.
Par exemple, pour les données de l'utilisateur, nous pouvons classer la structure ou le rôle organisationnelle de l'utilisateur, et ils peuvent être affichés visuellement via des listes d'arbres, de sorte que lorsque nous recherchons différents types de listes d'utilisateurs, il est facile à trouver.
Ou pour les données du dictionnaire ou les données de la province et de la ville, elles peuvent également être affichées via une liste d'arbres.
L'adresse officielle du contrôle Jtree est https://www.jstree.com/
Le site Web a déjà précisé les instructions et les explications de cas des contrôles JSTREE. D'une manière générale, nous pouvons les utiliser en faisant référence directement aux exemples.
Le code d'utilisation Jtree simple est le suivant
$ (function () {$ ('# jStree_demo_Div'). jStree ();});Pour les événements de JSTREE, nous pouvons généralement lier les événements via le code suivant.
$ ('# jStree_demo_div'). sur ("changé.jstree", fonction (e, data) {console.log (data.selected);});Pour JSTREE, nous utilisons généralement les données JSON pour se lier dynamiquement. La définition du format de données de ce JSON est la suivante.
{id: "String" // Parent requis: "String" // Texte requis: "String" // Icône de texte de nœud: "String" // String pour l'état personnalisé: {Open: Booléen // est le nœud ouvert désactivé: booléen // est le nœud désactivé Sélectionné attributs pour le nœud généré}De manière générale, nous utilisons le script suivant pour effacer et lier les données.
$ ('# jStree_demo_Div'). data ('jStree', false); // effacer les données, vous devez // lier les données JSON asynchrone $ .getjson (url, fonction (data) {$ ('# jStree_Demo_Div'). JSTEE ({{'Core': {'data': data, "themes": {"Responsive": false} {{'data': data, "themes": {"Responsive": false} "Data ': Data" }). bind ('chargé.jStree', chargedFunction);});Si nous devons fournir à l'utilisateur une case à cocher et définir l'état sélectionné de JSTREE, l'effet d'interface est le suivant.
Ensuite, la fonction d'initialisation générale doit être modifiée, comme le montre le code suivant
// Le code d'initialisation de JSTREE avec Checkbox $ .getjson (URL, fonction (données) {Control.jStree ({'Plugins': ["Checkbox"], // La boîte de sélection 'Checkbox': {Cascade: "", trois_state: false}, // non cascaded "Core ': {" data': "Data," Themes ": {" Response ": false} }). bind ('chargé.jstree', chargé de la finition);En combinant les deux, nous pouvons affiner davantage la liaison d'initialisation du contrôle JSTREE en une fonction publique JS bindjStree.
// Initialisez le contrôle JSTREE avec les données JSON spécifiées // Treename est le nom de la div arborescence, URL est l'adresse de source de données, la case à cocher est de savoir s'il faut afficher la case à cocher, ChargedFunction est la fonction de rappel chargée BindjStree (Treename, Url, Checkbox, chargé = arguments [2] || FAUX; // Définit la valeur par défaut de Checkbox sur false if (isCheck) {// Initialiser l'arborescence de la boîte à cocher $ .getjson (URL, fonction (data) {Control.jStree ({'Plugins': ["Checkbox"], // La boîte de sélection apparaît 'Checkbox': {Cascade: "", "Data:" Data: "net:" non cascaded 'coe "Responsive": false}}}). bind ('chargé.jstree', chargé de la finition);}); } else {// Initialisation de la liste d'arborescence ordinaire $ .getjson (url, fonction (data) {Control.jStree ({'core': {'data': data, "themes": {"Reactive": false}}}). }}Par conséquent, lorsque la page lie Jtree, le code peut être simplifié
// Initialisez la fonction de liste d'organisation initdeptreeView () {var arbreUrl = '/ user / getMydeptjStreejson? Userid = @ session ["userId"]'; bindjStree ("jStree_Div", TreeUrl); // Modifier le traitement des événements de la commande d'arbre $ ('# jStree_Div'). Sur ("changé.jStree", fonction (e, data) {var icon = data.node.icon; loshDatabyou (data.selected);}); }Pour une liste de cases à cocher, le code d'initialisation est le suivant.
// Initialisez tous les ensembles de fonctions de tous les utilisateurs var arbreUrl = '/ fonction / getroleFunctionjStreeByuser? UserId = @ session ["userId"]'; bindjstree ("arbre_function", arbreUrl, true); // Rôle les autorisations de données, initialisez tous les départements First TreeUrl = '/ User / GetMydeptJStreejson? UserId = @ session ["userId"]'; bindjstree ("arbre_roledata", arbreUrl, true);Pour les cases à cocher, nous initialisons généralement les données, puis définissons l'état sélectionné de la liste des arborescences selon les besoins. Cela ne nécessite pas d'initialisation fréquente de l'arbre, ce qui peut améliorer efficacement les performances et l'expérience de réponse.
Après avoir initialisé la liste des arbres, nous devons effacer les éléments de sélection, puis définir les éléments de sélection dont nous avons besoin. Le code spécifique est le suivant, faites attention au traitement des événements Uncheck_all et Check_Node.
// Initialisez le jeu de données de données de rôle (Organisation) Fonction initroledata (id) {if (id! = "") {Var treemenu = "arbre_roledata"; $ ('#' + treemenu) .jStree ("uncheck_all"); // décochez toutes les sélections // cochez le contenu spécifié $ .getjson ("/ roledata / getroledatalist? TreeMenu) .jStree ('Check_Node', item); // SELECT Node});}); }}Lors de l'enregistrement des données, nous obtenons la liste de sélection du nœud JSTREE, puis enregistrons les données. Le code spécifique est le suivant.
// Enregistrer la fonction d'autorisation des données de rôle Saveroledata (RoleID) {var exeList = $ ('# arbre_roledata'). JStree ('get_selected'); var url = '/ roledata / updatedata? r =' + math.random (); var postdata = {roleId: roleId, ouList: ouList.join (',')}; $ .post (url, postdata, fonction (json) {initroledata (roleId);}). error (function () {showtips ("vous n'êtes pas autorisé à utiliser cette fonction, veuillez contacter l'administrateur pour le gérer.");}); }D'accord, après tout, j'ai introduit l'affichage des données et la pagination de données régulières; JSTREE Binding, Traitement d'événements, stockage de données et autres opérations. J'espère obtenir votre soutien continu. Je continuerai à présenter les points clés impliqués dans le développement de bootstrap et l'utilisation de divers plug-ins afin de rendre l'apprentissage plus concret et pratique, et je peux nous fournir des références utiles à des projets de développement à prix réel.
Le contenu ci-dessus est le résumé de l'expérience du framework de développement métronique bootstrap basé sur le traitement de pagination de la liste Bootstrap [2] et l'utilisation du jtree, j'espère que cela sera utile à tout le monde. Je tiens à vous remercier pour votre soutien pour le site Web de Wulin.com. Je crois que nous ferons mieux!