ホームページ > 記事 > ウェブフロントエンド > js_javascript スキルに実装された寄付管理の完全な例
js_javascript スキルに実装された寄付管理の完全な例
- WBOYオリジナル
- 2016-05-16 16:18:581407ブラウズ
この記事の例では、js 寄付管理の完全な実装方法について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
index.html ページは次のとおりです:
<スクリプトタイプ="text/javascript"> //寄付単位の配列
var listOrgs = [
{ "id": "1", "comName": "One Fund" },
{ "id": "2", "comName": "宋清玲基金" },
{ "id": "3", "comName": "慈済財団" },
{ "id": "4", "comName": "赤十字" },
{ "id": "5", "comName": "ウルフ トーテム" }
];
//匿名メソッドを listOrgs 配列オブジェクトに動的に追加します
listOrgs.getOrgsById = 関数 (id) {
for (var i = 0; i
Return listOrgs[i];// オブジェクトを返します
};
//寄付データ配列
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": "胡錦濤", "orgId": "1", "money": "10000", "date": "2012-3-3" },
{ "id": "5", "perName": "zhouxingchi", "orgId": "2", "money": "10000", "date": "2012-3-3" },
。 { "id": "7", "perName": "Werewolf", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "8", "perName": "Crazy Devil", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "9", "perName": "SanCrazy", "orgId": "3", "money": "10000", "date": "2012-3-3" }
];
// ページングクエリ配列
listData.fenyeQuery = function (pageNow, pageSize) {
var res = new Array(); //1. pageSize 5 に従って、最初のページは listData[0]-listData[4]、2 番目のページは listData[5]-listData[9] になります
//ページ 3 は listData[10]-listData[14]
var start = (pageNow - 1) * pageSize; var end = listData.length > (pageNow * pageSize) : listData.length;
for (var i = start ; i < end; i ) {
res[res.length] = リストデータ[i];
}
応答を返します。
};
listData.queryByOrId = function (orid) {
var arr = 新しい配列();
for (var i = 0; i
arr[arr.length] = listData[i];
}
}
arrを返します。
};
listData.idNum = listData.length;
listData.addRec = function(rec) {
リストデータ.idNum ;
var newRec = { "id": listData.idNum, "perName":rec.perName, "orgId":rec.orgId, "money":rec.money, "date":rec.date };
listData[listData.length] = newRec;
newRec を返します。
};
listData.updateRec = function(obj) { //データ行を削除 関数 DelObj(obj) {
for (var i = 0; i
for (var i = 0; i
listData[i] = obj;
休憩
};
//パーソナリティをキャンセルするかどうかを検出するグローバル変数を定義します
var isCancelUpdate = false;
// 3 つのテキスト入力コントロールを定義します
var InputPerName = document.createElement("input");
InputPerName.type = "テキスト"
var InputMoney = document.createElement("input");
InputPerName.type = "テキスト"
var InputDate = document.createElement("input");
InputPerName.type = "テキスト"
var SeleteOrg = document.createElement("select");
listData.delRecById = 関数 (id) {
for (var i = 0; i
//消去
1. この ID の位置から開始し、後ろのすべての要素を 1 つの
に移動します。
最後の要素が繰り返されます、それはクリアする必要があります
for (var j = i; j
//入力テキストボックスにテキストを変更します
function txtToInput(tdName, inputName) {
tdName.setAttribute("oldValue", tdName.innerHTML);//まず元のコンテンツを保存し、キャンセルされた場合は復元します
inputName.value = tdName.innerHTML;
tdName.appendChild(inputName);
tdName.removeChild(tdName.firstChild);
関数 txtToSelect(tdName, selObj) {
tdName.appendChild(selObj);tdName.removeChild(tdName.firstChild);
selObj.value = tdName.getAttribute("orgId");
function selectorText(tdName) {
var orid = SeleteOrg.value;
var orgName = listOrgs.getOrgsById(orid).comName;
// tdName.setAttribute("orgId", SeleteOrg.value);
tdName.innerHTML = orgName;
//入力をテキストに変換し直します
function InputToTxt(tdName, inputName) {
//「キャンセル」をクリックした場合
If (isCancelUpdate) {
tdName.innerHTML = tdName.getAttribute("oldValue");
// クリックして変更を確認します
tdName.innerHTML = inputName.value;
//選択コントロールをテキストに戻します
関数 seleToTxt(tdName, selName) {
// tdName.appendChild(selName);
var orgId = SeleteOrg.value;
// 前の
を削除します
tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName;
// 変更をキャンセル
関数 CancelUp(obj) {
IScanceelupDate = TRUE // クリックしてキャンセルします
doCancel(obj);
isCancelUpdate = false;
function doCancel(obj) {
var trCur = obj.parentElement.parentElement;
var tds = trCur.childNodes;
//元の td (属性に保存) の下のすべての値を使用します
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>";
// isCancelUpdate = false;
//キャンセルが成功したことを確認したら、trCur を null に設定します
trCur = null;
var trCur = null;
関数 UpObj(obj) {
If (trCur != null) {
// 編集中であることを説明し、変更をキャンセルします
iscancelupdate = true;
//その行の編集をキャンセルします
doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild、これは前の行
の
の変更です。
// 現在の行を取得します
trCur = obj.parentElement.parentElement;
var tds = trCur.childNodes;
//ドナー入力変更
txtToInput(tds[1], InputPerName);
//額
txtToInput(tds[3], InputMoney);
//寄付日
txtToInput(tds[4], InputDate);
//プルダウンしてユニットを選択します
txtToSelect(tds[2], SeleteOrg);
//リンクを変更してキャンセルします
tds[5].innerHTML = "OK キャンセル< ;/a>";
// 変更を確認
関数 doUpObj(obj) {
isCancelUpdate = false;
trCur = obj.parentElement.parentElement;
//1. 配列
内の対応するレコードを変更します。
var rec = { "id": trCur.childNodes[0].innerHTML, "perName": trCur.childNodes[1].childNodes[0].value, "orgId": trCur.childNodes[2].childNodes[0] .value, "お金": trCur.childNodes[3].childNodes[0].value, "日付": trCur.childNodes[4].childNodes[0].value };
//ListData 内の対応するレコードを変更するメソッドを呼び出します
listData.updateRec(rec);
//2. テーブル内のレコードを変更します
InputToTxt(trCur.childNodes[1], InputPerName);
seleToTxt(trCur.childNodes[2], SeleteOrg);
InputToTxt(trCur.childNodes[3], InputMoney);
InputToTxt(trCur.childNodes[4], InputDate);
trCur.childNodes[5].innerHTML = "削除 ";
//trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value);
//変更が成功したことを確認したら、trCur を null に設定します
trCur = null;
}
// 配列内の対応する配列を削除
//1. 選択された行を取得します
var curTr = obj.parentElement.parentElement;
//2. 最初の列から id の値を取得します
var delId = curTr.cells[0].innerHTML;
// window.alert(delId);
//3. ID (配列内の listData) に基づいてレコードを削除します
listData.delRecById(delId);
//4. テーブルビューに表示されている行を削除します
curTr.parentElement.removeChild(curTr);
}
関数 gel(id) {
return document.getElementById(id);
//1. ユニット名のバインディングをクエリします。selEle は次のとおりです: selet 要素ノード
関数 LoadDataList() {
//for (var i = 0; i
ShowPage();
}
関数 addRow(obj) {
var trnew = gel("tbList").insertRow(-1);
var tdnew = trnew.insertCell(-1);
tdnew.innerHTML = obj.id;
trnew.insertCell(-1).innerHTML = obj.perName;
}
window.onload = function() {
//バインディングクエリ
LoadOrgList(gel("selSearchOrg"));
//寄付の受取人をバインド
LoadOrgList(gel("selAddOrg"));
LoadOrgList(SeleteOrg);
//テーブルと listData をバインド
LoadDataList();
//イベントを新しいボタンにバインドします
gel("btnAdd").onclick = function() {
If ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("txtDate").value)))) {
alert("入力を空にすることはできません");
//1. 入力コンテンツを取得し、それをオブジェクトにパッケージ化します (listData 形式に従って)
var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel(" txtDate").value };
//2. listData 配列に追加します
var res = listData.addRec(arr);
//3. テーブルに表示します
var trnew = gel("tbList").insertRow(-1);
印刷、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 in in、in、in、in、in、... in、、 - in、...
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になるように
not "-Trnew.insertcell（-1）.innerhtml = res.date;
trnew.insertCell(-1).innerHTML = "削除 変更";
};
//イベントをクエリボタンにバインドします
gel("btnSearch").onclick = function () {
If (gel("selSearchOrg").value == -1) {
//1. クエリ対象の寄付されたユニットの orgid を取得します
var orgId = gel("selSearchOrg").value;
//2. ListData 配列の orgid に基づいてクエリするメソッドを定義し、ここで呼び出します
var arrRes = listData.queryByOrId(orgId);
//3. 古いテーブル データを表示から削除し、必ず表示を下から上にクリアしてください
var trs = gel("tbList").rows;
for (var j = trs.length-1; j>0; j--) {
gel("tbList").deleteRow(j);
//4. 新しいデータの表示
for (var i = 0; i
//イベントを前のページにバインドします
gel("btnprePage").onclick = function() {
If (pageNow > 1) {
今すぐページ
showPage();
alert("すでに最初のページです!")
};
//イベントを次のページにバインドします
gel("btnnextPage").onclick = function () {
If(pageNow
showPage();
alert("最後のページです!");
};
};
var pageNow = 1;
var pageSize = 5;
関数 showPage() {
var trs = gel("tbList").rows;
for (var j = trs.length - 1; j > 0; j--) {
gel("tbList").deleteRow(j);
//1. pageNow と pageSize
に基づいて配列を返します。
var res = listData.fenyeQuery(pageNow, pageSize);
for (var i = 0; i
＆lt; select id = "selsearchorg"＆gt; ＆lt; option value = "-1"＆gt; - 選択 - ＆lt;/option＆gt;
捐赠人：
受捐单位：
金额：
受捐日期：
| 序号 | 捐赠人 | 受捐单位 | 金额 | 受捐日期間 | 操作 |