Home >Web Front-end >JS Tutorial >dhDataGrid Ver2.0.0 code of javascript_form effects

dhDataGrid Ver2.0.0 code of javascript_form effects

WBOYOriginal: 2016-05-16 19:11:271187browse

Updated for the previous version of dhDataGrid Ver1.0.0!

1. The fixed mode of the title bar and left sidebar is updated, and the expression mode is cancelled;

2. The sorting mode is updated, and it also supports the sorting of numbers, characters, dates, mixed numbers and characters, and Chinese characters;

3. Support skin change, you can customize the control style yourself;

4. Reserve [double-click], [right-click] functions;

5. Support IE, FF;

CSS:

/*dhdatagrid block style*/
#dhdatagrid {position:relative;width:500px;height:200px;background:white;margin :0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;}
/*dhdatagrid table global style*/
#dhdatagrid table {table-layout:fixed; margin:0px;}
#dhdatagrid table td {height:18px;cursor:default;font-size:12px;font-family:verdana;overflow:hidden;white-space:nowrap;text-indent:2px;border -right:1px solid buttonface;border-bottom:1px solid buttonface;}
#dhdatagrid table td .arrow {font-size:8px;color:#808080;}
#dhdatagrid table .lastdata {border-right :none;}
#dhdatagrid table .column {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid # 404040;border-left:1px solid #fff;}
#dhdatagrid table .over {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040 ;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .sortdown {width:120px;cursor:default;background:buttonface;border-right:1px solid #ffffff; border-bottom:1px solid #ffffff;border-left:1px solid #404040;border-top:1px solid #404040;position:relative;left:1px;}
#dhdatagrid table .dataover {background:#FAFAFA; }
#dhdatagrid table .firstcolumn {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border- bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .lastcolumn {background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border- bottom:1px solid #404040;border-left:1px solid #fff;}
/*dhdatagrid selected row style*/
#dhdatagrid table .selectedrow {background:highlight;color:white;}
/*dhdatagrid header style*/
#dhdatagrid #titlecolumn {width:100%;position:absolute;top:0px;left:0px;z-index:3;}
/*dhdatagrid left column style* /
#dhdatagrid #slidecolumn {width:30px;position:absolute;top:0px;left:0px;z-index:2;}
#dhdatagrid #slidecolumn td {width:30px;text-indent:0px ;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*dhdatagrid content table body style*/
#dhdatagrid #datacolumn {width:100%;position:absolute;top:0px;left:0px;}
/*dhdatagrid origin style*/
# dhdatagrid #zero {width:30px;height:18px;margin:0px;padding:0px;position:absolute;top:0px;left:0px;z-index:10;background:buttonface;border-top:1px solid #fff ;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;text-align:center;font-size:10px;color:#A19F92;}

JS:

function dhdatagrid(){
//author:dh20156;
this.callname = "dhdg";
this.width = 500;
this.height = 200;
this.rid = "dhdatagrid";
this.columns = [];
this.data = [];
this.dblclick_fun = function(){}
this.contextmenu_fun = function(){}
this.parentNode = document.body;

var dh = this;
var framediv = null;
var zerobj = null;
var leftobj = null;
var titleobj = null;
var dataobj = null;
var hbar = null;
var vbar = null;
var bgbar = null;

//Change the initial position of the column width
var ml = 0;
//Change the initial width of the column width object
var ow = 0;
//Change the column width object
var tdobj = null;
//Current selection Fixed row index
var nowrow = null;
//Whether to change the vertical scroll bar position
var changeposv = true;

this.init = function(){
//init the data initial data
var dgc = "";
if(this.columns.length>0){
dgc = "

";
for(var cc=0;cc dgc = "" this.columns[cc] " ";
}
dgc = " ";
}

var dgs = "";
var dgd = "";
if(this.data.length> 0){
//First column
dgs = " ";
for(var r=0;r dgs = "" (r 1) "";
dgd = " ";
for( var c=0;c dgd = "" this.data[r][c] "";
}
dgd = " ";
}
if(dgc==""){
dgc = " ";
for(var dc=0;dc dgc = "Expr" (dc 1) " ";
}
dgc = " ";
}
}

//dhdatagrid frame frame
var dgframe = document.createElement(" DIV");
dgframe.id = this.rid;
dgframe.onmousedown = function(e){e=e||window.event;getrow(e);}
dgframe.onmousemove = function (e){e=e||window.event;rsc_m(e);}
if(document.attachEvent){
document.attachEvent("onmouseup",rsc_u);
}else{
document.addEventListener("mouseup",rsc_u,false);
}
dgframe.oncontextmenu = function(){return false}
dgframe.onselectstart = function(){return false}
ae(dgframe);

//dhdatagrid zero point zero point
var dgzero = "

"

//dhdatagrid slidecolumn first column
var dgslide = "" dgs "

";

//dhdatagrid column title bar
var dgcolumn = "" dgc "

";

//dhdatagrid data data
var dgdata = "" dgc dgd "

";

//dhdatagrid hbar 水平滚动条
var dghbar = document.createElement("DIV");
dghbar.id = "hbar";
dghbar.style.position = "absolute";
dghbar.style.width = "100%";
dghbar.style.height = "17px";
dghbar.style.top = this.height-17;
dghbar.style.overflowX = "auto";
dghbar.style.zIndex = "10";
dghbar.onscroll = function(){scrh();}
dghbar.innerHTML = "

";

//dhdatagrid vbar 垂直滚动条
var dgvbar = document.createElement("DIV");
dgvbar.id = "vbar";
dgvbar.style.position = "absolute";
dgvbar.style.width = "17px";
dgvbar.style.height = "100%";
dgvbar.style.left = this.width-17;
dgvbar.style.overflowY = "auto";
dgvbar.style.zIndex = "10";
dgvbar.onscroll = function(){scrv();}
dgvbar.innerHTML = "

";

//dhdatagrid bgbar 滚动条背景
var dgbgbar = document.createElement("DIV");
dgbgbar.id = "bgbar";
dgbgbar.style.background = "buttonface";
dgbgbar.style.position = "absolute";
dgbgbar.style.width = "100%";
dgbgbar.style.height = "17px";
dgbgbar.style.top = this.height-17;
dgbgbar.style.overflowX = "auto";
dgbgbar.style.zIndex = "9";
dgbgbar.style.display = "none";
dgbgbar.innerHTML = " ";

//appendChild
dgframe.innerHTML = dgzero dgslide dgcolumn dgdata;
dgframe.appendChild(dghbar);
dgframe.appendChild(dgvbar);
dgframe.appendChild(dgbgbar);

this.parentNode.appendChild(dgframe);

if(document.attachEvent){
 document.attachEvent("onkeydown",updown);
}else{
 document.addEventListener("keydown",updown,false);
}

framediv = dgframe;
zerobj = document.getElementById("zero");
leftobj = document.getElementById("slidecolumn");
titleobj = document.getElementById("titlecolumn");
dataobj = document.getElementById("datacolumn");
hbar = dghbar;
vbar = dgvbar;
bgbar = dgbgbar;

var btt = getCurrentStyle(framediv,"borderTopWidth");
var btr = getCurrentStyle(framediv,"borderRightWidth");
var btb = getCurrentStyle(framediv,"borderBottomWidth");
var btl = getCurrentStyle(framediv,"borderLeftWidth");
var fh = getCurrentStyle(framediv,"height");
var zh = getCurrentStyle(zerobj,"height");
var zbt = getCurrentStyle(zerobj,"borderTopWidth");
var zbb = getCurrentStyle(zerobj,"borderBottomWidth");

if(document.all){
 vbar.style.left = parseInt(vbar.style.left)-parseInt(btr)-parseInt(btl);
}else{
 framediv.style.height = parseInt(fh)-parseInt(btb)-parseInt(btt);
 zerobj.style.height = parseInt(zh)-parseInt(zbb)-parseInt(zbt);
}

hbar.style.top = parseInt(hbar.style.top)-parseInt(btb)-parseInt(btt);
bgbar.style.top = parseInt(bgbar.style.top)-parseInt(btb)-parseInt(btt);
}
function getCurrentStyle(oElement, sProperty) {
if(oElement.currentStyle){
 return oElement.currentStyle[sProperty];
}else if(window.getComputedStyle){
 sProperty = sProperty.replace(/([A-Z])/g, "-$1").toLowerCase();
 return window.getComputedStyle(oElement, null).getPropertyValue(sProperty);
}else{
 return null;
}
}
//设置块滚动条
this.setwh = function(){
hbar.style.display = "block";
vbar.style.display = "block";
hbar.childNodes[0].style.width = dataobj.offsetWidth;
vbar.childNodes[0].style.height = dataobj.offsetHeight;
if(hbar.childNodes[0].offsetWidth hbar.style.display = "none";
}else{
 hbar.style.display = "block";
}
if(vbar.childNodes[0].offsetHeight vbar.style.display = "none";
}else{
 vbar.style.display = "block";
}
if(hbar.childNodes[0].offsetWidth>hbar.offsetWidth && vbar.childNodes[0].offsetHeight>vbar.offsetHeight && changeposv){
 bgbar.style.display = "block";
 hbar.style.width = hbar.offsetWidth-17;
 vbar.style.height = vbar.offsetHeight-17;
 vbar.childNodes[0].style.height = vbar.childNodes[0].offsetHeight 17;
 changeposv = false;
}
if(hbar.childNodes[0].offsetWidth bgbar.style.display = "none";
 hbar.childNodes[0].style.width = 0;
 hbar.style.width = hbar.offsetWidth 17;
 vbar.style.height = vbar.offsetHeight 17;
 changeposv = true;
 if(vbar.offsetHeight-dataobj.offsetHeight>dataobj.offsetTop && document.all){
 leftobj.style.top = leftobj.offsetTop 17;
 dataobj.style.top = dataobj.offsetTop 17;
 }
}
}

//鼠标滚轮，列表滚动事件
function mwEvent(e){
e=e||window.event;
if(e.wheelDelta0){
 vbar.scrollTop = 18;
}else {
 vbar.scrollTop -= 18;
}
}
function ae(obj){
if(document.attachEvent){
 obj.attachEvent("onmousewheel",mwEvent);
}else{
 obj.addEventListener("DOMMouseScroll",mwEvent,false);
}
}

//滚动条事件
function scrv(){
leftobj.style.top = -(vbar.scrollTop);
dataobj.style.top = -(vbar.scrollTop);
}

function scrh(){
titleobj.style.left = -(hbar.scrollLeft);
dataobj.style.left = -(hbar.scrollLeft);
}

//选择行
function getrow(e){
e=e||window.event;
var esrcobj = e.srcElement?e.srcElement:e.target;
if(esrcobj.parentNode.tagName=="TR"){
 var epobj = esrcobj.parentNode;
 var eprowindex = epobj.rowIndex;
 if(eprowindex!=0){
 if(nowrow!=null){
 dataobj.rows[nowrow].className = "";
 }
 dataobj.rows[eprowindex].className = "selectedrow";
 nowrow = eprowindex;
 }
}
}

//更改列宽
this.rsc_d = function(e,obj){
var px = document.all?e.offsetX:e.layerX-obj.offsetLeft;
if(px>obj.offsetWidth-6 && px e=e||window.event;
 obj=obj||this;
 ml = e.clientX;
 ow = obj.offsetWidth;
 tdobj = obj;
 if(obj.setCapture){
 obj.setCapture();
 }else{
 e.preventDefault();
 }
}else{
 if(nowrow!=null){
 dataobj.rows[nowrow].className = "";
 }
 if(obj.getAttribute("sort")==null){
 obj.setAttribute("sort",0);
 }
 var sort = obj.getAttribute("sort");
 if(sort==1){
 dgsort(obj,true);
 obj.setAttribute("sort",0);
 }else{
 dgsort(obj,false);
 obj.setAttribute("sort",1);
 }
 obj.className = "sortdown";
}
}
this.mouseup = function(obj){
obj.className = "over";
}
function rsc_m(e){
if(tdobj!=null){
 e=e||window.event;
 var newwidth = ow-(ml-e.clientX);
 if(newwidth>5){
 tdobj.style.width = newwidth;
 dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth;
 }else{
 tdobj.style.width = 5;
 dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5;
 }
 dh.setwh();
 scrh();
}
}
function rsc_u(e){
if(tdobj!=null){
 e=e||window.event;
 var newwidth = ow-(ml-e.clientX);
 if(newwidth>5){
 tdobj.style.width = newwidth;
 dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth;
 }else{
 tdobj.style.width = 5;
 dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5;
 }
 if(tdobj.releaseCapture){
 tdobj.releaseCapture();
 }
 ml = 0;
 ow = 0;
 tdobj = null;
}
dh.setwh();
scrh();
}

this.cc = function(e,obj){
var px = document.all?e.offsetX:e.layerX-obj.offsetLeft;
if(px>obj.offsetWidth-6 && px obj.style.cursor = "col-resize";
}else{
 obj.style.cursor = "default";
}
}

this.over = function(obj){
obj.className = "over";
}

this.out = function(obj){
obj.className = "column";
}

this.dataover = function(obj){
if(obj.rowIndex!=nowrow){
 obj.className = "dataover";
}
}

this.dataout = function(obj){
if(obj.rowIndex!=nowrow){
 obj.className = "";
}
}

//键盘Up & Down事件
function updown(e){
e=e || window.event; e=e.which || e.keyCode;
var rl = dh.data.length;
switch(e){
 case 38://Up;
 if(nowrow!=null && nowrow>1){
 vbar.scrollTop -= 18;
 dataobj.rows[nowrow].className = "";
 nowrow -= 1;
 dataobj.rows[nowrow].className = "selectedrow";
 };
 break;
 case 40://Down;
 if(nowrow!=null && nowrow vbar.scrollTop = 18;
 dataobj.rows[nowrow].className = "";
 nowrow = 1;
 dataobj.rows[nowrow].className = "selectedrow";
 };
 break;
 default:break;
}
}

function dti(s){
var n = 0;
var a = s.match(/d /g);
for(var i=0;i if(a[i].length a[i] = "0" a[i];
 }
}
n = a.join("");
return n;
}

//排序
function dgsort(obj,asc){
var rl = dh.data.length;
var ci = obj.cellIndex;
var rowsobj = [];
for(var i=1;i rowsobj[i-1] = dataobj.childNodes[0].rows[i];
}
rowsobj.sort(function(trObj1,trObj2){
 if(!isNaN(trObj1.cells[ci].innerHTML.charAt(0)) && !isNaN(trObj2.cells[ci].innerHTML.charAt(0))){
 if(asc){
 return dti(trObj1.cells[ci].innerHTML)-dti(trObj2.cells[ci].innerHTML);
 }else{
 return dti(trObj2.cells[ci].innerHTML)-dti(trObj1.cells[ci].innerHTML);
 }
 }else{
 if(asc){
 return trObj1.cells[ci].innerHTML.localeCompare(trObj2.cells[ci].innerHTML);
 }else{
 return trObj2.cells[ci].innerHTML.localeCompare(trObj1.cells[ci].innerHTML);
 }
 }
 });
for(var i=0;i dataobj.childNodes[0].appendChild(rowsobj[i]);
}
for(var c=1;c obj.parentNode.cells[c].childNodes[1].innerHTML = "";
}
if(asc){
 obj.childNodes[1].innerHTML = "▲";
}else{
 obj.childNodes[1].innerHTML = "▼";
}
}
}

注： DEMO（演示）：http://www.jxxg.com/dh20156/dhdatagrid/
原文：http://blog.csdn.net/dh20156/archive/2007/02/08/1505050.aspx

另外一个封装的很简单的grid by 秦皇也爱JS
<script> var GridData = { title: ["姓名","性别","年龄","学历","特长"], type: [0,1,0,1,0], //编辑框类型 ŀ--textbox Ł---select order: [-1,-1,-1,-1,-1], //排序类型 Ł----升序 -1---降序 data: [["张三","男",27,"本科","足球"], ["YM","男",26,"本科","中锋"], ["McGrady","男",28,"博士","前锋"], ["James","男",25,"本科","小前锋"], ["Good","女",21,"高中","商品"], ["Fut","男",22,"本科","WAR3"], ["Keens","男",37,"高中","SC"], ["Gruby","女",32,"本科","SC"], ["Grrr","男",19,"硕士","SC"], ["Sky","男",22,"本科","WAR3"], ["Moon","男",25,"本科","WAR3"]] }; var 性别 = ["男", "女"]; var 学历 = ["高中", "本科", "硕士", "博士"]; function MyGrid(data, cnt){ MyGrid.backColor = "#fdfdfd"; MyGrid.hoverColor = "#edfae9"; MyGrid.clickColor = "#e1e6f1"; this.datas = data; this.container = cnt; this.table; this.curRow; this.curCell; this.editTools = [document.body.appendChild(document.createElement("input")),document.body.appendChild(document.createElement("select"))]; var CurGrid = this; this.load = function(){ //grid重画模块 /** 加载table **/ var tbStr = []; tbStr.push("<table cellspacing='1'><tr height='25'>"); for(var o in this.datas.title){ tbStr.push("<th>" + this.datas.title[o] + (this.datas.order[o]==1?"↑":"↓") + ""); } tbStr.push(""); for(var i in this.datas.data){ tbStr.push("<tr bgcolor=" + MyGrid.backColor + " height='25'>"); for(var j in this.datas.data[i]){ tbStr.push("<td>" + this.datas.data[i][j] + ""); } tbStr.push(""); } tbStr.push(""); this.container.innerHTML = tbStr.join(""); this.table = this.container.firstChild; /** 设置编辑工具 **/ this.editTools[0].onblur = function(){ CurGrid.curCell.removeChild(CurGrid.curCell.firstChild) CurGrid.curCell.appendChild(document.createTextNode(this.value)); if(isNaN(CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex])){ CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex] = this.value; }else{ CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex] = Number(this.value) } this.value = ""; this.style.display = "none"; } this.editTools[1].onblur = function(){ this.options.length = 0; this.style.display = "none"; } this.editTools[1].onchange = function(){ CurGrid.curCell.removeChild(CurGrid.curCell.firstChild) CurGrid.curCell.appendChild(document.createTextNode(this.value)); CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex] = this.value; this.options.length = 0; this.style.display = "none"; } /** 设置单元格 **/ for(var r=1; r<this.table.rows.length;r++){ this.table.rows[r].onmouseover = function(){ this.style.backgroundColor = MyGrid.hoverColor; } this.table.rows[r].onmouseout = function(){ if(CurGrid.curRow!=this) this.style.backgroundColor = MyGrid.backColor; else this.style.backgroundColor = MyGrid.clickColor; } for(var c=0;c<this.table.rows[r].cells.length;c++){ this.table.rows[r].cells[c].onclick = function(){ if(CurGrid.curRow) CurGrid.curRow.style.backgroundColor = MyGrid.backColor; CurGrid.curRow = this.parentNode; this.parentNode.style.backgroundColor = MyGrid.clickColor; } this.table.rows[r].cells[c].ondblclick = function(){ //alert("( " + this.cellIndex + "," + this.parentNode.rowIndex + " ) " + this.firstChild.data); CurGrid.curCell = this; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.display = "block"; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.width = this.offsetWidth; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.height = this.offsetHeight; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.left = getAbsPos(this).leftx - CurGrid.container.scrollLeft; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.top = getAbsPos(this).topy - CurGrid.container.scrollTop; CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].focus(); if(CurGrid.datas.type[this.cellIndex] == 0){ CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].select(); }else if(CurGrid.datas.type[this.cellIndex] == 1){ CurGrid.loadSelect(CurGrid.datas.title[this.cellIndex]); } CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].value = this.firstChild.data; } } } for(var g=0; g<this.table.rows[0].cells.length;g++){ this.table.rows[0].cells[g].onclick = function(){ CurGrid.datas.order[this.cellIndex] = -CurGrid.datas.order[this.cellIndex]; CurGrid.sort(this.cellIndex, CurGrid.datas.order[this.cellIndex]); } } } this.sort = function(n, type){ //排序 this.datas.data = this.datas.data.sort(function(x,y){if (x[n]>y[n]){return type;}else if(x[n]<y[n]){return -type;}else{return 0;}}); this.load(); } this.delRow = function(){ //删除行 this.datas.data.splice(this.curRow.rowIndex-1, 1); this.table.deleteRow(this.curRow.rowIndex); } this.loadSelect = function(type){ //读取下拉框内容 var opts = this.editTools[1].options; for(var o in eval(type)){ var opt = document.createElement("option"); opt.value = opt.text = eval(type)[o]; opts.add(opt); } } } var grid; window.onload = loadGrid; function loadGrid(){ grid = new MyGrid(GridData, $("panel")); grid.load(); } function $(id){ return document.getElementById?document.getElementById(id):eval(id); } function getAbsPos(obj){ var objResult = new Object(); objResult.topy = obj.offsetTop; objResult.leftx = obj.offsetLeft; while( obj = obj.offsetParent){ objResult.topy += obj.offsetTop; objResult.leftx += obj.offsetLeft; } return objResult; } </script>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：It is recommended that you read the important JavaScript knowledge update_javascript skillsNext article：It is recommended that you read the important JavaScript knowledge update_javascript skills

See more

dhDataGrid Ver2.0.0 code of javascript_form effects

Related articles