Este artículo describe el método de implementación completo de la gestión de donaciones JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
La página index.html es la siguiente:
Copie el código de la siguiente manera: <! DocType Html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS Donation Management </title>
<link href = "css/css.css" rel = "stylesheet" type = "text/css"/>
<script type = "text/javaScript">
// matriz de unidades donadas
var listorgs = [
{"id": "1", "Comname": "One Foundation"},
{"id": "2", "Comname": "Song Ching Ling Fund"},
{"id": "3", "ComName": "Tzu Chi Foundation"},
{"id": "4", "Comname": "Cruz roja"},
{"id": "5", "Comname": "Wolf Totem"}
];
// Agregue dinámicamente un método anónimo al objeto de matriz de Listorgs
listorgs.getorgsbyid = function (id) {
para (var i = 0; i <listorgs.length; i ++) {
if (listorgs [i] .id == id) {
devolver listorgs [i]; // devuelve un objeto
}
}
};
// matriz de datos de donación
var listData = [
{"id": "1", "pername": "jackie chan", "orgid": "1", "dinero": "10000", "fecha": "2012-3-3"},
{"id": "2", "pername": "jet li", "orgid": "2", "dinero": "10000", "fecha": "2012-3-3"},
{"id": "3", "pername": "Chen Guangbiao", "Orgid": "3", "Money": "10000", "Fecha": "2012-3-3"},
{"id": "4", "pername": "hu jintao", "orgid": "1", "dinero": "10000", "fecha": "2012-3-3"},
{"id": "5", "pername": "zhou xingchi", "orgid": "2", "dinero": "10000", "fecha": "2012-3-3"},
{"id": "6", "pername": "amanecer", "orgid": "3", "dinero": "10000", "fecha": "2012-3-3"},
{"id": "7", "Pername": "Werewolf", "Orgid": "3", "Money": "10000", "Fecha": "2012-3-3"},
{"id": "8", "Pername": "Madman", "Orgid": "3", "Money": "10000", "Fecha": "2012-3-3"},
{"id": "9", "pername": "tres loco", "orgid": "3", "dinero": "10000", "fecha": "2012-3-3"}
];
// matriz de consultas de paginación
listData.fenyEquery = function (pagenow, pageSize) {
var res = new Array ();
// 1. Presione PageSize to 5, la primera página es ListData [0] -listData [4], y la segunda página es ListData [5] -listData [9]
// La tercera página es ListData [10] -listData [14]
var start = (Pagenow - 1) * PageSize;
var end = listData.length> (pagenow * pageSize)? (Pagenow * PageSize): listData.length;
para (var i = start; i <end; i ++) {
res [res.length] = listData [i];
}
regresar res;
};
listData.QueryByorId = function (orid) {
var arr = new Array ();
para (var i = 0; i <listData.length; i ++) {
if (listData [i] .orgid == orid) {
arr [arr.length] = listData [i];
}
}
regresar arr;
};
listData.idnum = listData.length;
listData.addrec = function (rec) {
listData.idnum ++;
var newRec = {"id": listData.idnum, "pername": rec.pername, "orgid": rec.orgid, "dinero": rec.money, "fecha": rec.date};
listData [listData.length] = newREC;
devolver newrec;
};
listData.Updaterec = function (obj) {
para (var i = 0; i <listData.length; i ++) {
if (listData [i] .id = obj.id) {
listData [i] = obj;
romper;
}
}
};
// Defina una variable global para detectar si cancelar la personalidad
var isCancelUpdate = false;
// Definir tres controles de entrada de texto
var inputperName = document.createElement ("entrada");
InputPerName.Type = "Text";
var inputMoney = document.createElement ("entrada");
InputPerName.Type = "Text";
var inputDate = document.createElement ("entrada");
InputPerName.Type = "Text";
var seleteorg = document.createElement ("Seleccionar");
listData.DelRecById = function (id) {
para (var i = 0; i <listData.length; i ++) {
if (listData [i] .id == id) {
//borrar
/*
1. Comience desde la ubicación donde se encuentra esta identificación y mueva cada elemento detrás de uno por uno
2. El último elemento se repite y debe limpiarse
*/
for (var j = i; j <listData.length - 1; j ++) {
listData [j] = listData [j + 1];
}
}
}
listData.length = listData.length - 1;
};
// intercambia el texto al cuadro de texto de entrada
función txtToInput (tdname, inputName) {
tdname.setAttribute ("OldValue", tdname.innerhtml); // Guarde el contenido original primero, si se cancela, restaurarlo
inputName.Value = tdname.innerhtml;
tdname.appendChild (inputName);
tdname.removechild (tdname.firstchild);
}
función txttoselect (tdname, selobj) {
tdname.appendChild (Selobj);
tdname.removechild (tdname.firstchild);
selobj.value = tdname.getAttribute ("orgid");
}
función selectortext (tdname) {
var orid = seleteorg.value;
var orgname = listorgs.getorgsbyid (orid) .comName;
// tdname.setAttribute ("orgid", seleteorg.value);
tdname.innerhtml = orgname;
}
// volver a la entrada al texto
función inputToTxt (tdname, inputName) {
// si se hace clic en Cancelar
if (isCancelUpdate) {
tdname.innerhtml = tdname.getAttribute ("OldValue");
devolver;
}
// Haga clic para confirmar a modificar
tdname.innerhtml = inputName.Value;
}
// Cambiar el control Seleccionar nuevamente al texto
función seleTotxt (tdname, selname) {
// tdname.appendChild (selname);
var orgid = seleteorg.value;
// Eliminar el anterior
tdname.innerhtml = (listorgs.getorgsbyid (orgid)). comName;
}
// Cancelar modificación
función cancelup (obj) {
isCancelUpdate = true; // Haga clic en Cancelar
docancel (obj);
isCancelUpdate = false;
}
función docancel (obj) {
var trcur = obj.ParentElement.ParentElement;
var tds = trcur.childnodes;
// Todos usan los valores debajo del TD original (guarda en el atributo)
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)'> modificar </a>";
// isCancelUpdate = false;
// Después de confirmar que la cancelación es exitosa, establezca Trcur en NULL
trcur = nulo;
}
var trcur = nulo;
función upobj (obj) {
if (trcur! = null) {
// indica que hay una línea en el estado de edición, y su modificación debe cancelarse
isCancelUpdate = true;
// Cancelar la edición de esa línea
docancel (trcur.childnodes [5] .firstchild); // trcur.childnodes [5] .firstchild, es la <a modificación> de la línea anterior
}
// Obtener la línea actual
trcur = obj.ParentElement.ParentElement;
var tds = trcur.childnodes;
// Modificación de entrada del donante
txtToInput (tds [1], inputPerName);
//Cantidad
txtToInput (TDS [3], InputMoney);
// Fecha de donación
txtToInput (TDS [4], inputDate);
// Tire hacia abajo para seleccionar la unidad
txttoselect (tds [2], seleteorg);
// modificar el enlace para cancelar
tds [5] .innerhtml = "<a href = '#' onClick = 'doupObj (this)'> ok </a> <a href = '#' onClick = 'cancelup (this)'> cancelar </a>";
}
// Confirmar para modificar
función doupObj (obj) {
isCancelUpdate = false;
trcur = obj.ParentElement.ParentElement;
// 1. Modificar los registros correspondientes en la matriz
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, "fecha": trcur.childnodes [4] .childnodes [0] .value};
// llamando al método para modificar los registros correspondientes en ListData
listData.Updaterec (rec);
// 2. Modificar registros en la tabla
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)'> modificar </a>";
//trcur.childnodeseffont>.setattribute("orgid ", seleteorg.value);
// Después de confirmar que la modificación es exitosa, establezca Trcur en NULL
trcur = nulo;
}
// Eliminar una línea de datos
función delobj (obj) {
// Eliminar la matriz correspondiente en la matriz
//1. para obtener la fila seleccionada
var curtr = obj.ParentElement.ParentElement;
// 2. Obtenga el valor de ID de la primera columna
var delid = curr.cells [0] .innerhtml;
// window.alert (delid);
// 3. Eliminar un registro basado en ID (listData en la matriz)
listData.DelRecById (delid);
// 4. Elimine las filas que se muestran en la vista de la tabla
curr.parentelement.removechild (Curtr);
}
function gel (id) {
return document.getElementById (id);
}
// 1. Consulta la unión del nombre de la unidad, Selele es: Selet Element Node
función loadorglist (selele) {
para (var i = 0; i <listorgs.length; i ++) {
var opt = nueva opción (listorgs [i] .comName, listorgs [i] .id);
selele.options.add (opt);
}
}
// 2. Métodos para unir tablas y unir tablas y listados
función loadDatalist () {
// for (var i = 0; i <listData.length; i ++) {
// addrow (listData [i]);
//}
// pantalla de paginación
showpage ();
}
función addrow (obj) {
var trnew = gel ("tblist"). inserTrow (-1);
var tdnew = trnew.insertcell (-1);
tdnew.innerhtml = obj.id;
trnew.insertcell (-1) .innerhtml = obj.pername;
var trorgname = trnew.insertcell (-1);
trorgname.setAttribute ("orgid", obj.orgid);
trorgname.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)'> modificar </a>";
}
window.onload = function () {
// Consulta vinculante
Loadorglist (gel ("selSearchorg"));
// unir la unidad donada
Loadorglist (gel ("seladdorg"));
Loadorglist (seleteorg);
// Bind Table y ListData
LoadDatalist ();
// Agregar un nuevo botón para unir un evento
gel ("btnadd"). onClick = function () {
if ((! (gel ("txtname"). valor)) || (! (gel ("txtmoney"). valor) || (! (gel ("txtdate"). valor)))) {
alerta ("La entrada no puede estar vacía");
devolver;
}
// 1. Obtenga el contenido de entrada y empaquételo en un objeto (de acuerdo con el formato de ListData)
var arr = {"pername": gel ("txtname"). valor, "orgid": gel ("seladdorg"). valor, "dinero": gel ("txtmoney"). valor, "fecha": gel ("txtDate"). valor};
// 2. Agregar a la matriz ListData
var res = listData.Addrec (arr);
// 3. Se muestra en la tabla
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)'> modificar </a>";
};
// Botón de enlace de evento a la consulta
gel ("btnsearch"). onClick = function () {
if (gel ("selsearchorg"). valor == -1) {
devolver;
}
// 1. Obtenga que se consulte el Orgid de la unidad de donantes
var orgid = gel ("selSearchorg"). Valor;
// 2. Definir un método basado en la consulta de Orgid en la matriz ListData y llamarlo aquí
var arres = listData.QueryByorId (Orgid);
// 3. Elimine los datos de la tabla antiguos de la pantalla, asegúrese de borrar la pantalla de abajo hacia arriba
var trs = gel ("tblist"). filas;
para (var j = trs.length-1; j> 0; j--) {
gel ("tblist"). Deleterow (j);
}
// 4. Mostrar nuevos ArrRes de datos
para (var i = 0; i <arrres.length; i ++) {
addrow (arrres [i]);
}
};
// Atrae eventos a la página anterior
gel ("btnprepage"). onClick = function () {
if (pagenow> 1) {
pagenow--;
showpage ();
} demás {
alerta ("¡Ya es la primera página!")
}
};
// Binde los eventos a la página siguiente
gel ("btnnextpage"). onClick = function () {
if (pagenow <listData.length/pageSize)
{
pagenow ++;
showpage ();
}demás
{
alerta ("¡Ya es la última página!");
}
};
};
var pagenow = 1;
var pageSize = 5;
función showPage () {
var trs = gel ("tblist"). filas;
para (var j = trs.length-1; j> 0; j--) {
gel ("tblist"). Deleterow (j);
}
// 1. Devuelve una matriz según Pagenow y PageSize
var res = listData.fenyequery (pagenow, pageSize);
para (var i = 0; i <res.length; i ++) {
addrow (res [i]);
}
}
</script>
</ablo>
<Body>
<div id = "contenedor">
<h1> Gestión de donaciones </h1>
<div>
Unidad de donante
<select id = "selsearchorg">
<opción valor = "-1">-Seleccione-</ppection>
</select>
<input type = "botón" id = "btnsearch" value = "QUERY" /> <input type = "Button" value = "anterior página" id = "btnprepage" /> <input type = "button" value = "siguiente página" id = "btnnextpage" /> <span id = "página"> </span>>
</div>
<div>
Donante: <input type = "text" id = "txtname" size = "8" />
Unidad recibida por donantes:
<select id = "seladdorg">
</select>
Cantidad: <input type = "text" id = "txtmoney" size = "8" />
Fecha de donación: <input type = "text" id = "txtdate" size = "10" />
<input type = "botón" id = "btnadd" value = "new" />
</div>
<table id = "tblist" cellPacing = "0" cellPadding = "0">
<tr>
<TD> Número de serie </td>
<td> donante </td>
<TD> Unidad donada </td>
<TD> Cantidad </td>
<TD> Fecha de donación </td>
<td> operación </td>
</tr>
</table>
</div>
</body>
</html>
CSS.CSS es el siguiente:
Copie el código de la siguiente manera:* {
margen: 0px;
relleno: 0px;
}
cuerpo {
Ancho: 900px;
Margen: 0px Auto;
Top-top: 20px;
}
H1 {
relleno: 15px;
Text-Align: Center;
}
#container {
Ancho: 900px;
Altura: Auto;
}
.header, .search {
Ancho: 900px;
Altura: 30px;
Línea de altura: 30px;
borde: 1px sólido #0094ff;
margen-top: 3px;
relleno: 0px 5px;
}
.tblist {
Ancho: 912px;
Altura: Auto;
}
.tblist th {
borde: 1px Solid #000;
Antecedentes: #0094ff;
Altura: 30px;
Font-Weight: Bold;
Línea de altura: 30px;
Color: #ffff;
}
.inputShort {
Ancho: 100px;
}
.btn {
Ancho: 70px;
Altura: 25px;
Línea de altura: 25px;
Font-Weight: Bold;
Text-Align: Center;
}
TD {
borde: 1px sólido;
Altura: 25px;
INDENT DE TEXTO: 1EM;
Colapso de borde: colapso;
}
Espero que este artículo sea útil para la programación de JavaScript de todos.