基于Ajaxpro.net的JsGrid控件

毕业论文需要大量用到 Ajax技术.考虑到自己项目过程中也常用到.于是花了点工夫来写这个JSGrid.目前大部分功能已完成.现上以享各位网友,不足之处多多包涵!

我所做的这个JsGrid和.net中的GridView功能类似。

首先服务端利用Ajaxpro.net 返回DataTable类型数据集。

      /// <summary>
    /// 获取数据经济
    /// </summary>
    /// <param name="wdmc">文档名称</param>
    /// <param name="currentPage">当前页码</param>
    /// <param name="rowPerPage">每页记录数</param>
    /// <returns></returns>
    [AjaxPro.AjaxMethod]
    public ArrayList GetDataTable(string wdmc,int currentPage, int rowPerPage)
    {
        int pageSize=rowPerPage;
        int startPage = (currentPage) * rowPerPage - (rowPerPage - 1);
        string sqlCommand = string.Format(@"select top {0} * from tblBZWD where ZDBH>=(select max(ZDBH) 
        from(select top {1} ZDBH from tblBZWD where WDMC like '%'+@wdmc+'%' order by ZDBH) as TempTable) and WDMC like '%'+@wdmc+'%' order by ZDBH",
        pageSize, startPage);

        List<YicelParameter> l = new List<YicelParameter>();
        l.Add(new YicelParameter("@wdmc", DbType.String, wdmc));

        DataTable dt= DataHelper.GetDataSet(sqlCommand,l).Tables[0];
        int rowCount = Convert.ToInt32(DataHelper.GetScalar("select count(*) from tblBZWD where WDMC like '%'+@wdmc+'%'"),l);
        ArrayList al = new ArrayList();
        
        al.Add(rowCount);//总记录数
        al.Add(dt);//DataTable对象
        return al;
    }

在介绍JsGrid控件类之前需要说明的是

我利用2个类来实现向Grid中添加的列，一般普通数据类型的列DataColumn和模板列。

function DataColumn(heardText,columnName,width,columnType,clickEvent,display)//一般数据列类
{
    this.HeadText=heardText;//列标题
    this.ColumnName=columnName;//列数据字段名
    this.Width=width;//列宽    
    this.ColumnType=columnType;  //列类型
    this.OnClickCell=clickEvent;//单元格单击事件
    this.Display=display;//列是否显示
}
function TempletColumn(heardText,columnName,width,columnType,clickEvent,htmlElement,display)//模板列类
{
    this.HeadText=heardText;//列标题
    this.ColumnName=columnName;//列数据字段名
    this.Width=width;//列宽    
    this.ColumnType=columnType;  //列类型

    this.OnClickCell=clickEvent;//单元格单击事件
    this.HtmlElement=htmlElement;//需要向Grid中添加的控件对象
    this.Display=display;;//列是否显示
}

下面是JsGrid控件的主类代码

 

function JsGrid()//表格主类
{
  this.HeadBgColor="#507CD1";//标题背景颜色
  this.HeadColor="White";//标题前景颜色
  this.HeadFontWeight="bold"
  
  this.IsPagination=false;//是否分页
  this.CurrentPage=1;//当前页数
  this.PageCount=10;
  this.RowPerPage=12;//每页多少条
  this.RowCount=10;//总条数
  this.RowHeight="25px";//行高
  this.SingleRowBgColor="#EFF3FB";
  this.DoubleRowBgColor="White";
  this.OnClickRow=null;
  this.TableID=null;
  
  this.Border = 1;//边框宽
  this.BorderColor=null;
  this.BorderCollapse="collapse";
  this.BorderStyle="solid";
  this.Cellpadding="0";
  this.cellspacing="0";
  this.BgColor=null;//背景颜色
  this.ParentContainer=null;//父控件对象
  this.ColumnNameCollection = new Array();
  this.AddColumn=function(obj){this.ColumnNameCollection.push(obj);}
  this.DataSourse=null;//数据源
  this.Refresh=null;//刷新函数名
  this.QueryEntity=null;//分页查询控件实例
  this.RegisterQureyEvent=function(obj)//给外部需要触发查询事件的控件注册事件
  {
    if(this.IsPagination)
    {
        if(this.QueryEntity==null){alert("RegisterQureyEvent方法必需在DataBinding方法成功调用之后调用!");return false;}
        obj.Refresh=this.Refresh;
        obj.TableID=this.TableID;
        obj.onclick=this.QueryEntity.onclick;
    }else
    {
        obj.onclick=eval(this.Refresh);
    }
  }
  this.DataBinding=function()//绑定函数
  {
    this.PageCount=parseInt(this.RowCount/this.RowPerPage)+(this.RowCount%this.RowPerPage==0?0:1);//统计总页数
//    if(this.DataSourse.Rows.length>0)
//    {
        var oldTable = document.getElementById(this.TableID);
        if(oldTable) this.ParentContainer.removeChild(oldTable);
        var tab=document.createElement("TABLE");
        tab.id=this.TableID;
        tab.border=this.Border;
        tab.bgColor=this.BgColor;
        tab.borderColor=this.BorderColor;
        tab.cellpadding=this.Cellpadding;
        tab.cellspacing=this.cellspacing;
        tab.style.borderCollapse=this.BorderCollapse;
        tab.style.borderStyle=this.BorderStyle;
        tab.style.color="#333333";
        var tr = null;
        var td = null;

        if(this.ColumnNameCollection!=null&&this.ColumnNameCollection.length!=0)//不自动生成列
        {
            tr = tab.insertRow(0);
            tr.style.height=this.RowHeight;
            for(i=0;i<this.ColumnNameCollection.length;i++)//标题行
            {
                td = tr.insertCell(i);
                td.style.display=this.ColumnNameCollection[i].Display?"inline":"none";
                td.innerHTML=this.ColumnNameCollection[i].HeadText;
                td.style.width=this.ColumnNameCollection[i].Width;
                td.style.backgroundColor=this.HeadBgColor;
                td.style.color=this.HeadColor;
                td.style.fontWeight=this.HeadFontWeight;
            }
            for(i=0;i<this.DataSourse.Rows.length;i++)//数据行
            {
                tr = tab.insertRow(i+1);
                if(this.OnClickRow!=null)tr.onclick=this.OnClickRow;
                tr.style.height=this.RowHeight;
                tr.style.backgroundColor=(i%2==0)?this.SingleRowBgColor:this.DoubleRowBgColor;
                {
                    for(j=0;j<this.ColumnNameCollection.length;j++)
                    {
                        td=tr.insertCell(j); 
                        td.style.display=this.ColumnNameCollection[j].Display?"inline":"none";
                        if(this.ColumnNameCollection[j].ColumnType=="D")
                        {
                            if(this.ColumnNameCollection[j].OnClickCell!=null)
                            {
                                td.onclick=this.ColumnNameCollection[j].OnClickCell;
                            }                               
                            td.innerHTML=eval("this.DataSourse.Rows[i]."+this.ColumnNameCollection[j].ColumnName); 
                        }else if(this.ColumnNameCollection[j].ColumnType=="T")
                        {
                            var newNode = this.ColumnNameCollection[j].HtmlElement.cloneNode(true);
                            var oldNode =this.ColumnNameCollection[j].HtmlElement;
                            for(var ab in oldNode)
                            {
                                try
                                {
                                    if(oldNode[ab]!=null&&oldNode[ab]!=""&&typeof(oldNode[ab])==typeof(function(){}))
                                    {
                                        eval("newNode."+ab+"=oldNode[ab]");
                                    }
                                }catch(e){;/*错误属性忽略*/}
                            }
                            if(this.ColumnNameCollection[j].ColumnName!=null)
                            {
                                var type= (oldNode.type==null||oldNode.type=="undefined")?null:new String(oldNode.type);
                                //alert(type);
                                var type = type==null?"":type.toLowerCase();
                                switch(type)
                                {
                               
                                    case "text":break;
                                    case "button":newNode.value=eval("this.DataSourse.Rows[i]."+this.ColumnNameCollection[j].ColumnName);break;
                                    case "image":newNode.src=eval("this.DataSourse.Rows[i]."+this.ColumnNameCollection[j].ColumnName);break;
                                    case "checkbox":newNode.checked=eval("this.DataSourse.Rows[i]."+this.ColumnNameCollection[j].ColumnName);break;
                                    case "radio":newNode.checked=eval("this.DataSourse.Rows[i]."+this.ColumnNameCollection[j].ColumnName);break;
                                    case "":
                                        if(oldNode.tagName.toLowerCase()=="img") newNode.src=eval("this.DataSourse.Rows[i]."+this.ColumnNameCollection[j].ColumnName);
                                    break;
                                }
                            }
                            td.appendChild(newNode);
                        }
                    }
                }
                
            }
        }else
        {//自动创建列
            tr = tab.insertRow(0);
            tr.style.height=this.RowHeight;
            for(i=0;i<this.DataSourse.Columns.length;i++)//标题行
            {
                td = tr.insertCell(i);
                td.innerHTML=this.DataSourse.Columns[i].Name;
                td.style.backgroundColor=this.HeadBgColor;
                td.style.color=this.HeadColor;
                td.style.fontWeight=this.HeadFontWeight;
            }
            for(i=0;i<this.DataSourse.Rows.length;i++)
            {
                tr = tab.insertRow(i+1);
                tr.style.height=this.RowHeight;
                if(this.OnClickRow!=null)tr.onclick=this.OnClickRow;
                tr.style.backgroundColor=(i%2==0)?this.SingleRowBgColor:this.DoubleRowBgColor;
                {
                    for(j=0;j<this.DataSourse.Columns.length;j++)
                    {
                        td=tr.insertCell(j);
                        td.innerHTML=eval("this.DataSourse.Rows[i]."+this.DataSourse.Columns[j].Name);
                        
                    }
                }
            }
        }
        this.ParentContainer.appendChild(tab);
        
        if(!this.IsPagination)return false;//是否页
         //分页行
        tr=tab.insertRow(this.DataSourse.Rows.length+1);
        tr.style.height="20px";
        tr.align="right";
        tr.style.backgroundColor="#EEF3BB";                
        td=tr.insertCell(0);
        td.colSpan=(this.ColumnNameCollection!=null&&this.ColumnNameCollection.length!=0?this.ColumnNameCollection.length+1:this.DataSourse.Columns.length+1);
        td.style.fontSize="10pt";
        var go = document.createElement("A");
        go.href="#";
        go.innerHTML="查询";
        go.Refresh=this.Refresh;
        go.TableID=this.TableID;
        go.onclick=function()
        {
            var currentPage=document.getElementById("txt"+this.TableID+"_CurrentPage").value;
            var rowPerPage=document.getElementById("txt"+this.TableID+"_RowPerPage").value;
            currentPage=isNaN(currentPage)?1:currentPage;
            rowPerPage=isNaN(rowPerPage)?12:rowPerPage;
            eval(this.Refresh+"(currentPage,rowPerPage)");
        };
        td.appendChild(go);
        this.QueryEntity=go;//保存查询控件。
        
        go = document.createTextNode(" 每页记录数: ");
        td.appendChild(go);
        go = document.createElement("INPUT");
        go.id="txt"+this.TableID+"_RowPerPage";
        go.value=this.RowPerPage;
        go.style.width="20px";
        go.onkeyup=function(){this.value=this.value.replace(/\D/g,'');};
        go.onafterpaste=function(){this.value=this.value.replace(/\D/g,'');};
        td.appendChild(go);
        go = document.createTextNode(" 总记录数: "+this.RowCount+" ");
        td.appendChild(go);
        go = document.createElement("A");
        go.href="#";
        go.innerHTML="首页";
        go.Refresh=this.Refresh;
        go.TableID=this.TableID;
        go.onclick=function()
        {
            var currentPage="1";
            var rowPerPage=document.getElementById("txt"+this.TableID+"_RowPerPage").value;
            rowPerPage=isNaN(rowPerPage)?12:rowPerPage;
            eval(this.Refresh+"(currentPage,rowPerPage)");
        };
        go.disabled=(this.CurrentPage>1?false:true);
        go.onclick=(this.CurrentPage>1?go.onclick:null);
        td.appendChild(go);
        go = document.createTextNode("  ");
        td.appendChild(go);
        go = document.createElement("A");
        go.href="#";
        go.innerHTML="上一页";
        go.Refresh=this.Refresh;
        go.TableID=this.TableID;
        go.onclick=function()
        {
            var currentPage=document.getElementById("txt"+this.TableID+"_CurrentPage").value;
            var rowPerPage=document.getElementById("txt"+this.TableID+"_RowPerPage").value;
            currentPage=isNaN(currentPage)?1:currentPage;
            rowPerPage=isNaN(rowPerPage)?12:rowPerPage;
            currentPage=parseInt(currentPage)-1;
            eval(this.Refresh+"(currentPage,rowPerPage)");
        };
        go.disabled=(this.CurrentPage>1?false:true);
        go.onclick=(this.CurrentPage>1?go.onclick:null);
        td.appendChild(go);
        go = document.createTextNode(" 第 ");
        td.appendChild(go);
        go = document.createElement("INPUT");
        go.id="txt"+this.TableID+"_CurrentPage";
        go.value=this.CurrentPage;
        go.style.width="20px";
        go.onkeyup=function(){this.value=this.value.replace(/\D/g,'');};
        go.onafterpaste=function(){this.value=this.value.replace(/\D/g,'');};
        td.appendChild(go);
        go = document.createTextNode(" 页 共");
        td.appendChild(go);        
        go = document.createElement("span"); 
        go.id="txt"+this.TableID+"_PageCount"; 
        go.innerHTML=this.PageCount;
        td.appendChild(go);      
        go = document.createTextNode("页 ");
        td.appendChild(go);                
        go = document.createElement("A");
        go.href="#";
        go.innerHTML="下一页";
        go.Refresh=this.Refresh;
        go.TableID=this.TableID;
        go.onclick=function()
        {
            var currentPage=document.getElementById("txt"+this.TableID+"_CurrentPage").value;
            var rowPerPage=document.getElementById("txt"+this.TableID+"_RowPerPage").value;
            currentPage=isNaN(currentPage)?1:currentPage;
            rowPerPage=isNaN(rowPerPage)?12:rowPerPage;
            currentPage=parseInt(currentPage)+1;
            eval(this.Refresh+"(currentPage,rowPerPage)");
        };
        go.disabled=(this.PageCount>this.CurrentPage?false:true);
        go.onclick=(this.PageCount>this.CurrentPage?go.onclick:null);
        td.appendChild(go);
        go = document.createTextNode("  ");
        td.appendChild(go);
        go = document.createElement("A");
        go.href="#";
        go.innerHTML="末页";
        go.Refresh=this.Refresh;
        go.TableID=this.TableID;
        go.onclick=function()
        {
            var currentPage=document.getElementById("txt"+this.TableID+"_PageCount").innerHTML;
            var rowPerPage=document.getElementById("txt"+this.TableID+"_RowPerPage").value;
            currentPage=isNaN(currentPage)?1:currentPage;
            rowPerPage=isNaN(rowPerPage)?12:rowPerPage;
            eval(this.Refresh+"(currentPage,rowPerPage)");
        };
        go.disabled=(this.PageCount>this.CurrentPage?false:true);
        go.onclick=(this.PageCount>this.CurrentPage?go.onclick:null);
        td.appendChild(go);
        go = document.createTextNode(" ");
        td.appendChild(go);
        
//    }
  };
  
}

由于包括了 控件的页面分页。以及页面上利用其他按钮控件来触发JsGrid重载入数据的功能。

所以代码有点多。不过用起来就很方便了。能够支持自动帮定列。以及自定列。

 

下面来看看具体怎么使用。

<body onload="CreateTable(1,5);">
    <form id="form1" runat="server">
    <label>文档名称：</label><input id="txtWDMC" type="text" /><input id="btnQ"  type="button"  value="查询">
    <span style="font-weight:bold">JavaScript 表格控件 绑定后台数据。</span>
    <div id="divParentContainer">
    </div>
 </form>

上面的divParentContainer DIV控件用来当做JsGrid控件的容器。

<input id="txtWDMC" type="text" />用来填写查询条件

<input id="btnQ"  type="button"  value="查询">用来触发查询事件

 

      function CreateTable(currentPage,rowPerPage)//主调函数
       {
         var txtWDMC=document.getElementById("txtWDMC").value;//获取查询字段
         txtWDMC=txtWDMC==null?"":txtWDMC;
         
         
         var JgTable = new JsGrid();//实例化一个JsGrid控件 
         JgTable.TableID="jgTable";//JsGridID
         if(currentPage&&rowPerPage)
         {
            JgTable.CurrentPage=currentPage;
            JgTable.RowPerPage=rowPerPage;
         }
         
         
         var list = _Default.GetDataTable(txtWDMC,currentPage,rowPerPage).value;//利用ajaxpro.net从服务端以DataTable格式读取数据及数据总数
         JgTable.RowCount=list[0];//数据总数
         var dt = list[1];//DataTable数据集
         var dv = document.getElementById("divParentContainer");  //获取容器DIv用来放置JsGrid父控件                
         JgTable.ParentContainer=dv //给控件指定 父控件

　　JgTable.OnClickRow = function(){OnSelectRowStyle(this);};//给JsGrid指定行点击
         JgTable.DataSourse=dt;;//给JsGrid控件指定数据源
         JgTable.IsPagination=true;//是否分页
         JgTable.Refresh="CreateTable";//指定本函数函数名以便分页事件以及其他按钮查询事件调用
         JgTable.DataBinding();  //数据帮定

         JgTable.RegisterQureyEvent(document.getElementById("btnQ"));//给外部控件注册查询事件
       }  

上面是没有给JsGrid指定列自动绑定列的情况．下面是自定列的代码

       function CreateTable(currentPage,rowPerPage)
       {
         var txtWDMC=document.getElementById("txtWDMC").value;//获取查询字段
         txtWDMC=txtWDMC==null?"":txtWDMC;
         
         
         var JgTable = new JsGrid();//实例化一个JsGrid控件 
         JgTable.TableID="jgTable";
         if(currentPage&&rowPerPage)
         {
            JgTable.CurrentPage=currentPage;
            JgTable.RowPerPage=rowPerPage;
         }
         
         
         var list = _Default.GetDataTable(txtWDMC,currentPage,rowPerPage).value;
         JgTable.RowCount=list[0];
         var dt = list[1];
         var dv = document.getElementById("divParentContainer");
         
         JgTable.AddColumn(new DataColumn("自动编号","ZDBH","100px","D",null,true));
         JgTable.AddColumn(new DataColumn("文档名称","WDMC","300px","D",null,true));
         JgTable.AddColumn(new DataColumn("文档路径","WDLJ","200px","D",null,true));
         JgTable.AddColumn(new DataColumn("文档存放名称","WDCFMC","200px","D",null,true));
         
         var btnDelete = document.createElement("INPUT");
         btnDelete.type="button";
         btnDelete.value="删除";
         btnDelete.style.width="100%";
         btnDelete.onclick=function(){alert(this.parentNode.parentNode.cells[0].innerHTML);};
         
         JgTable.AddColumn(new TempletColumn("删除",null,"100px","T",null,btnDelete,true));
         
         var imgAdd = document.createElement("img");
         imgAdd.src="down.gif";
         imgAdd.onclick=function(){alert("这是第"+this.parentNode.parentNode.rowIndex+"行的图片");};
         
         JgTable.AddColumn(new TempletColumn("添加",null,"60px","T",null,imgAdd,true));
                 
         
         JgTable.ParentContainer=dv;
         JgTable.OnClickRow = function(){OnSelectRowStyle(this);};
         JgTable.DataSourse=dt;
         JgTable.IsPagination=true;
         JgTable.Refresh="CreateTable";//
         JgTable.DataBinding();         ;
         JgTable.RegisterQureyEvent(document.getElementById("btnQ"));//给外部控件注册查询事件
       }                
       
        var oldRow = null;//用于GridView行选择效果
        var oldRowBgColor=null;//用于GridView行选择效果
        var newRowBgColor=null;//用于GridView行选择效果
        function OnSelectRowStyle(obj)//
        {
            if(obj==oldRow)
            return;
            newRowBgColor = obj.style.backgroundColor;
            if(oldRow!=null)
            {
                oldRow.style.backgroundColor=oldRowBgColor;
                oldRowBgColor = newRowBgColor;
            }
            if(oldRow==null)
            oldRowBgColor = newRowBgColor;
            oldRow = obj;
            obj.style.backgroundColor='#96CEFF';
            obj.style.cursor='default';
        }  

本人水平有限，写这个也不是为了上来现眼哈。主要是觉的可能有朋友需要这方面的东东．所以就冒昧填上来了．
 如果吐词不清之处还请多多原谅，发现什么问题请大家提出来．我们一起研究．谢谢大家．

如有朋友需要原码请留地址．)