Maison > interface Web > Tutoriel Layui > le corps du texte

Introduction détaillée aux nouvelles 'Sélection multiple de dates' et 'Méthode de destruction' de layDate

Libérer: 2019-11-23 15:14:15
original
7783 Les gens l'ont consulté

Introduction détaillée aux nouvelles 'Sélection multiple de dates' et 'Méthode de destruction' de layDate

Certaines fonctions actuellement implémentées par laydate :

1 Prend en charge le rendu de plusieurs nœuds à la fois.

2. Prise en charge du rendu d'un nœud qui a été rendu.

3. Ajoutez l'attribut lay-data pour définir la configuration laydate du nœud actuel.

4. Implémentez la fonction de sélection rapide de l'heure. (quickSelect)

5. Cliquez sur le mois et l'année purs pour confirmer directement. (quickConfirm)

6. Sélection incomplète des heures, minutes et secondes. (simpleModel & format)

7. Sélection de la plage de temps fractionnée. (rangeType & range)

8. Ajout de la prise en charge de deux scénarios de sélection rapide. (range & quickSelect)

9. Ajout de la sélection du trimestre (type : 'quartier')

10. Ajout de la possibilité de définir la semaine n comme début de la semaine (weekStart)

.

11. Soutenez l'arrière-plan de cette marque sous forme de cercle (circleMark)

*Nouvellement ajouté

12. Sélection de date sélection multiple (multiple)

13. (laydatePro. destory)

Page de test : https://sun_zoro.gitee.io/laydatepro/testLaydate.html

Support multi-sélection de sélection de date :

La sélection multiple actuelle ne prend en charge que le type de date. Je pense personnellement qu'il ne devrait y avoir aucun cas d'utilisation pour d'autres types, notamment la sélection d'heure ou la date/heure, qui sont fondamentalement inutiles, et il sera encore plus difficile de travailler avec laydate. , car sélection de l'heure S'il y a trois colonnes de temps, minutes et secondes, vous devez faire plusieurs sélections, donc quelle forme et quel effet seront requis ~ Donc, actuellement, nous ne considérons que celles qui prennent en charge la date et ne prennent pas en charge la plage.

Premier effet :

Introduction détaillée aux nouvelles Sélection multiple de dates et Méthode de destruction de layDate

Idée d'implémentation :

1 Tout d'abord, ajoutez un paramètre (multiple) pour décider de sélectionner plusieurs fois. , bien sûr, cela ne fonctionne pas nécessairement si vous le configurez. Comme mentionné ci-dessus, il ne prend en charge que la sélection de dates hors plage, mais cela n'a pas d'importance si vous le configurez mal. Le plug-in a effectué un traitement interne. de sorte qu'il ne sera efficace que si les conditions sont remplies. S'il n'est pas rempli, il sera toujours à sélection unique.

2. La logique interne est relativement dispersée, en gros, plusieurs sélections sont détectées lors de initDate, les valeurs sont séparées par le séparateur configuré, puis la logique est légèrement modifiée lors du rendu, sinon la date par défaut de. la valeur sélectionnée est la même, mais délimitée en fonction de la plage de valeurs réelle.

Ensuite, ce qui est traité, c'est l'événement. Cliquez sur une date pour déclencher le choix interne. Il fait la distinction entre la multi-sélection et la multi-sélection selon qu'elle est sélectionnée ou non, puis la. la valeur est enregistrée. S'il s'agit d'une sélection unique, alors la logique reste la même qu'auparavant ; à la fin, l'analyse génère une chaîne de valeur basée sur l'instance laydate. S'il s'agit d'une sélection multiple, les valeurs sélectionnées sont triées et jointes. avec des délimiteurs pour lier les nœuds.

3. Utilisation :

Introduction détaillée aux nouvelles Sélection multiple de dates et Méthode de destruction de layDateEffet rectangulaire par défaut :

Introduction détaillée aux nouvelles Sélection multiple de dates et Méthode de destruction de layDate

Ajouter une petite fonction de destruction de laydate laydatePro. destroy('.laydate-test-area');

J'ai vu cette exigence deux ou trois fois récemment, principalement dans certaines occasions, par exemple lorsque vous devez changer le type de nœud qui a été rendu, ou il y en a. Ce qui est plus direct, c'est que vous ne voulez pas qu'il soit utilisé comme date de dépôt après le rendu, et vous voulez qu'il ne réapparaisse pas lorsque vous cliquez dessus, et ainsi de suite.

Tout d'abord, dans la situation précédente, vous devez modifier son type ou modifier certains de ses attributs. Si vous avez déjà lu mes autres articles sur laydatePro, sachez qu'actuellement, il n'y a aucun moyen pour cela. laydate soit si facile à recharger comme une table, alors j'ai pensé à détruire l'original et à le restituer.

Mais il est plus facile de comprendre les points clés. Une autre forme de destruction consiste à régénérer le nœud. L'effet final est que l'instance laydate d'origine n'a rien à voir avec le nœud actuel et n'est plus reconnue. .

Méthode d'implémentation :

Introduction détaillée aux nouvelles Sélection multiple de dates et Méthode de destruction de layDate

Vous pouvez en fait voir que l'élément central est en fait les deux lignes de code dans le cercle. Clonez le nœud à détruire et. Ensuite, le nœud d'origine a été remplacé, il s'agit donc fondamentalement d'un processus insensible pour l'utilisateur. N'oubliez pas de supprimer la clé lay, afin qu'il s'agisse fondamentalement d'un nœud propre et que vous puissiez utiliser librement ce que vous souhaitez rendre plus tard.

Introduction détaillée aux nouvelles Sélection multiple de dates et Méthode de destruction de layDate

Recommandé : Démarrage rapide du framework Laui

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:layui.com
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