dhDataGrid Ver1.0.0 이전 버전에 맞게 업데이트되었습니다!
1. 제목 표시줄과 왼쪽 사이드바의 고정 모드가 업데이트되고, 표현 모드가 취소됩니다.
2. 정렬 모드가 업데이트되고, 숫자 정렬도 지원됩니다. , 문자, 날짜, 혼합 숫자 및 문자
3. 스킨 변경을 지원하며 컨트롤 스타일을 직접 사용자 정의할 수 있습니다.
4. 마우스 오른쪽 버튼 클릭] 기능;
5. IE, FF 지원
CSS:
/*dhdatagrid 블록 스타일*/
#dhdatagrid :relative;width:500px;height:200px; background:white;margin :0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;}
/*dhdatagrid 테이블 전역 스타일*/
#dhdatagrid 테이블 {table-layout:fixed; 여백:0px;}
#dhdatagrid 테이블 td {height:18px;cursor:default;font-size:12px;font-family:verdana;overflow :hidden;white-space:nowrap;text-indent:2px;border -right:1px 단색 버튼면;border-bottom:1px 단색 버튼면;}
#dhdatagrid 테이블 td .arrow {font-size:8px;color: #808080;}
#dhdatagrid 테이블 .lastdata {border-right :none;}
#dhdatagrid 테이블 .column {폭:120px;cursor:default;배경:buttonface;border-top:1px solid #fff; border-right:1px solid #404040;border-bottom:1px solid # 404040;border-left:1px solid #fff;}
#dhdatagrid 테이블 .over {width:120px;cursor:default;배경:buttonface;border -top:1px solid #fff;border-right:1px solid #404040 ;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid 테이블 .sortdown {너비:120px;cursor :기본값;배경:버튼면;테두리-오른쪽:1px 솔리드 #ffffff; 테두리-하단:1px 솔리드 #ffffff;테두리-왼쪽:1px 솔리드 #404040;테두리-상단:1px 솔리드 #404040;위치:상대;왼쪽:1px ;}
#dhdatagrid 테이블 .dataover {배경:#FAFAFA }
#dhdatagrid 테이블 .firstcolumn {width:30px;text-indent:0px;text-align:center;배경:buttonface;border-top: 1px 단색 #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid 테이블 .lastcolumn {배경:buttonface;border-top: 1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
/*dhdatagrid 선택 행 스타일*/
#dhdatagrid 테이블 .selectedrow {배경:highlight;color:white;}
/*dhdatagrid 헤더 스타일*/
#dhdatagrid #titlecolumn {width:100%;position:absolute;top:0px;left:0px;z-index :3;}
/*dhdatagrid 왼쪽 열 스타일* /
#dhdatagrid #slidecolumn {width:30px;position:absolute;top:0px;left:0px;z-index:2;}
# dhdatagrid #slidecolumn td {너비:30px;text-indent:0px ;text-align:center;배경:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid # 404040;border-left:1px solid #fff;}
/*dhdatagrid 콘텐츠 테이블 본문 스타일*/
#dhdatagrid #datacolumn {width:100%;position:absolute;top:0px;left:0px;}
/*dhdatagrid 원본 스타일*/
# dhdatagrid #zero {width:30px;height:18px;margin:0px;padding:0px;position:absolute;top:0px;left:0px;z-index: 10;배경:버튼 페이스;테두리 상단:1px 솔리드 #fff ;테두리 오른쪽:1px 솔리드 #404040;테두리 하단:1px 솔리드 #404040;테두리 왼쪽:1px 솔리드 #fff;텍스트 정렬:가운데;글꼴- size:10px;color:#A19F92;}
JS:
function dhdatagrid(){
//author:dh20156; this.callname = "dhdg";
this.width = 500;
this.rid = "dhdatagrid"; this.data = [];
this.dblclick_fun = function(){}
this.contextmenu_fun = function(){}
this.parentNode = document.body;
var dh = this;
var framediv = null
var leftobj = null; titleobj = null;
var dataobj = null;
var vbar = null
var bgbar = null; 열 너비
var ml = 0;//열 너비 개체의 초기 너비 변경
var ow = 0
//열 너비 개체 변경
var tdobj = null;
//현재 선택 행 인덱스 고정
var nowrow = null
//세로 스크롤 막대 위치 변경 여부
varchangeposv = true; (){
//데이터 초기 데이터 초기화
var dgc = "";
if(this.columns.length>0){
dgc = "
";
for(var cc=0;cc
" this.columns[cc] " ";
} dgc = "
"; }
var dgs = "";
var dgd = "";
if(this.data.length> 0){ //첫 번째 열 dgs = "
for(var r=0;r
" (r 1) "
" dgd = "
for( var c=0;c ";
} dgd = " ");
"; if(dgc==""){ dgc = "
"; for(var dc=0;dc
Expr" (dc 1) ""; dgframe.onmousemove = 함수 (e){e=e||window.event;rsc_m(e);} } dgc = "
"; } }
//dhdatagrid 프레임 프레임
var dgframe = document.createElement(" DIV"); dgframe.id = this.rid; dgframe.onmousedown = function(e){e=e||window.event;getrow(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 영점 영점
var dgzero = "
"
//dhdatagrid Slidecolumn 첫 번째 열
var dgslide = "
";
//dhdatagrid 열 제목 표시줄
//dhdatagrid 데이터 데이터
var dgdata = "" dgs "
";
//dhdatagrid hbar 수평滚动条
var dghbar = document.createElement("DIV");
dghbar.id = "hbar";
dghbar.style.position = "절대";
dghbar.style.width = "100%";
dghbar.style.height = "17px";
dghbar.style.top = this.height-17; .style.overflowX = "자동";
dghbar.style.zIndex = "10";
dghbar.onscroll = function(){scrh();}
dghbar.innerHTML = "
//dhdatagrid vbar 垂直滚动条
var dgvbar = document.createElement("DIV");
dgvbar.id = "vbar";
dgvbar.style. 위치 = "절대";
dgvbar.style.width = "17px";
dgvbar.style.height = "100%" > 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 = "절대";
dgbgbar.style.width = "100%";
dgbgbar.style.height =
dgbgbar.style .top = this.height-17;
dgbgbar.style.overflowX = "자동";
dgbgbar.style.zIndex = "9";
dgbgbar.style.display = "없음"; > dgbgbar.innerHTML = " ";
//appendChild
dgframe.innerHTML = dgzero dgslide dgcolumn dgdata;
dgframe.appendChild(dghbar); 🎜> 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);
}
함수 getCurrentStyle(oElement, sProperty) {
if(oElement.currentStyle){
return oElement.currentStyle[sProperty];
}else if(window.getCompulatedStyle){
sProperty = sProperty.replace(/([A-Z])/g, "-$1").toLowerCase();
return window.getCompulatedStyle(oElement, null).getPropertyValue(sProperty);
}else{
null을 반환합니다.
}
}
//设置块滚动条
this.setwh = function(){
hbar.style.display = "block";
vbar.style.display = "차단";
hbar.childNodes[0].style.width = dataobj.offsetWidth;
vbar.childNodes[0].style.height = dataobj.offsetHeight;
if(hbar.childNodes[0].offsetWidth hbar.style.display = "없음";
}else{
hbar.style.display = "차단"; }
if(vbar.childNodes[0].offsetHeight vbar.style.display = "없음";
}else{
vbar.style.display = "차단"; }
if(hbar.childNodes[0].offsetWidth>hbar.offsetWidth && vbar.childNodes[0].offsetHeight>vbar.offsetHeight && changeposv){
bgbar.style.display = "차단" ;
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 = "없음";
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 = eproindex;
}
}
}
//更改列宽
this.rsc_d = function(e,obj){
var px = document.all?e.offsetX :e.layerX-obj.offsetLeft;
if(px>obj.offsetWidth-6 && px
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 = "정렬";
}
}
this.mouseup = function(obj){
obj.className = "over";
}
함수 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
}else{
obj.style.cursor = "기본값";
}
}
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 || 창.이벤트; e=e.어떤 || e.키코드;
var rl = dh.data.length;
스위치(e){
case 38://Up;
if(nowrow!=null && nowrow>1){
vbar.scrollTop -= 18;
dataobj.rows[nowrow].className = "";
지금 바로 -= 1;
dataobj.rows[nowrow].className = "selectedrow";
};
휴식;
case 40://Down;
if(nowrow!=null && nowrow
dataobj.rows[nowrow].className = "";
nowrow = 1;
dataobj.rows[nowrow].className = "selectedrow";
};
휴식;
기본값:break;
}
}
함수 dti(s){
var n = 0;
var a = s.match(/d /g);
for(var i=0;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.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){
trObj1.cells[ci].innerHTML.localeCompare(trObj2.cells[ci].innerHTML);
}else{
trObj2.cells[ci].innerHTML.localeCompare(trObj1.cells[ci] 반환 .innerHTML);
}
}
});
for(var i=0;i
}
for(var c=1;c
}
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
另外一个封装的很简单의 그리드 by 秦皇也爱JS
<script> <BR>var GridData = { <BR> title: ["姓名","性别","年龄","学历","特长"], <BR> type: [0,1,0,1,0], //编辑框类型 ŀ--textbox Ł---select <BR> order: [-1,-1,-1,-1,-1], //排序类型 Ł----升序 -1---降序 <BR> data: [["张三","男",27,"本科","足球"], <BR> ["YM","男",26,"本科","中锋"], <BR> ["McGrady","男",28,"博士","前锋"], <BR> ["James","男",25,"本科","小前锋"], <BR> ["Good","女",21,"高中","商品"], <BR> ["Fut","男",22,"本科","WAR3"], <BR> ["Keens","男",37,"高中","SC"], <BR> ["Gruby","女",32,"本科","SC"], <BR> ["Grrr","男",19,"硕士","SC"], <BR> ["Sky","男",22,"本科","WAR3"], <BR> ["Moon","男",25,"本科","WAR3"]] <BR>}; <br><br>var 性别 = ["男", "女"]; <BR>var 学历 = ["高中", "本科", "硕士", "博士"]; <br><br>function MyGrid(data, cnt){ <BR> MyGrid.backColor = "#fdfdfd"; <BR> MyGrid.hoverColor = "#edfae9"; <BR> MyGrid.clickColor = "#e1e6f1"; <br><br> this.datas = data; <BR> this.container = cnt; <BR> this.table; <BR> this.curRow; <BR> this.curCell; <BR> this.editTools = [document.body.appendChild(document.createElement("input")),document.body.appendChild(document.createElement("select"))]; <BR> var CurGrid = this; <BR> this.load = function(){ //grid重画模块 <BR> /** 加载table **/ <BR> var tbStr = []; <BR> tbStr.push("<table cellspacing='1'><tr height='25'>"); <BR> for(var o in this.datas.title){ <BR> tbStr.push("<th>" + this.datas.title[o] + (this.datas.order[o]==1?"↑":"↓") + ""); <BR> } <BR> tbStr.push("</script>
for(var i in this.datas.data){
tbStr.push(""); ");
for(var j in this.datas.data[i]){
tbStr.push("" + 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[r].onmouseout = function(){
if(CurGrid.curRow!=this) this.style.backgroundColor = MyGrid.backColor;
else this.style.backgroundColor = MyGrid.clickColor;
}
for(var c=0;c
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
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]
}
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;
}