- 删掉一行数据时，可能使IE死掉。
- 只能在写在网页中，不能写成js文件后再引用，可能是代码中包含了window.alert方法，我想这个问题是可以解决的，如果有哪位高手解决了，麻烦通知一下，谢了。还有一个解决方法，将代码写成inc文件,代码用<script>.....</script>,再引用:<!-- #include virtual="../script/ClientDataGrid.inc">,这样运行时，代码就会自动加到网页上。
这个控件的功能都写再备注里，大家也可以扩展一些功能。如果有哪位高手作了改进请一定通知一下，谢了。
代码如下:
<script language="javascript">
/// 客户端DataGrid
/// Author : Curllion Zhang
/// 2005-7-29
//-----------------------------------表格对象-------------------------------------------
//注意:
// 1、创建该对象时，一定要设定对象的ID值为此象的ID
// 2、如果指定了单元格的CSS，则被选中的行的CSS不起作用
//
function ClientDataGrid(ColCount,TitleRow,TitleRowHeigh,RowHeight,ColWidths,PostCols,InputCols,TextBoxs,Parent)
{
this.ColCount = ColCount; //列数量
this.TitleRow = new Array(ColCount); //表格标题
this.TitleRowHeigh = TitleRowHeigh; //表格标题的行高
this.RowHeight = RowHeight; //行高
this.ColWidths = new Array(ColCount); //表示列宽的数组，单位px
this.Cellspacing; //单元格间格
this.Cellpadding; //单元格空白
this.Border; //边框
this.Width; //控件宽度
this.Height; //控件高度
this.BorderColor; //表格边框颜色，文本
this.CSS; //指定CSS，文本
this.TitleCSS; //指定标题CSS
this.TitleItemCSS; //指定标题单元格的CSS
this.RowCSS; //指定行的CSS
this.ItemCSS; //指定单元格CSS，如果指定了单元格的CSS，则被选中的行的CSS不起作用
this.SelectedCSS; //被选定行的CSS
this.PostCols = new Array(ColCount); //数组，表示当前要上传的列，如果是1，则表示要上传
this.InputCols = new Array(ColCount); //数组，表示当前要上传的列，如果是1，则表示要输入
if(TextBoxs == null)
this.TextBoxs = null;
else
{
//与此类关联的input控件，数据将会从此控件中提交
this.TextBoxs = new Array(TextBoxs.length);
for(var i = 0; i< TextBoxs.length ;i++)
{
this.TextBoxs[i] = TextBoxs[i];
}
}
this.SelectedIndex = -1; //选择索引，-1表示没有行被选中
this.DeleteEnable = true; //是否显示删除按钮
this.RowCount = 0; //行数
this.Rows = new Array(); //行集合
this.Parent = Parent; //此控件的父控件
this.ID="dg"; //本控件的ID
for(var i = 0; i< ColCount;i++)
{
if(ColWidths == null)
this.ColWidths[i] = 60; //指定默认行高为60,也可以用字符串指定为百分数
else
this.ColWidths[i] = ColWidths[i];
this.TitleRow[i] = TitleRow[i];
if(PostCols == null)
this.PostCols[i] = 0; //默认是没有列要上传
else
this.PostCols[i] = PostCols[i];
if(InputCols == null)
this.InputCols[i] = 0; //默认是没有列要上传
else
this.InputCols[i] = InputCols[i];
}
}
//画出表格
ClientDataGrid.prototype.Draw = function(ID)
{
this.ID=ID;
var str = "<table rules='all' id = '" + ID + "_datagrid' " +
(this.Border !=null?("border=" + this.Border):"") + " " +
(this.Cellspace !=null?("cellspace=" + this.Cellspace):"") + " " +
(this.Cellpadding !=null?("cellpadding=" +this.Cellpadding):"") + " " +
(this.Width !=null?("width=" + this.Width):"") + " " +
(this.Height !=null?("height=" + this.Height):"") + " " +
(this.BorderColor !=null?("bordercolor=" + this.BorderColor):"") + " " +
(this.CSS !=null?("style='" + this.CSS + "'"):"") + ">";
//画标题
str = str + "<tr " + (this.TitleCSS!=null?("style='" + this.TitleCSS + "'"):"") + ">";
for(var i = 0;i<this.ColCount;i++)
{
str = str + "<td " + (this.ColWidths[i]!=null?("width=" + this.ColWidths[i]):"") + " " +
(this.TitleItemCSS!=null?("style='" + this.TitleItemCSS + "' "):"") + ">" + this.TitleRow[i] + "</td>";
}
str = str + "<td " + (this.TitleItemCSS!=null?("style='" + this.TitleItemCSS + "' "):"") + ">选中</td>";
str = str + "<td " + (this.TitleItemCSS!=null?("style='" + this.TitleItemCSS + "' "):"") + ">删除</td>";
str = str + "</tr>" ;
//画单元格
for(var i = 0 ; i < this.RowCount; i++)
{
str = str + "<tr id = 'row"+ i + "' " + (this.RowHeight!=null?("height=" + this.RowHeight):"") + " " +
(this.RowCSS!=null?("style='" + this.RowCSS + "'"):"") + ">";
for(var j=0;j<this.ColCount;j++)
{
if(this.InputCols[j] == 1)
str = str + "<td " + (this.ItemCSS!=null?("style='" + this.ItemCSS + "' "):"") + "><input language='javascript' type=text value='" + this.Rows[i].Data[j] + "' onblur='"+this.ID+".CellChange("+j+","+i+",this.value)'></td>";
if(this.InputCols[j] == 0)
str = str + "<td " + (this.ItemCSS!=null?("style='" + this.ItemCSS + "' "):"") + ">" + this.Rows[i].Data[j] + "</td>";
}
str = str + "<td " + (this.ItemCSS!=null?("style='" + this.ItemCSS + "' "):"") + "><input language='javascript' type=button value='选中' onclick='" + this.ID + ".SelectRow(" + i + ")'></td>";
str = str + "<td " + (this.ItemCSS!=null?("style='" + this.ItemCSS + "' "):"") + "><input language='javascript' type=button value='删除' onclick='" + this.ID + ".DeleteRowAt("+ i + ")'></td>";
str = str + "</tr>";
}
str = str + "</table>";
this.Parent.innerHTML = str;
//写到TextBoxs中
var k = 0;
for(var j=0;j<this.ColCount;j++)
{
if(this.PostCols[j] == 0)
continue;
tmp = "";
for(var i=0;i<this.RowCount;i++)
{
tmp = tmp + this.Rows[i].Data[j] + ",";
}
this.TextBoxs[k].value = tmp.substr(0,tmp.length-1);
k++;
}
}
//在指定位置插入一行
ClientDataGrid.prototype.InsertRowAt = function(index,dataRow)
{
tmpRows = this.Rows.slice(0,index).concat(new Array(dataRow)).concat(this.Rows.slice(index,this.RowCount+1));
this.Rows = tmpRows;
this.RowCount++;
this.SelectedIndex = -1;
}
//在指定位置插入多行
ClientDataGrid.prototype.InsertRowsAt = function(index,dataRows)
{
tmpRows = this.Rows.slice(0,index).concat(dataRows).concat(this.Rows.slice(index,this.RowCount+1));
this.Rows = tmpRows;
this.RowCount = this.RowCount + dataRows.length;
this.SelectedIndex = -1;
}
//在最后面插入一行
ClientDataGrid.prototype.InsertRow = function(dataRow)
{
this.Rows = this.Rows.concat(new Array(dataRow))
this.RowCount++;
}
//再最后面插入多行
ClientDataGrid.prototype.InsertRows = function(dataRows)
{
this.Rows = this.Rows.concat(dataRows);
this.RowCount = this.RowCount + dataRows.length;
this.SelectedIndex = -1;
}
//选中一行
ClientDataGrid.prototype.SelectRow = function(index)
{
this.SelectedIndex = index;
//因为标题行不算，所以从1开始
for(var i = 1 ;i<=this.RowCount ;i++)
{
var tmpCSS = "";
if(i==this.SelectedIndex + 1)
{
if(this.SelectedCSS != null)
tmpCSS = "window.document.all(\"" + this.ID + "_datagrid\").rows(" + i + ").style.cssText='"+ this.SelectedCSS +"'";
else
tmpCSS = "window.document.all(\"" + this.ID + "_datagrid\").rows(" + i + ").style.cssText=''";
}
else
{
if(this.RowCSS != null)
tmpCSS = "window.document.all(\"" + this.ID + "_datagrid\").rows(" + i + ").style.cssText='"+ this.RowCSS +"'";
else
tmpCSS = "window.document.all(\"" + this.ID + "_datagrid\").rows(" + i + ").style.cssText=''";
}
eval(tmpCSS);
}
}
//更改表格的值
ClientDataGrid.prototype.CellChange = function(x,y,value)
{
//先改变对象的值
this.Rows[y].Data[x] = value;
//写到TextBoxs中
var k = 0;
for(var j=0;j<this.ColCount;j++)
{
if(this.PostCols[j] == 0)
continue;
tmp = "";
for(var i=0;i<this.RowCount;i++)
{
tmp = tmp + this.Rows[i].Data[j] + ",";
}
this.TextBoxs[k].value = tmp.substr(0,tmp.length-1);
k++;
}
}
//删除指定位置的行,如果删除过快，就IE就会死掉，所以放用户确认一下，并且再重绘时，先清掉，防止宕掉
ClientDataGrid.prototype.DeleteRowAt = function(index)
{
if(confirm("确认要删除吧?"))
{
this.Parent.innerHTML = "";
this.SelectedIndex = -1;
if(index < 0 || index >= this.RowCount)
{
window.alert("指定的位置没有行");
return;
}
tmpRows = this.Rows.slice(0,index).concat(this.Rows.slice(index+1,this.RowCount));
this.Rows = tmpRows;
this.RowCount--;
//eval("window.document.all(\"" + this.ID + "_datagrid\").deleteRow(" + index + ");")
this.Draw(this.ID);
}
}
//-----------------------------------行对象------------------------------
function DataRow(Data)
{
this.ItemCount = Data.length; //一行的元素个数
this.Data = new Array(); //记录数据
for(var i = 0 ;i<this.ItemCount ;i++)
{
this.Data[i] = Data[i];
}
}
</script>
如何使用，例如
<script language="javascript">
var textBoxs = new Array(document.Form1.pfy ,document.Form1.presult);
var colWidths = new Array("80px","180px",null);
var dg = new ClientDataGrid(3,new Array("代码","费用类型","金额"),25,25,colWidths,new Array(1,0,1),new Array(0,0,1),textBoxs,document.all("fylist"));
dg.Width = 455;
dg.CSS = "background-color:White;border-color:#CC9966;border-width:1px;border-style:None;border-collapse:collapse;";
dg.TitleCSS = "color:#FFFFCC;background-color:#990000;font-weight:bold;";
dg.BorderColor = "#CC9966";
dg.SelectedCSS = "color:#663399;background-color:#FFCC66;";
dg.Draw("dg");
//这是插入代码，大家可以改成其它的，看看是不是和DataGrid的第一种样式一样呀
function B_insert_onclick()
{
var tmpRows = new Array();
for (i = 0 ;i < Form1.LBExpenss.length ;i ++)
{
if(Form1.LBExpenss.options[i].selected)
{
tmpRows = tmpRows.concat(new Array(new DataRow(new Array(Form1.LBExpenss.options[i].value,Form1.LBExpenss.options[i].text,""))));
}
}
if(dg.SelectedIndex != -1)
dg.InsertRowsAt(dg.SelectedIndex,tmpRows);
else
dg.InsertRows(tmpRows);
dg.Draw("dg");
}
</script>
关闭窗口
打印文档
账号登录