Cet article décrit la méthode de mise en œuvre complète de la gestion des dons JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La page index.html est la suivante:
Copiez le code comme suit: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS Gestion du don </TITAL>
<link href = "css / csss.css" rel = "Stylesheet" type = "text / css" />
<script type = "text / javascript">
// Tableau d'unités données
var listorgs = [
{"id": "1", "comname": "une fondation"},
{"id": "2", "comname": "Song Ching Ling Fund"},
{"id": "3", "comname": "Tzu Chi Foundation"},
{"id": "4", "comname": "Croix-Rouge"},
{"id": "5", "comname": "wolf totem"}
]]
// Ajouter dynamiquement une méthode anonyme à l'objet Array Listorgs
listorgs.getorgsbyid = fonction (id) {
pour (var i = 0; i <listorgs.length; i ++) {
if (listorgs [i] .id == id) {
return listorgs [i]; // renvoie un objet
}
}
};
// Tableau de données de don
var listData = [
{"id": "1", "Pername": "Jackie Chan", "Orgid": "1", "Money": "10000", "Date": "2012-3-3"},
{"id": "2", "Pername": "Jet Li", "orgid": "2", "Money": "10000", "Date": "2012-3-3"},
{"id": "3", "Pername": "Chen Guangbiao", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "4", "Pername": "Hu jintao", "orgid": "1", "Money": "10000", "Date": "2012-3-3"},
{"id": "5", "Pername": "Zhou Xingchi", "orgid": "2", "Money": "10000", "Date": "2012-3-3"},
{"id": "6", "Pername": "Dawn", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "7", "Pername": "Werewolf", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "8", "Pername": "Madman", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "9", "Pername": "Three Crazy", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"}
]]
// Tableau de requête de pagination
listData.fenyeQuery = fonction (pagenow, pagesize) {
var res = new Array ();
// 1. Appuyez sur PageSize à 5, la première page est ListData [0] -ListData [4], et la deuxième page est ListData [5] -ListData [9]
// La troisième page est listData [10] -ListData [14]
var start = (pagenow - 1) * pagesize;
var end = listData.length> (pagenow * pagesize)? (Pagenow * PageSize): listData.Length;
for (var i = start; i <end; i ++) {
res [res.length] = listData [i];
}
return res;
};
listData.QueryByorid = fonction (orid) {
var arr = new Array ();
pour (var i = 0; i <listData.length; i ++) {
if (listData [i] .orgid == orid) {
arr [arr.length] = listData [i];
}
}
retour arr;
};
listData.idnum = listData.length;
listData.addrec = fonction (rec) {
listData.idnum ++;
var newrec = {"id": listData.idnum, "Pername": rec.pername, "orgid": rec.orgid, "money": rec.money, "date": rec.date};
listData [listData.length] = newRec;
retourner newrec;
};
listData.upDaterec = fonction (obj) {
pour (var i = 0; i <listData.length; i ++) {
if (listData [i] .id = obj.id) {
listData [i] = obj;
casser;
}
}
};
// Définir une variable globale pour détecter s'il faut annuler la personnalité
var iscanceLupdate = false;
// définir trois commandes d'entrée de texte
var inputpername = document.CreateElement ("input");
Inputpername.type = "texte";
var inputmoney = document.CreateElement ("entrée");
Inputpername.type = "texte";
var inputDate = Document.CreateElement ("Input");
Inputpername.type = "texte";
var seleteorg = document.CreateElement ("SELECT");
listData.delRecById = fonction (id) {
pour (var i = 0; i <listData.length; i ++) {
if (listData [i] .id == id) {
//supprimer
/ *
1. Commencez à partir de l'emplacement où cet ID est situé et déplacez chaque élément derrière un par un
2. Le dernier élément est répété et il doit être effacé
* /
pour (var j = i; j <listData.length - 1; j ++) {
listData [j] = listData [j + 1];
}
}
}
listData.length = listData.length - 1;
};
// échange le texte dans la zone de texte d'entrée
fonction txtToInput (tdname, inputName) {
tdname.setAttribute ("oldvalue", tdname.innerhtml); // Enregistrer le contenu d'origine d'abord, s'il est annulé, restaurez-le
inputName.value = tdname.InnerHtml;
tdname.appendChild (inputName);
tdname.removechild (tdname.firstchild);
}
fonction txtToselelect (tdname, selobj) {
tdname.ApendChild (selobj);
tdname.removechild (tdname.firstchild);
selObj.value = tdname.getAttribute ("orgid");
}
fonction selectORTExt (tdname) {
var orid = seleteorg.value;
var orgname = listorgs.getorgsbyid (orid) .comname;
// tdname.setAttribute ("orgid", seleteorg.value);
tdname.innerhtml = orgname;
}
// retournez l'entrée au texte
fonction inputtotxt (tdname, inputName) {
// Si cliquez sur Annuler
if (iscanceLupdate) {
tdname.innerhtml = tdname.getAttribute ("oldvalue");
retour;
}
// cliquez pour confirmer pour modifier
tdname.innerhtml = inputName.value;
}
// modifie le contrôle de sélection en texte
fonction seletotxt (tdname, selname) {
// tdname.appendChild (selname);
var orgid = seleteorg.value;
// Supprimer le précédent
tdname.innerhtml = (listorgs.getorgsbyid (orgid)). comname;
}
// Annuler la modification
Fonction Annulep (obj) {
isCanceLupdate = true; // cliquez sur Annuler
Docancel (OBJ);
isCanceLupdate = false;
}
Fonction Docancel (obj) {
var trcUr = obj.parerentelement.pare-centilement;
var tds = trcur.childnodes;
// Tous utilisent les valeurs sous le TD d'origine (Enregistrer dans l'attribut)
tds [1] .InnerHtml = tds [1] .getAttribute ("OldValue");
tds [2] .InnerHtml = listorgs.getorgsbyid (tds [2] .getAttribute ("orgid")). Comname;
tds [3] .InnerHtml = tds [3] .getAttribute ("OldValue");
tds [4] .InnerHtml = tds [4] .getAttribute ("OldValue");
tds [5] .innerhtml = "<a href = '#' onclick = 'delObj (this)'> delete </a> <a href = '#' onclick = 'upobj (this)'> modifier </a>";
// isCanceLupDate = false;
// Après avoir confirmé que l'annulation est réussie, définissez Trcur sur Null
trcur = null;
}
var trcur = null;
fonction upobj (obj) {
if (trcur! = null) {
// indique qu'il y a une ligne à l'état d'édition, et sa modification doit être annulée
isCanceLupdate = true;
// Annuler l'édition de cette ligne
Docancel (trcur.childnodes [5] .firstchild); // trcur.childnodes [5].
}
// Obtenez la ligne actuelle
Trcur = obj.pare-Parement.Pare-ParentElement;
var tds = trcur.childnodes;
// Modification des entrées du donneur
txtToInput (tds [1], inputpername);
//Montant
txtToInput (TDS [3], inputmoney);
// Date de don
txtToInput (tds [4], inputDate);
// baisser pour sélectionner l'unité
txtToselelect (tds [2], seleteorg);
// modifie le lien pour annuler
tds [5] .InnerHtml = "<a href = '#' onclick = 'doupobj (this)'> ok </a> <a href = '#' onclick = 'anseplup (this)'> annuler </a>";
}
// Confirmer pour modifier
fonction Doupobj (obj) {
isCanceLupdate = false;
Trcur = obj.pare-Parement.Pare-ParentElement;
// 1. Modifier les enregistrements correspondants dans le tableau
var rec = {"id": trcur.childnodes [0] .innerhtml, "pername": trcur.childnodes [1] .childnodes [0] .value, "orgid": trcur.childnodes [2] .childNodes [0] .value, "Money": trcur.childNodes [3] .ChildNodes [0] .value, "Date": trcur.childNodes [4] .ChildNodes [0] .Value};
// appelle la méthode pour modifier les enregistrements correspondants dans ListData
listData.upDaterec (REC);
// 2. Modifier les enregistrements dans le tableau
Inputtotxt (trcur.childnodes [1], inputpername);
seletotxt (trcur.childnodes [2], Seleteorg);
InputTotxt (trcur.childnodes [3], inputmoney);
Inputtotxt (trcur.childnodes [4], inputDate);
trcur.childnodes [5] .InnerHtml = "<a href = '#' onclick = 'delObj (this)'> delete </a> <a href = '#' onclick = 'upobj (this)'> modifier </a>";
//trcur.childNodes@2
// Après avoir confirmé que la modification est réussie, définissez Trcur sur NULL
trcur = null;
}
// supprimer une ligne de données
fonction delobj (obj) {
// Supprimer le tableau correspondant dans le tableau
//1. pour obtenir la ligne sélectionnée
var Curtr = obj.pare-Parement.Pare-ParentElement;
// 2. Obtenez la valeur de l'ID de la première colonne
var Delid = Curtr.Cells [0] .InnerHtml;
// Window.Alert (Delid);
// 3. Supprimer un enregistrement basé sur ID (ListData dans le tableau)
listData.delRecById (Delid);
// 4. Supprimer les lignes affichées dans la vue de la table
Curtr.Parerentelement.removechild (Curtr);
}
fonction gel (id) {
return document.getElementById (id);
}
// 1. Interroger la liaison du nom de l'unité, Selele est: SELET Element Node
fonction chargeorglist (selele) {
pour (var i = 0; i <listorgs.length; i ++) {
var opt = nouvelle option (listorgs [i] .comname, listorgs [i] .id);
Selele.options.add (OPT);
}
}
// 2. Méthodes pour lier les tables et lier les tables et ListData
fonction chargedatalist () {
// pour (var i = 0; i <listData.length; i ++) {
// addRow (listData [i]);
//}
// Affichage de pagination
showPage ();
}
fonction addrow (obj) {
var trnew = gel ("tblist"). insertrow (-1);
var tdnew = trnew.insertCell (-1);
tdnew.innerhtml = obj.id;
trnew.insertCell (-1) .InnerHtml = obj.pername;
var trrorgname = trnew.insertCell (-1);
Trorgname.setAttribute ("orgid", obj.orgid);
trorgegname.innerhtml = (listorgs.getorgsbyid (obj.orgid)). Comname;
trnew.insertCell (-1) .InnerHtml = obj.money;
trnew.insertCell (-1) .InnerHtml = obj.date;
trnew.insertCell (-1) .innerhtml = "<a href = '#' onclick = 'delObj (this)'> delete </a> <a href = '#' onclick = 'upObj (this)'> modifier </a>";
}
window.onload = function () {
// requête de liaison
FOLDORGLIST (GEL ("SELSEARCHORG"));
// lier l'unité donnée
FOLDORGLIST (GEL ("Seladdorg"));
FOLDORGLIST (SELETEORG);
// lier la table et listData
LoadDatalist ();
// Ajouter un nouveau bouton pour lier un événement
gel ("btnadd"). onclick = function () {
if ((! (gel ("txtName"). valeur)) || (! (gel ("txtmoney"). valeur) || (! (gel ("txtDate"). valeur)))) {
alert ("l'entrée ne peut pas être vide");
retour;
}
// 1. Obtenez le contenu d'entrée et emballez-le dans un objet (selon le format de ListData)
var arr = {"Pername": gel ("txtName"). Value, "orgid": gel ("seladdorg"). Value, "Money": gel ("txtmoney"). Value, "Date": gel ("txtDate"). Value};
// 2. Ajouter au tableau ListData
var res = listData.addrec (arr);
// 3. Affiché dans la table
var trnew = gel ("tblist"). insertrow (-1);
trnew.insertCell (-1) .InnerHtml = res.id;
trnew.insertCell (-1) .InnerHtml = res.pername;
var tdorg = trnew.insertCell (-1);
tdorg.setAttribute ("orgid", res.orgid);
tdorg.innerhtml = listorgs.getorgsbyid (res.orgid) .comname;
trnew.insertCell (-1) .InnerHtml = res.money;
trnew.insertCell (-1) .InnerHtml = res.date;
trnew.insertCell (-1) .innerhtml = "<a href = '#' onclick = 'delObj (this)'> delete </a> <a href = '#' onclick = 'upObj (this)'> modifier </a>";
};
// Binding Event to Requête du bouton
gel ("btnsearch"). onclick = function () {
if (gel ("selsearchorg"). valeur == -1) {
retour;
}
// 1. Obtenez l'orgide de l'unité de donateur à interroger
var orgid = gel ("selsearchorg"). valeur;
// 2. Définissez une méthode basée sur la requête orgide dans le tableau ListData et appelez-la ici
var arrres = listData.QueryByorid (orgid);
// 3. Retirez les anciennes données de la table de l'affichage, assurez-vous d'effacer l'affichage du bas en haut
var trrs = gel ("tblist"). lignes;
pour (var j = tr.length-1; j> 0; j--) {
gel ("tblist"). Deleterow (j);
}
// 4. Afficher les nouvelles données Arrres
pour (var i = 0; i <arrres.length; i ++) {
AddRow (Arrres [i]);
}
};
// lier les événements à la page précédente
gel ("btnprepage"). onclick = function () {
if (pagenow> 1) {
Pagenow--;
showPage ();
} autre {
alerte ("C'est déjà la première page!")
}
};
// lier les événements à la page suivante
gel ("btnnextpage"). onClick = function () {
if (pagenow <listData.length / pagesize)
{
Pagenow ++;
showPage ();
}autre
{
alert ("C'est déjà la dernière page!");
}
};
};
var pagenow = 1;
var pagesize = 5;
fonction showPage () {
var trrs = gel ("tblist"). lignes;
pour (var j = tr.length - 1; j> 0; j--) {
gel ("tblist"). Deleterow (j);
}
// 1. Renvoyez un tableau selon Pagenow et PageSize
var res = listData.fenyeQuery (pagenow, pagesize);
pour (var i = 0; i <res.length; i ++) {
addrow (res [i]);
}
}
</cript>
</ head>
<body>
<div id = "conteneur">
<h1> Gestion des dons </H1>
<div>
Unité réalisée
<select id = "selsearchorg">
<Option Value = "- 1"> - Veuillez sélectionner - </ Option>
</lect>
<input type = "Button" id = "btnSearch" value = "Query" /> <input type = "Button" value = "Page précédente" id = "btnprepage" /> <input type = "Button" value = "page suivante" id = "btnnextpage" /> <spann id = "pagebar"> </ spann
</div>
<div>
Donneur: <input type = "text" id = "txtName" size = "8" />
Unité reçue des donateurs:
<select id = "seladdorg">
</lect>
Montant: <input type = "text" id = "txtmoney" size = "8" />
Date de don: <input type = "text" id = "txtDate" size = "10" />
<input type = "bouton" id = "btnadd" value = "new" />
</div>
<table id = "tblist" cellpacing = "0" cellpadding = "0">
<tr>
<TD> Numéro de série </td>
<td> donateur </td>
<TD> Unité donnée </td>
<td> Montant </td>
<TD> Date de don </td>
<TD> Opération </td>
</tr>
</ table>
</div>
</docy>
</html>
CSS.CSS est le suivant:
Copiez le code comme suit: * {
marge: 0px;
rembourrage: 0px;
}
corps {
Largeur: 900px;
marge: 0px automatique;
Tableau de rembourrage: 20px;
}
H1 {
rembourrage: 15px;
Texte-aligne: Centre;
}
#Container {
Largeur: 900px;
Hauteur: Auto;
}
.header, .search {
Largeur: 900px;
hauteur: 30px;
hauteur de ligne: 30px;
Border: 1px solide # 0094FF;
marge: 3px;
rembourrage: 0px 5px;
}
.tblist {
Largeur: 912px;
Hauteur: Auto;
}
.tblist th {
bordure: 1px solide # 000;
Contexte: # 0094FF;
hauteur: 30px;
Police-poids: Bold;
hauteur de ligne: 30px;
Couleur: #ffff;
}
.inputshort {
Largeur: 100px;
}
.btn {
Largeur: 70px;
hauteur: 25px;
hauteur de ligne: 25px;
Police-poids: Bold;
Texte-aligne: Centre;
}
td {
Border: 1px solide;
hauteur: 25px;
Texte-indent: 1em;
Border-Collapse: s'effondrer;
}
J'espère que cet article sera utile à la programmation JavaScript de tous.