客户端表格的操作

项目需求：

     左边是一个列表显示最新添加的工作机会，右边表格内是一个iframe,在这个iframe里面可以添加新的工作机会，

要求添加成功后实时刷新iframe外面这个页面的工作机会列表。

 

效果图：左边的最新列表

      

 

实现：

      在外面这个页面写了DataList的对象，实现代码如下：

 

<script type="text/javascript">
function DataList(){
    this.datasource=null;
    this.table=null;
    this.maxitems=5;
}
DataList.prototype={
    initialize:function()
    {
        if(this.datasource && this.table)
        {
            var table=$get(this.table);
            var totalrows=table.rows.length
            for(var i=1;i<totalrows;i++)
            {
                table.deleteRow(1);
            }
            
            for(var i=0;i<this.datasource.length-1 && i<this.maxitems;i++)
            {
                this._addItem(this.datasource[i]);
            }
        }
    },
    _addItem:function(obj){
        var table=$get(this.table);
        var id=obj.jobid;
        var name=obj.name;
        
        var tr=document.createElement("TR");
        var td=document.createElement("TD");
        td.className="td";
        td.innerText="· ";
        var a=document.createElement("A");
        a.href="javascript:editJob('"+id+"')";
        a.innerText=name;
        td.appendChild(a);
        tr.appendChild(td);   
        table.firstChild.appendChild(tr);
    
    },
    
    addItem:function(obj){
        var table=$get(this.table);
        this._addItem(obj);
        table.moveRow(table.rows.length-1,1);
        if(table.rows.length-1 > this.maxitems)
            table.deleteRow(table.rows.length-1);
    }
}

var list=new DataList();
list.table="table1";
</script>

 

然后添加成功后在服务器端注册一段js脚本来调用list的addItem()方法

 

 

var newjob={"jobid":12,"name":"asdasfd"};
this.parent.list.addItem(newjob);

 

主要是设计到dom中关于表格的一下操作，如移动行，删除行等。在以后的项目可以借鉴。

最近一哥们完全用js写了个入客户端的如GridView的控件，并配合Ajax，效率还是非常不错的，功能也很强大。

我先学习下，有空贴上来供大家研究下。