Dan semoga di tahun 2012 semua resolusi kalian yang "baik" tercapai amin ;) .
Kalau resolusi saya sih masih seputar IT =D, yaitu jadi software engineer and crafter, bukan cuman jadi web developer.
Tapi sekarang masih ketemunya itu, well keep doing the best anyway. =D
Kesempatan ini saya mau share membuat sebuah grid form di html dengan menggunakan javascript murni tanpa bantuan jquery, extJs. Alhasil ya masih banyak koreksi juga.
Fungsi nya banyak sekali untuk grid form, selain user friendly, menurut para Web site performance tuner, penggunaan javascript yang baik dapat membantu interaksi antara client dengan meminmalir penggunaan resouce koneksi jaringan dan server.
Mungkin content yang satu ini akan saya jadi acuan saya untuk isi blog berikutnya. Saat ini saya buat dulu interface user nya, next saya akan coba untuk koneksikan dengan mySQL dan Ajax, dan mungkin juga sampai report generating nya dalam bentuk PDF dan Spreadsheet. So keep up to date di blog saya ya. ;)
Okay, now lets check this out..
Ini Bentuk Outputnya...
Ketika di klik dua kali di baris yang kosong maka dia akan otomatis menambahkan baris baru =D
Jika pada baris yang sama kita mengklik kolom yang berbeda maka kolom yang sebelumnya berupa input akan berubah otomatis
Dan ini snapshop ketika kita ingin meng edit salah satu baris yang sudah ada nilainya..
Dan ini adalah posisi ketika kita mungkin sudah selesai mengedit grid form ini..
Kita buat file index.php dengan berisikan baris kode ini.
<html id="HTMLZ">
<head>
<title>Ajax Dua</title>
<link rel="StyleSheet" href="styles/styles.css" type="text/css"/>
<link rel="Shortcut Icon" href="images/titleLogo.jpg" type="image/x-icon" style="min-width:80px;height:50px"/>
<script type="text/javascript" lang="JavaScript">
<script type="text/javascript" lang="JavaScript">
var myInit = "";
var gRHead = new Array();
var newRowNumb = 0;
var exceptionPart = new Array();
var applyRow = new Object();
var clLength = 0;
var rCounter = 0;
subChildDblClick(e){
if(!e) var e = window.target;
var targ = e.srcElement || e.target;
var supChild = targ.parentNode;
var supOrder = supChild.dOrder;
var contRows = document.getElementsByName("ContentRow");
var cRLength = contRows.length;
if(targ.id == "cellContentNo") return false;
var dVal = targ.innerHTML;
earlyDisplayGrid();
if(supChild.id == "ContentRow"){
supChild.style.marginTop = "6px";
supChild.style.marginBottom = "6px";
}
var dWidth = parseInt(document.defaultView.getComputedStyle(targ,null).getPropertyValue("width"));
targ.style.backgroundColor = "white";
var inpElem = document.createElement("input");
targ.removeChild(targ.childNodes[0]);
dVal = dVal.replace(/ /g, " ");
inpElem.value = dVal;
inpElem.style.width = dWidth + "px";
inpElem.style.height = "17px";
inpElem.style.top = "0px";
inpElem.style.border = "1px solid #000000";
inpElem.style.font = "10px normal Verdana,Arial,Helvetica,sans-serif";
inpElem.name = "GridInput";
targ.appendChild(inpElem);
if(supChild.dOrder == cRLength - 1 + newRowNumb){
var matchEnd = "yes";
var dNew = createNewContentRow(cRLength);
document.getElementById("Container").appendChild(dNew);
if(applyRow[supOrder].childNodes[0].innerHTML == undefined){
applyRow[supOrder].childNodes[1].innerHTML = (rCounter - 1) + ".";
}
else{
applyRow[supOrder].childNodes[0].innerHTML = (rCounter - 1) + ".";
}
applyRow[cRLength - 1 + newRowNumb] = dNew;
}
}
subChildOver(e){
if(!e) var e = window.target;
var targ = e.srcElement || e.target;
var inputAlready = (!targ.childNodes[0]) ? "yes" : "no";
if(inputAlready == "yes"){
// parNode.style.marginTop = "1px";
}else{
targ.style.backgroundColor = "red";
}
}
subChildOut(e){
if(!e) var e = window.target;
var targ = e.srcElement || e.target;
var inputAlready = (!targ.childNodes[0]) ? "yes" : "no";
if(inputAlready == "yes"){
// parNode.style.marginTop = "1px";
}else{
targ.style.backgroundColor = "#008866";
}
}
init(){
var cRow = document.getElementsByName("ContentRow");
var cRowLength = cRow.length;
for(var i = 0; i < cRowLength; i++){
cRow[i].dOrder = i;
var subChild = cRow[i].childNodes;
var subChildLength = subChild.length;
for(var j = 0; j < subChildLength; j++)
{
if(subChild[j].className != undefined){
subChild[j].onmouseover = subChildOver;
subChild[j].onmouseout = subChildOut;
subChild[j].ondblclick = subChildDblClick;
clLength++;
}
}
applyRow[i] = cRow[i];
rCounter++;
}
var hRow = document.getElementById("ContentRow");
var cHead = hRow.childNodes;
var counter = 0;
this.ondblclick = bodyOnDblClick;
myInit = "Initialized";
}
bodyOnDblClick(e){
if(!e) var e = window.target;
var targ = e.srcElement || e.target;
var dId = targ.id;
if(dId == "TestBody" || dId == "HTMLZ")
{
earlyDisplayGrid();
}
}
earlyDisplayGrid(){
var contRows = document.getElementsByName("ContentRow");
var cRLength = contRows.length;
var dContainer = document.getElementById("Container");
for(var i = 0; i < rCounter; i++){
applyRow[i].style.marginTop = "0px";
applyRow[i].style.marginBottom = "0px";
var aRCLength = applyRow[i].childNodes.length;
for(var j = 0; j < aRCLength; j++){
var aRC = applyRow[i].childNodes[j];
if(aRC.className != undefined ){
var aRCComp = applyRow[i].childNodes[j].childNodes[0];
var aRCName = aRCComp.nodeName;
var aRCVal = "";
if(aRCName == "INPUT"){
aRCVal = aRCComp.value;
applyRow[i].childNodes[j].removeChild(aRCComp);
}else{
aRCVal = applyRow[i].childNodes[j].innerHTML;
}
if(aRCVal.replace(/\s+/g, "") == ""){
aRCVal = " ";
}
applyRow[i].childNodes[j].innerHTML = aRCVal;
}
}
}
}
createNewContentRow(lastInd){
lastInd = lastInd + newRowNumb;
var newDiv = document.createElement("div");
newDiv.id = "ContentRow";
newDiv.className = "ContentRow";
newDiv.name = "ContentRow";
newDiv.dOrder = lastInd;
var dId = new Array("cellContentNo", "cellContentNamaNegara", "cellContentIbuKota",
"cellContentNamaPresiden", "cellContentBentuk", "cellContentJenis");
for(var i = 0; i < dId.length; i++){
var newSubDiv = document.createElement("div");
newSubDiv.className = "cellContent";
newSubDiv.name = "cellContent";
newSubDiv.id = dId[i];
newSubDiv.onmouseover = subChildOver;
newSubDiv.onmouseout = subChildOut;
newSubDiv.ondblclick = subChildDblClick;
newSubDiv.innerHTML = " ";
clLength = (i != 0) ? clLength + 1 : clLength;
newDiv.appendChild(newSubDiv);
}
newRowNumb++;
rCounter++;
return newDiv;
}
</script>
</head>
<body onLoad="init(this)" id="TestBody" style="border:1px solid #000000;height:590px">
< id="Title" class="Title" name="Title" id="Title">Test Grid Form Nama Beberapa Negara ASEAN</div>
< id="Container" class="Container" name="Container" id="Container">
< id="HeadRow" class="HeadRow" name="HeadRow">
< id="cellHeadNo" class="cellHead" name="cellHead">No.</div>
< id="cellHeadNamaNegara" class="cellHead" name="cellHead">Nama Negara</div>
< id="cellHeadIbuKota" class="cellHead" name="cellHead">Ibu Kota</div>
< id="cellHeadNamaPresiden" class="cellHead" name="cellHead">Presiden/Perdana Menteri</div>
< id="cellHeadBentuk" class="cellHead" name="cellHead">Bentuk Pemerintahan</div>
< id="cellHeadJenis" class="cellHead" name="cellHead">Mata Uang</div>
</div>
< id="ContentRow" class="ContentRow" name="ContentRow">
< id="cellContentNo" class="cellContent" name="cellContentNo">1.</div>
< id="cellContentNamaNegara" class="cellContent" name="cellContent">Indonesia</div>
< id="cellContentIbuKota" class="cellContent" name="cellContent">DKI Jakarta</div>
< id="cellContentNamaPresiden" class="cellContent" name="cellContent">Susilo Bambang Yudoyono</div>
< id="cellContentBentuk" class="cellContent" name="cellContent">Republik</div>
< id="cellContentJenis" class="cellContent" name="cellContent">Rupiah</div>
</div>
< id="ContentRow" class="ContentRow" name="ContentRow">
< id="cellContentNo" class="cellContent" name="cellContentNo">2.</div>
< id="cellContentNamaNegara" class="cellContent" name="cellContent">Malaysia</div>
< id="cellContentIbuKota" class="cellContent" name="cellContent">Kuala Lumpur</div>
< id="cellContentNamaPresiden" class="cellContent" name="cellContent">Najib Razak</div>
< id="cellContentBentuk" class="cellContent" name="cellContent">Kerajaan</div>
< id="cellContentJenis" class="cellContent" name="cellContent">Ringgit</div>
</div>
< id="ContentRow" class="ContentRow" name="ContentRow">
< id="cellContentNo" class="cellContent" name="cellContentNo">3.</div>
< id="cellContentNamaNegara" class="cellContent" name="cellContent">Thailand</div>
< id="cellContentIbuKota" class="cellContent" name="cellContent">Bangkok</div>
< id="cellContentNamaPresiden" class="cellContent" name="cellContent">Yingluck Shinawatra</div>
< id="cellContentBentuk" class="cellContent" name="cellContent">Kerajaan</div>
< id="cellContentJenis" class="cellContent" name="cellContent">Bath</div>
</div>
< id="ContentRow" class="ContentRow" name="ContentRow">
< id="cellContentNo" class="cellContent" name="cellContentNo">4.</div>
< id="cellContentNamaNegara" class="cellContent" name="cellContent">Filipina</div>
< id="cellContentIbuKota" class="cellContent" name="cellContent">Manila</div>
< id="cellContentNamaPresiden" class="cellContent" name="cellContent">Benigno S. Aquino III</div>
< id="cellContentBentuk" class="cellContent" name="cellContent">Republik</div>
< id="cellContentJenis" class="cellContent" name="cellContent">Peso</div>
</div>
< id="ContentRow" class="ContentRow" name="ContentRow">
< id="cellContentNo" class="cellContent" name="cellContentNo">5.</div>
< id="cellContentNamaNegara" class="cellContent" name="cellContent">Brunai Darusalam</div>
< id="cellContentIbuKota" class="cellContent" name="cellContent">Bandar Sri Begawan</div>
< id="cellContentNamaPresiden" class="cellContent" name="cellContent">Hassanal Bolkiah</div>
< id="cellContentBentuk" class="cellContent" name="cellContent">Kesultanan</div>
< id="cellContentJenis" class="cellContent" name="cellContent">Brunei Dollar</div>
</div>
< id="ContentRow" class="ContentRow" name="ContentRow">
< id="cellContentNo" class="cellContent" name="cellContentNo">6.</div>
< id="cellContentNamaNegara" class="cellContent" name="cellContent">Vietnam</div>
< id="cellContentIbuKota" class="cellContent" name="cellContent">Hanoi</div>
< id="cellContentNamaPresiden" class="cellContent" name="cellContent">Truong Tan Sang</div>
< id="cellContentBentuk" class="cellContent" name="cellContent">Republik Sosialis</div>
< id="cellContentJenis" class="cellContent" name="cellContent">Dong</div>
</div>
< id="ContentRow" class="ContentRow" name="ContentRow">
< id="cellContentNo" class="cellContent" name="cellContentNo">7.</div>
< id="cellContentNamaNegara" class="cellContent" name="cellContent">Singapura</div>
< id="cellContentIbuKota" class="cellContent" name="cellContent">Singapura</div>
< id="cellContentNamaPresiden" class="cellContent" name="cellContent">Tony Tan Yeng Kam</div>
< id="cellContentBentuk" class="cellContent" name="cellContent">Republik</div>
< id="cellContentJenis" class="cellContent" name="cellContent">Dolar Singapura</div>
</div>
< id="ContentRow" class="ContentRow" name="ContentRow">
< id="cellContentNo" class="cellContent" name="cellContentNo"> </div>
< id="cellContentNamaNegara" class="cellContent" name="cellContent"> </div>
< id="cellContentIbuKota" class="cellContent" name="cellContent"> </div>
< id="cellContentNamaPresiden" class="cellContent" name="cellContent"> </div>
< id="cellContentBentuk" class="cellContent" name="cellContent"> </div>
< id="cellContentJenis" class="cellContent" name="cellContent"> </div>
</div>
</div>
</body>
</html>
"style.css" ini adalah file css nya. Untuk file ini di save pada sebuah folder yang kita buat dengan nama folder "styles"..
.ContentRow, .Title, .HeadRow, .cellContent, .cellHead, .Container{
border:1px solid #000000;
}
.Title, .Container{
margin:auto;
margin-bottom:2px;
margin-top:2px;
padding-bottom:5px;
}
.Container{
width:800px;
min-height:160px;
background:#424243;
}
.Title{
font:bold 14px Verdana,Arial,Helvetica,sans-serif;
width:600px;
height:20px;
text-align:center;
padding-top:5px;
}
.HeadRow{
float:left;
margin:1px 0px 0px 1px;
}
.cellHead{
border:1px solid #FFFFFF;
float:left;
margin:1px 0px 0px 1px;
}
.HeadRow{
width:795px;
height:17px;
}
.ContentRow{
width:795px;
height:14px;
float:left;
}
.HeadRow, .ContentRow{
background:#000033;
margin-left:1px;
}
.cellContent{
width:100px;
font:10px normal Verdana,Arial,Helvetica,sans-serif;
float:left;
margin-left:1px;
height:14px;
}
.cellHead{
font:11px bold Verdana,Arial,Helvetica,sans-serif;
height:15px;
}
.cellHead, .cellContent{
background:#008866;
color:#fdfdf9;
width:100px;
padding-left:3px;
}
.ContentRow{
margin-top:0px;
}
div#cellHeadNo , div#cellContentNo{
width:21px;
}
div#cellHeadNamaNegara, div#cellContentNamaNegara, div#cellHeadNamaPresiden,
div#cellContentNamaPresiden, div#cellContentIbuKota, div#cellHeadIbuKota{
width:141px;
}
div#cellHeadBentuk, div#cellContentBentuk{
width:151px;
}
div#cellHeadJenis, div#cellContentJenis{
width:161px;
}
div#cellContentNo{
text-align:center;
}
