Maison > interface Web > tutoriel HTML > le corps du texte

Contrôle de table implémenté par tbl.js div, entièrement gratuit et ne repose pas sur jquery

PHPz
Libérer: 2017-03-12 17:18:22
original
2216 Les gens l'ont consulté

Il existe maintenant un TableContrôle relativement facile à utiliser en HTML, qui peut être datatable, mais l'édition, les boutons et d'autres parties sont payants, et seules les fonctions de base sont gratuites. De plus, lorsque la taille change, cela nécessite un rafraîchissement manuel et d’autres opérations fastidieuses. J’en ai donc développé un gratuit que tout le monde peut utiliser.

Ce projet a été utilisé dans le "Void Service Server Development Kit". Actuellement, il prend principalement en charge le navigateur Microsoft Edge, Chrnavigateur ome, autresnon testés.

tbl.js est entièrement gratuit et peut être modifié à volonté Bienvenue fork.

tbl.js prend en charge le style de liste, l'ajout, la suppression, la modification, la requête, la table complète la recherche, le le regroupement, la fonction de pagination, la table complète édition, édition de lignes complètes, sélection unique, sélection multiple, personnalisation du style.

peut être intégré dans divers conteneurs, tels que des boîtes de dialogue et des onglets de jquery.

Version : 0.1beta

Signaler un bug et je le corrigerai dans les plus brefs délais. Il n'y a pas de répit au Nouvel An.

Si vous n'avez pas besoin de modifier le style, vous n'avez pas besoin de charger tbl.css, tbl.js chargera dynamiquement la feuille de style.

Créons une table à deux lignes, construite à partir d'un nœud DOM existant.


1 html:<html><body><p></p></body></html>
2 new tbl(document.body.children[0],{data:[["row1"],["row2"]]});
Copier après la connexion

Insérez le nœud DOM auto-créé dans le corps du document.


1 var tb = new tbl();
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1"],["row2"]]);
Copier après la connexion

Pour les tableaux comportant plusieurs champs, les largeurs de colonnes sont adaptatives à l'aide de pourcentages.


1 var tb = new tbl(undefined, {format:[{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"}]});
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1","data","data","data","data"],["row2","data","data","data","data"]]);
Copier après la connexion

Style de liste, hauteur maximale 300px, pas d'en-tête, pas de titre, pas de pied de page, 5 éléments de données, bouton, obtenir une ligne index.

Cette méthode provoquera des changements de couleur entrelacés, et le CSS pourra être modifié pour invalider le style.


1 html:<html><body><p></p></body></html>
2 var tb = new tbl(document.body.children[0], {
3 editable: false, maxheight: "300px", header: false, title: false, footer: false, data: [[1], [2, "remove"], ["nan - not a number", "del"], [4, "del"], [5, "del"]], page_size: 100,
4 format: [
5      { width: "90%", nancenter: true, input: {type:"text"}},
6      { width: "10%", editable:true, input: { type: "button", value:"del", onclick: function () { tb.delete(tb.get_related_rowid(this));}}}
7      ]
8 });
Copier après la connexion

Édition complète du tableau, sélection unique, une ligne doit être sélectionnée, pagination.

Nous initialisons d'abord une donnée. Les données liées par tbl.js doivent être un tableau.

Je m'attends à ce que la deuxième colonne ne soit modifiable en aucun cas.


 1 var tb_data = [];
 2 for (var i = 0; i < 106; i++) {
 3      tb_data[i] = [Math.random()>0.5?true:false, Math.random(), "1970-01-01", Math.floor(Math.random()*10), i, 0];
 4 }
 5 tb_data[i] = "this is group"; i++;
 6 tb_data[i] = ["this is text"]; i++;
 7 for (; i < 578; i++) {
 8      tb_data[i] = [i, Math.random(), "2017-02-01"];
 9 }
10 var tb = new tbl(document.body.children[0], {
11      editable:true,select:tbl.single,must_select:true,paging:true,data:tb_data,page_size:15,
12      format: [
13          { width: "5%", input: { type: "checkbox", check: "true" } },
14          { width: "30%", name:"name", uneditable:true },
15          { width: "20%", name:"date", input: { type: "date" } },
16          { width: "10%", name:"select", input: {type:"select", options:[0,1,2,3,4,5,6,7,8,9]} },
17          { width: "20%" },
18          { width: "15%", input: {type:"radio", name:"only"}}
19      ]
20 });
Copier après la connexion

API :

L'ajout d'une ligne de données doit être un tableau. sera utilisé comme texte du titre du groupe.

insérer Insérer des données

lier lier une nouvelle source de données

supprimer Supprimerune ligne

clear Nettoyer

edit Modifier une ligne, un paramètre vide signifie modifier la table entière

select Sélectionner une ligne

cancel_edit Annuler la modification

Cancel_select Annuler la sélection

select_change select changefonctionparamètres

lecture seulepropriété :

tbl::sélectionne les lignes sélectionnées

tbl::data data

tbl::dom Noeud DOM

tbl::edits La ligne en cours d'édition, l'édition complète de la table n'est pas applicable

Construction options :

max_height est la hauteur maximale, si elle la dépasse, la barre de défilement sera affichée
page_size taille de la page
données d'initialisation des données
en-tête s'il faut afficher l'en-tête
pied de page s'il faut afficher le pied de page
info s'il faut afficher les informations
pagination s'il faut afficher la pagination
title_bar Afficher la barre de titre
titre Texte de la barre de titre
recherche Afficher le champ de recherche
modifiable Édition complète du tableau
sélectionnez le type de sélection : 0, ne peut pas être sélectionné. 1, sélection radio 2, multi-select.tbl.single == 1, tbl.multiselect == 2
select_change Définir la sélectionTraitement des événements Fonction
must_select Doit sélectionner un format de ligne
Format de colonne
width width, peut être une largeur HTML valide. Par exemple : 100px ou 20%.
input est utilisé pour modifier l'attribut du nœud d'entrée de status , qui est le même que l'attribut html/input
name nom du champ, affiché dans le tableau en-tête
la colonne non modifiable ne pourra pas être modifiée
les colonnes modifiables seront toujours dans un état modifiable
centre non numérique nancenter

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!