一个封装的很简单的grid,支持排序编辑,兼容FF
查看( 1762 ) /
评论( 36 )
双击编辑内容 谢谢cosin 支持排序了
大家不要扔鸡蛋啊
[本帖最后由 秦皇也爱JS 于 2007-6-26 14:46 编辑]
CODE:
<style>
table{ width: 120%;height:auto;background:#E8E8E8; margin:0 auto; cursor:pointer}
table th{ background:url(http://www.cpp114.com/cppjob/bg.gif) repeat-x; font-size:12px; padding:2px 0;}
table td{ font-size:12px; text-align:center; padding:2px 0;}
input {border:none;position:absolute;display:none;text-align:center;}
select {position:absolute;display:none}
</style>
<scrīpt>
var GridData = {
title: ["姓名","性别","年龄","学历","特长"],
type: [0,1,0,1,0], //编辑框类型 0--textbox 1---select
order: [-1,-1,-1,-1,-1], //排序类型 1----升序 -1---降序
data: [["张三","男","27","本科","足球"],
["YM","男","26","本科","中锋"],
["McGrady","男","28","本科","前锋"],
["James","男","25","本科","足球"],
["Good","男","21","本科","足球"],
["Fut","男","22","本科","足球"],
["Keens","男","37","本科","足球"],
["Gruby","女","32","本科","足球"],
["Grrr","男","19","本科","足球"],
["Sky","男","22","本科","足球"],
["Moon","男","25","本科","足球"]]
};
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 = {text:document.body.appendChild(document.createElement("input")),combo:document.body.appendChild(document.createElement("select"))};
var CurGrid = this;
this.load = function(){
/** 加载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?"↑":"↓") + "</th>");
}
tbStr.push("</tr>");
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] + "</td>");
}
tbStr.push("</tr>");
}
tbStr.push("</table>");
this.container.innerHTML = tbStr.join("");
this.table = this.container.firstChild;
/** 设置编辑工具 **/
this.editTools.text.onblur = 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.value = "";
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;
if(GridData.type[this.cellIndex] == 0){
CurGrid.editTools.text.style.display = "block";
CurGrid.editTools.text.style.width = this.offsetWidth;
CurGrid.editTools.text.style.height = this.offsetHeight;
CurGrid.editTools.text.style.left = getAbsPos(this).leftx - CurGrid.container.scrollLeft;
CurGrid.editTools.text.style.top = getAbsPos(this).topy - CurGrid.container.scrollTop;
CurGrid.editTools.text.focus();
CurGrid.editTools.text.value = this.firstChild.data;
CurGrid.editTools.text.select();
}else if(GridData.type[this.cellIndex] == 1){
alert("还没支持下拉框编辑呢")
}
}
}
}
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);
}
}
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 ōbjResult = new Object();
objResult.topy = obj.offsetTop;
objResult.leftx = obj.offsetLeft;
while( ōbj = obj.offsetParent){
objResult.topy += obj.offsetTop;
objResult.leftx += obj.offsetLeft;
}
return objResult;
}
</scrīpt>
<div id="panel" style="width:300px;height:300px;overflow:scroll;">
</div><br>
<input type="button" value="导出当前行" ōnclick="if(grid.curRow)alert(grid.curRow.innerText);else{alert('请选中一行');}" style="display:block;border:1px outset;"><br>
<input type="button" value="导出所有数据" ōnclick="alert(grid.datas.data)" style="display:block;border:1px outset;"><br>
<input type="button" value="删除行" ōnclick="grid.delRow();" style="display:block;border:1px outset;"><br>看了Dron 的 心好痒啊 可惜没他那水平 大家不要扔鸡蛋啊[本帖最后由 秦皇也爱JS 于 2007-6-26 14:46 编辑]
TAG:
-
muxrwc发布于2007-06-26 12:19:43
-
>.<
飘过。。。
这个石头兄也写过。。。
http://community.csdn.net/Expert ... 7.xml?temp=.9380152
-
秦皇也爱JS
发布于2007-06-26 12:34:27
-
恩 中午刚花点时间写的
-
dron
发布于2007-06-26 12:41:31
-
呵呵， 都在写 grid 啦～～
支持一个，继续努力
-
秦皇也爱JS
发布于2007-06-26 14:00:58
-
支持排序了 顶下!
-
dron
发布于2007-06-26 14:42:01
-
发现不支持表头固定， 把 panel 高度改小了再拉动竖向滚动条试试
-
秦皇也爱JS
发布于2007-06-26 14:43:37
-
又更新了
-
秦皇也爱JS
发布于2007-06-26 14:44:24
-
这个没想到啊 怎么解决呢 想想
-
秦皇也爱JS
发布于2007-06-26 14:47:31
-
把height设成 auto了 应该好了吧
-
秦皇也爱JS
发布于2007-06-26 15:49:38
-
呵呵 顶下 下拉框编辑也支持了
-
蓝牙发布于2007-06-27 16:58:03
-
不知数据量大了能否抗的住 ?
500行 * 30 列
-
秦皇也爱JS
发布于2007-06-27 18:01:57
-
试试不就知道了
-
lmzmem发布于2007-06-30 02:08:43
-
要是可以分页就好了。
-
yiyun_cao发布于2007-06-30 09:45:09
-
我看过多维数组的赋值,但没看到这种形式的,这真正代表什么意思?
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"]]
};
就好象是GridData是一个多维数组,然后里面又有数组, title,type....好象是里面数组的名称,然后里面的 data(就称为数组把)的[[是啥意思呀,也是给数组赋值吗?那为什么不和外面数组赋值一样的用{}?
-
yiyun_cao发布于2007-06-30 09:51:48
-
我是JS新手,刚刚学,请多多包涵
-
yiyun_cao发布于2007-06-30 12:27:05
-
哈哈,我已经明白了
-
figurine发布于2007-06-30 13:12:26
-
支持分页不?
-
秦皇也爱JS
发布于2007-07-01 12:45:26
-
已经做好了模块 正在结合
-
秦皇也爱JS
发布于2007-07-02 09:48:12
-
将上次分页模块结合 感觉好简单 支持分页了 看来面向对象的JS编程真爽
-
dron
发布于2007-07-02 10:58:00
-
几个建议：
1、改变列宽似乎没有效果（ie 和 ff 都如此）
2、表头没有固定（如果行数超出了竖向滚动条的话...）
3、如果先对性别排序，再次年龄排序，那么，性别列不应该再带有箭头，其它依此类推
-
秦皇也爱JS
发布于2007-07-02 11:00:44
-
是啊 改变列宽没做
行数超出了竖向滚动条这个好像没问题
最后这个一时偷懒没做
谢谢Dron的建议