Maison > Article > interface Web > Contrôle de table implémenté par tbl.js div, entièrement gratuit et ne repose pas sur jquery
Contrôle de table implémenté par tbl.js div, entièrement gratuit et ne repose pas sur jquery
- PHPzoriginal
- 2017-03-12 17:18:222214parcourir
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"]]});
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"]]);
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"]]);
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 });
É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 });
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!