Dans l'article précédent, le résumé de l'expérience du cadre de développement basé sur le traitement de la pagination de la liste Bootstrap Metronic [II] et l'utilisation de JSTREE plug-in, le traitement de pagination de données a été introduit, le plug-in de paginateur bootstrap a été utilisé et la liste des arbres a été utilisée, le plug-in JStree a été utilisé. Cet article continue d'introduire le contrôle couramment utilisé Select2 dans la page d'édition. Ce contrôle peut enrichir le contrôle traditionnel de liste déroulante de sélection, offrant plus de fonctions et une meilleure expérience utilisateur.
1. Introduction à SELECT2 Control
Ce plug-in est un plug-in d'extension basé sur Select, qui peut fournir des fonctions plus riches et une expérience utilisateur. Son adresse de site Web GitHub officielle est: https://select2.github.io/. Pour des cas d'utilisation spécifiques, veuillez vous référer à l'adresse: https://select2.github.io/examples.html.
Dans tout le cadre, nous avons utilisé de nombreux contrôles Select2 pour gérer l'affichage du contenu, y compris une liste déroulante à sélection unique (y compris une boîte de sélection en cascade), une liste déroulante sélectionnée, une liste déroulante d'arborescence, etc. L'effet d'interface est le suivant.
1) L'effet d'interface en cascade des provinces, des villes et des régions administratives sous l'interface d'édition . Si vous sélectionnez une province, la ville sous la province correspondante sera chargée. Si vous sélectionnez une ville, les régions administratives de la ville continueront de se charger, réalisant ainsi l'effet de liste déroulante de la corrélation à plusieurs niveaux.
2) Liste déroulante de sélection multiple sous l'interface d'édition
Mais lorsque nous sélectionnons le contenu, le système affichera automatiquement les données de liste sans sélection, ce qui est très intuitif et convivial, comme illustré ci-dessous.
3) liste déroulante de la liste des arbres
Parfois, certaines de nos données peuvent avoir des relations hiérarchiques, comme l'organisation, la liste de niveau supérieur, etc.
2. Analyse du code d'utilisation réel du contrôle SELECT2
1) Code et opération d'interface de base
Utilisez le contrôle SELECT2, généralement sur le contrôle régulier de sélection, il suffit de le définir (définissez sa classe sur Select2).
<div> <div> <label> Niveau important </ Label> <div> <Select Id = "Importance" name = "Importance" Planholder = "Importance ..."> </ Select> </ Div> </ Div> </ Div> <div> <div> <Vabe> Reconnaissance </vabed> <div> <Select Id = "Recognition" Name = "Reconntion" PlaceHolder = "Reconnaissance ..."> </lect
S'il s'agit d'une liste fixe, il est simplement défini son contenu d'option, comme illustré ci-dessous.
<div> <div> <Babel> Fumer </ Label> <div> <Select id = "fumer" name = "fumer" type = "text" placeholder = "fumer ..."> <option> fumer </ option> <popoption> Ne pas fumer </opoption> </ select> </div> </div> </div>
Le code d'initialisation de contrôle SELECT2 simple est le suivant.
$ (document) .ready (function () {$ (". js-example-basic-single"). select2 ();});D'une manière générale, si plusieurs éléments sont autorisés à être sélectionnés, définissez multiple = "multiple" comme indiqué dans le code suivant.
<select id = "répondemand" name = "répondemand" multiple = "multiple"> </ select>
2) Opération de liaison des données asynchrones
D'une manière générale, les données de notre contrôle sélectionné sont chargées dynamiquement à partir de la base de données, de sorte que les données sont généralement obtenues et liées via AJAX.
Sur la base de la prise en compte de la réutilisabilité du code, nous écrivons une fonction JS commune pour réduire le code des opérations contraignantes et améliorer la réutilisabilité du code.
// lier le contenu du dictionnaire à la fonction de contrôle de sélection de sélection spécifiée bindSelect (ctrlName, url) {var contrôle = $ ('#' + ctrlName); // Définit le contrôle de SELECT2.Select2 ({AllowClear: true, formatResult: FormatResult, formatSelection: FormatSelection, EscapEmarkup: function (m) {return m;}}); // lie le contenu de ajax $ .getjson (URL, fonction (data) {Control.Empty (); // Effacer la boîte déroulante $ .aeach (data, function (i, item) {Control.APPEND ("<option Value = '+ item.Value +"' '> "+ item.Text +" </ option> ");});}); });De cette façon, les données liées au module de dictionnaire public peuvent être encore encapsulées et traitées comme suit.
// lie le contenu du dictionnaire à la fonction de contrôle spécifiée bindDicTitem (ctrlName, dictTyPename) {var url = '/ dictData / getDictJSON? DictTyPename =' + Encodeuri (dictTyPename); BindSelect (ctrlName, url);}De cette façon, nous initialisons le contrôle SELECT2 et lions dynamiquement la valeur de dictionnaire correspondante ou d'autres données. Cela peut être réalisé via le code d'initialisation suivant. Parmi eux, BindDicTitem est l'opération qui lie directement le contenu du dictionnaire, BindSelect est l'opération qui obtient et lie les données basées sur l'URL, et $ ("# province"). ON ("Change", fonction (e) {}); est le fonctionnement du traitement de la fonction tel que $ ("# province"). sur ("changement", fonction (e) {}); gère l'opération de liaison qui gère les modifications du contenu sélectionné.
// Initialiser les informations du dictionnaire (liste déroulante) Fonction initdicTitem () {// Deuxième référence d'affectation BindDicTitem ("Area", "Market partition"); BindDicTitem ("industrie", "industrie client"); BindDicTitem ("grade", "niveau client"); BindDicTitem ("CustomerType", "Type de client"); BindDicTitem ("Source", "Customer Source"); BindDicTitem ("CreditStatus", "cote de crédit"); BindDicTitem ("stade", "stade client"); BindDicTitem ("statut", "statut du client"); BindDicTitem ("Importance", "niveau d'importance"); // lier la province, la ville et la région administrative (traitement de liaison) BindSelect ("province", "/ province / getAllProvinceNamedictjson"); $ ("# Province"). Sur ("changement", fonction (e) {var provinceName = $ ("# province"). Val (); bindSelect ("City", "/ City / GetCitysByProvinceNamedictJson? ProvinceName =" + ProvinceName);}); $ ("# City"). Sur ("changement", fonction (e) {var cityname = $ ("# city"). Val (); bindSelect ("District", "/ District / GetDistrictBycityNamedictJson? CityName =" + CityName);}); }Quant aux données renvoyées par le contrôleur MVC, nous renvoyons une liste de données JSON sur la page frontale, et leur format de données est le suivant.
[{"Texte": "", "valeur": ""}, {"texte": "Conférence académique", "valeur": "Conference académique"}, {"texte": "Friend Introduction", "Value": "Friend Introduction"}], {"Text": "Advertising Media", "Value": "Advertising Media"}]De cette façon, lorsque la page frontale lie le contrôle SELECT2, les propriétés de l'objet JSON sont utilisées.
// lie le contenu de ajax $ .getjson (URL, fonction (data) {Control.Empty (); // Effacer la boîte déroulante $ .aeach (data, function (i, item) {Control.APPEND ("<option Value = '+ item.Value +"' '> "+ item.Text +" </ option> ");});});Le code d'implémentation du contrôleur est le suivant:
/// <summary> /// Obtenez les données de dictionnaire correspondantes en fonction du type de dictionnaire pour faciliter la liaison des contrôles d'interface utilisateur /// </summary> /// <param name = "DictTyPename"> Nom du type de dictionnaire </param> /// <retourné> </ returns> public ActionResult GetDictJSON (String DictTyPename) {List <CLISTITEM> Trelest = New List <CLISTITEM> (); CLISTITEM PNODE = NOUVEAU CLISTITEM ("", ""); Treelist.insert (0, pnode); Dictionary <String, String> dict = bllfactory <DictData> .Instance.getDictByDictType (dictTyPename); foreach (string key in dict.keys) {treelist.add (new Clistitem (key, dict [key])); } Retour TOJSONContent (Treelist); }3) Opération de liaison de la liste des arbres
Pour les listes d'attributs, telles que les données hiérarchiques de leurs sociétés, départements et institutions affiliés, leurs opérations contraignantes sont également similaires, comme le montre le code suivant.
// bindSelect ("company_id", "/ user / getMyCompanyDictJSON? UserId =" + @ session ["userId"]); $ ("# Company_id"). Sur ("modifier", fonction (e) {var companyId = $ ("# company_id"). Val (); bindSelect ("Dept_id", "/ user / getDeptDictjson? Parentid =" + CompanyId);}); $ ("# Dept_id"). Sur ("change", fonction (e) {var deptid = $ ("# dept_id"). Val (); bindSelect ("pid", "/ user / getuserDictjson? Deptid =" + deptid);});Ce sont juste les données qu'ils renvoient, nous l'utilisons simplement comme contenu d'affichage en retrait.
[{"Text": "Group Iqidi", "Value": "1"}, {"Text": "Guangzhou Branch", "Value": "3"}, {"Text": "Branch Shanghai", "Value": "5"}, {"Text": "Beijing Branch", "Value": "5"}]Ou comme indiqué ci-dessous
[{"Text": "Guangzhou Branch", "Value": "3"}, {"Text": "Office du directeur général", "valeur": "6"}, {"Text": "Département financier", "valeur": "7"}, {"Text": "Département d'ingénierie", "Value": "8", {text ":" Product R & d. "Texte": "Développer un groupe", "valeur": "14"}, {"texte": "Développer un groupe 2", "valeur": "15"}, {"texte": "Test Group 2", "Value": "15"}, {"Text": "Test Group 2", "Value": "16"}, "Text": Department ", le département de marché", "Value": "10"}, "," Texte ": Département de marché", "Value": "10"}, "," Texte ": Département de marche 1 "," Value ":" 23 "}, {" Text ":" Market Department 2 "," Value ":" 24 "}, {" Text ":" Département complet "," valeur ":" 11 "}, {" Text ":" Département de production "," Valeur ":" 12 "}, {" Text ":" Département des ressources humaines "," valeur ":" 13 "}]Pour résumer les deux parties ci-dessus, nous pouvons voir que le contenu de leur texte est d'augmenter les espaces en fonction de la relation hiérarchique, réalisant ainsi l'affichage de la relation hiérarchique.
Cependant, en termes d'effet d'interface, ce traitement n'est en effet pas aussi bon que l'affichage de l'arborescence de liste déroulante dans EasyUi. Peut-être qu'un meilleur plug-in bootstrap peut être utilisé pour afficher ce contenu en forme d'arbre.
4) Traitement de l'attribution du contrôle SELECT2
Les méthodes introduites ci-dessus consistent à initialiser les données liées au contrôle et à la liaison. Donc, si nous lions la valeur de l'interface d'édition après avoir initialisé l'interface, nous devons attribuer la valeur au contrôle pour lui permettre d'afficher les éléments qui doivent vraiment être affichés.
La méthode de nettoyage du contrôle est la suivante.
// Effacer la valeur du contrôle Select2 $ ("# pid"). Select2 ("val", ""); $ ("# Company_id"). Select2 ("val", ""); $ ("# Dept_id"). Select2 ("val", "");Si plusieurs contrôles doivent être effacés, vous pouvez utiliser la collection pour le traiter
var select2ctrl = ["Area", "Industry", "Grade", "CustomerType", "Source", "CreditStatus", "Stage", "Status", "Importance"]; $ .each (select2ctrl, function (i, item) {var ctrl = $ ("#" + item); ctrl.select2 ("val", "");});Attribuez une valeur au contrôle SELECT2 pour afficher les éléments avec le contenu de valeur correspondant, et l'opération sera similaire à celle ci-dessus.
$ ("# CustomerType"). Select2 ("Val", info.CustomerType); $ ("# Grade"). Select2 ("val", info.grade); $ ("# CreditStatus"). Select2 ("Val", info.CreditStatus); $ ("# Importance"). Select2 ("val", info.ispublic);Si vous avez besoin de l'afficher de manière en cascade, ajoutez un traitement de fonction Onchange, comme suit le traitement d'affectation du code en cascade suivant.
$ ("# Province"). SELECT2 ("Val", info.province) .trigger ('change'); // link $ ("# city"). Select2 ("val", info.city) .trigger ('change'); // link $ ("# District"). Select2 ("Val", info.District); $ ("# Company_id1"). Select2 ("val", info.company_id) .trigger ('change'); $ ("# Dept_id1"). Select2 ("val", info.dept_id) .trigger ('change'); $ ("# Pid1"). Select2 ("val", info.pid);Enfin, il existe deux effets d'interface intégrés pour référence.
Ce qui précède est le résumé de l'expérience du framework de développement métronique bootstrap basé sur la liste déroulante [trois] du contenu pertinent de l'utilisation du plug-in Select2. J'espère que ce sera utile à tout le monde. Si vous souhaitez en savoir plus d'informations, veuillez faire attention au site Web Wulin.com!