DataGrid实现(上下左右移动,添加删除行列,导出,表头拖动)

 
1.html

< HTML >
     < HEAD >
         < title > movegrid </ title >
         < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
         < meta  name ="CODE_LANGUAGE"  Content ="C#" >
         < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
         < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
         < LINK  href ="movegrid.css"  type ="text/css"  rel ="stylesheet" >
         < script  src ="movegrid.js" ></ script >
     </ HEAD >
     < body  MS_POSITIONING ="GridLayout" >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < asp:datagrid  id ="PowerTable"  runat ="server"  BorderColor ="#CC9966"  BorderStyle ="None"  BorderWidth ="1px"
                BackColor ="White"  CellPadding ="4" >
                 < FooterStyle  ForeColor ="#330099"  BackColor ="#FFFFCC" ></ FooterStyle >
                 < SelectedItemStyle  Font-Bold ="True"  ForeColor ="#663399"  BackColor ="#FFCC66" ></ SelectedItemStyle >
                 < ItemStyle  ForeColor ="#330099"  BackColor ="White" ></ ItemStyle >
                 < HeaderStyle  Font-Bold ="True"  ForeColor ="#FFFFCC"  BackColor ="#990000" ></ HeaderStyle >
                 < PagerStyle  HorizontalAlign ="Center"  ForeColor ="#330099"  BackColor ="#FFFFCC" ></ PagerStyle >
             </ asp:datagrid >
             < p >< input  onclick ="add_row(Main_Tab)"  type ="button"  value ="ins_row" >   < input  onclick ="add_col(Main_Tab)"  type ="button"  value ="ins_col" >
                 < input  onclick ="del_row(Main_Tab)"  type ="button"  value ="Del_row" >   < input  onclick ="del_col(Main_Tab)"  type ="button"  value ="Del_col" >
                 < input  onclick ="res_tab(Main_Tab)"  type ="button"  value ="Restore" >   < input  onclick ="exp_tab(Main_Tab)"  type ="button"  value ="Export" >
                 < br >
                 < br >
                 < br >
                ( Move:  < input  id ="move"  onclick ="Move_up(Main_Tab)"  type ="button"  value ="Up" >   < input  id ="move"  onclick ="Move_down(Main_Tab)"  type ="button"  value ="Down" >
                 < input  id ="move"  onclick ="Move_left(Main_Tab)"  type ="button"  value ="Left" >   < input  id ="move"  onclick ="Move_right(Main_Tab)"  type ="button"  value ="Right" >
                ) </ p >
         </ form >
     </ body >
</ HTML >

2.cs 代码

public   class  MoveRow : System.Web.UI.Page
     {
        protected System.Web.UI.WebControls.DataGrid PowerTable;
    
        private void Page_Load(object sender, System.EventArgs e)
        {
            DataBind();
        }

        DataBind#region DataBind
        private void DataBind()
        {
            string sql="select * from testgrid";
            DataSet ds=GetDataSet(sql);
            this.PowerTable.DataSource=ds;
            this.PowerTable.DataBind();
        }
        #endregion


        GetDataSet#region GetDataSet
        private DataSet GetDataSet(string sql)
        {
            string constring=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
            SqlDataAdapter    sda =new SqlDataAdapter(sql,constring);
            DataSet ds=new DataSet();
            sda.Fill(ds);
            return ds;
        }
        #endregion

        Web Form Designer generated code#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }

3.js

var  Main_Tab     =   null ;
var  cur_row     =   null ;
var  cur_col     =   null ;
var  cur_cell     =   null ;
var  Org_con     =   "" ;
var  sort_col     =   null ;

var  show_col     =   false ;
var  charMode     =   true ;
var  act_bgc     =   " #BEC5DE " ;
var  act_fc     =   " black " ;
var  cur_bgc     =   " #ccffcc " ;
var  cur_fc     =   " black " ;

function  window.onload() {
    init();
    
    drag = document.createElement("DIV");
    drag.innerHTML        = "";
    drag.style.textAlign     = "center";
    drag.style.position     = "absolute";
    drag.style.cursor     = "hand";
    drag.style.border     = "1 solid black";
    drag.style.display     = "none";
    drag.style.zIndex     = "999";
    
    document.body.insertBefore(drag);
    //setInterval("judge_move()",100);
}
function  init() {
    cur_row            = null;
    cur_col            = null;
    cur_cell        = null;
    sort_col        = null;
    Main_Tab         = PowerTable;
    read_def(Main_Tab)
    Main_Tab.onmouseover    = overIt;
    Main_Tab.onmouseout    = outIt;
    Main_Tab.onclick    = clickIt;
    Main_Tab.ondblclick    = dblclickIt;
    Org_con            = Main_Tab.outerHTML;
    
    arrowUp = document.createElement("SPAN");
    arrowUp.innerHTML    = "5";
    arrowUp.style.cssText     = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";

    arrowDown = document.createElement("SPAN");
    arrowDown.innerHTML    = "6";
    arrowDown.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";
}

function  judge_move() {
    move[0].disabled=(cur_row == null || cur_row<=1);
    move[1].disabled=(cur_row == null || cur_row==Main_Tab.rows.length-1 || cur_row == 0);
    move[2].disabled=(cur_col == null || cur_col==0);
    move[3].disabled=(cur_col == null || cur_col==Main_Tab.rows[0].cells.length-1);
}

document.onselectstart     =   function () {return false;}

document.onmouseup     =  drag_end;

function  clear_color() {
    the_table=Main_Tab;
    if(cur_col!=null){
        for(i=0;i<the_table.rows.length;i++){
            with(the_table.rows[i].cells[cur_col]){
                style.backgroundColor=oBgc;
                style.color=oFc;
            }
        }
    }
    if(cur_row!=null){
        for(i=0;i<the_table.rows[cur_row].cells.length;i++){
            with(the_table.rows[cur_row].cells[i]){
                style.backgroundColor=oBgc;
                style.color=oFc;
            }
        }
    }
    if(cur_cell!=null){
        cur_cell.children[0].contentEditable = false;
        with(cur_cell.children[0].runtimeStyle){
            borderLeft=borderTop="";
            borderRight=borderBottom="";
            backgroundColor="";
            paddingLeft="";
            textAlign="";
        }
    }
}

function  document.onclick() {
    window.status = "";
    clear_color();
    cur_row  = null;
    cur_col  = null;
    cur_cell = null;
}

function  read_def(the_table) {
    for(var i=0;i<the_table.rows.length;i++){
        for(var j=0;j<the_table.rows[i].cells.length;j++){
            with(the_table.rows[i]){
                cells[j].oBgc = cells[j].currentStyle.backgroundColor;
                cells[j].oFc  = cells[j].currentStyle.color;
                if(i==0){
                    cells[j].onmousedown    = drag_start;
                    cells[j].onmouseup    = drag_end;
                }
            }
        }
    }
}

function  get_Element(the_ele,the_tag) {
    the_tag = the_tag.toLowerCase();
    if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
    while(the_ele=the_ele.offsetParent){
        if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
    }
    return(null);
}

var  dragStart         =   false ;
var  dragColStart     =   null ;
var  dragColEnd         =   null ;

function  drag_start() {
    var the_td    = get_Element(event.srcElement,"td");
    if(the_td==null) return;
    dragStart    = true;
    dragColStart    = the_td.cellIndex;
    drag.style.width    = the_td.offsetWidth;
    drag.style.height    = the_td.offsetHeight;
    function document.onmousemove(){
        drag.style.display    = "";
        drag.style.top        = event.y - drag.offsetHeight/2;
        drag.style.left        = event.x - drag.offsetWidth/2;
        for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
            with(Main_Tab.rows[0].cells[i]){
                if((event.y>offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<offsetTop+offsetHeight+parseInt(document.body.currentStyle.marginTop)) && (event.x>offsetLeft+parseInt(document.body.currentStyle.marginLeft) && event.x<offsetLeft+offsetWidth+parseInt(document.body.currentStyle.marginLeft))){
                    runtimeStyle.backgroundColor=act_bgc;
                    dragColEnd=cellIndex;
                }else{
                    runtimeStyle.backgroundColor="";
                }
            }
        }
        if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0].offsetHeight+parseInt(document.body.currentStyle.marginTop))) dragColEnd=null;
    }
    drag.innerHTML = the_td.innerHTML;
    drag.style.backgroundColor = the_td.oBgc;
    drag.style.color = the_td.oFc;
}

function  drag_end() {
    dragStart = false;
    drag.style.display="none";
    drag.innerHTML = "";
    drag.style.width = 0;
    drag.style.height = 0;
    for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
        Main_Tab.rows[0].cells[i].runtimeStyle.backgroundColor="";
    }
    if(dragColStart!=null && dragColEnd!=null && dragColStart!=dragColEnd){
        change_col(Main_Tab,dragColStart,dragColEnd);
        if(dragColStart==sort_col)sort_col=dragColEnd;
        else if(dragColEnd==sort_col)sort_col=dragColStart;
        document.onclick();
    }
    dragColStart = null;
    dragColEnd = null;
    document.onmousemove=null;
}

function  clickIt() {
    event.cancelBubble=true;
    var the_obj = event.srcElement;
    var i = 0 ,j = 0;
    if(cur_cell!=null && cur_row!=0){
        cur_cell.children[0].contentEditable = false;
        with(cur_cell.children[0].runtimeStyle){
            borderLeft=borderTop="";
            borderRight=borderBottom="";
            backgroundColor="";
            paddingLeft="";
            textAlign="";
        }
    }
    if(the_obj.tagName.toLowerCase() != "table" && the_obj.tagName.toLowerCase() != "tbody" && the_obj.tagName.toLowerCase() != "tr"){
        var the_td    = get_Element(the_obj,"td");
        if(the_td==null) return;
        var the_tr    = the_td.parentElement;
        var the_table    = get_Element(the_td,"table");
        var i         = 0;
        clear_color();
        cur_row = the_tr.rowIndex;
        cur_col = the_td.cellIndex;
        if(cur_row!=0){
            for(i=0;i<the_tr.cells.length;i++){
                with(the_tr.cells[i]){
                    style.backgroundColor=cur_bgc;
                    style.color=cur_fc;
                }
            }
        }else{
            if(show_col){
                for(i=1;i<the_table.rows.length;i++){
                    with(the_table.rows[i].cells[cur_col]){
                        style.backgroundColor=cur_bgc;
                        style.color=cur_fc;
                    }
                }
            }
            
            the_td.mode = !the_td.mode;
            if(sort_col!=null){
                with(the_table.rows[0].cells[sort_col])
                    removeChild(lastChild);
            }
            with(the_table.rows[0].cells[cur_col])
                appendChild(the_td.mode?arrowUp:arrowDown);
            sort_tab(the_table,cur_col,the_td.mode);
            sort_col=cur_col;
        }
    }
}

function  dblclickIt() {
    event.cancelBubble=true;
    if(cur_row!=0){
        var the_obj = event.srcElement;
        if(the_obj.tagName.toLowerCase() != "table" && the_obj.tagName.toLowerCase() != "tbody" && the_obj.tagName.toLowerCase() != "tr"){
            var the_td    = get_Element(the_obj,"td");
            if(the_td==null) return;
            cur_cell    = the_td;
            if(the_td.children.length!=1)
                the_td.innerHTML="<div>" + the_td.innerHTML + "</div>";
            else if(the_td.children.length==1 && the_td.children[0].tagName.toLowerCase()!="div")
                the_td.innerHTML="<div>" + the_td.innerHTML + "</div>";
            cur_cell.children[0].contentEditable = true;
            with(cur_cell.children[0].runtimeStyle){
                borderRight=borderBottom="buttonhighlight 1px solid";
                borderLeft=borderTop="black 1px solid";
                backgroundColor="#dddddd";
                paddingLeft="5px";
                //textAlign="center";
            }
        }
    }
}

function  overIt() {
    if(dragStart)return;
    var the_obj = event.srcElement;
    var i = 0;
    if(the_obj.tagName.toLowerCase() != "table"){
        var the_td    = get_Element(the_obj,"td");
        if(the_td==null) return;
        var the_tr    = the_td.parentElement;
        var the_table    = get_Element(the_td,"table");
        if(the_tr.rowIndex!=0){
            for(i=0;i<the_tr.cells.length;i++){
                with(the_tr.cells[i]){
                    runtimeStyle.backgroundColor=act_bgc;
                    runtimeStyle.color=act_fc;                    
                }
            }
        }else{
            for(i=1;i<the_table.rows.length;i++){
                with(the_table.rows[i].cells(the_td.cellIndex)){
                    runtimeStyle.backgroundColor=act_bgc;
                    runtimeStyle.color=act_fc;
                }
            }
            if(the_td.mode==undefined)the_td.mode = false;
            the_td.style.cursor=the_td.mode?"n-resize":"s-resize";
        }
    }
}

function  outIt() {
    var the_obj = event.srcElement;
    var i=0;
    if(the_obj.tagName.toLowerCase() != "table"){
        var the_td    = get_Element(the_obj,"td");
        if(the_td==null) return;
        var the_tr    = the_td.parentElement;
        var the_table    = get_Element(the_td,"table");
        if(the_tr.rowIndex!=0){
            for(i=0;i<the_tr.cells.length;i++){
                with(the_tr.cells[i]){
                    runtimeStyle.backgroundColor='';
                    runtimeStyle.color='';                
                }
            }
        }else{
            var the_table=the_tr.parentElement.parentElement;
            for(i=0;i<the_table.rows.length;i++){
                with(the_table.rows[i].cells(the_td.cellIndex)){
                    runtimeStyle.backgroundColor='';
                    runtimeStyle.color='';
                }
            }
        }
    }
}
function  sort_tab(the_tab,col,mode) {
    var tab_arr = new Array();
    var i;
    var start=new Date;
    for(i=1;i<the_tab.rows.length;i++){
        tab_arr.push(new Array(the_tab.rows[i].cells[col].innerText.toLowerCase(),the_tab.rows[i]));
    }
    function SortArr(mode) {
        return function (arr1, arr2){
            var flag;
            var a,b;
            a = arr1[0];
            b = arr2[0];
            if(/^(/+|-)?/d+($|/./d+$)/.test(a) && /^(/+|-)?/d+($|/./d+$)/.test(b)){
                a=eval(a);
                b=eval(b);
                flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));
            }else{
                a=a.toString();
                b=b.toString();
                if(a.charCodeAt(0)>=19968 && b.charCodeAt(0)>=19968){
                    flag = judge_CN(a,b,mode);
                }else{
                    flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));
                }
            }
            return flag;
        };
    }
    tab_arr.sort(SortArr(mode));

    for(i=0;i<tab_arr.length;i++){
        the_tab.lastChild.appendChild(tab_arr[i][1]);
    }

    window.status = " (Time spent: " + (new Date - start) + "ms)";
}

function  change_row(the_tab,line1,line2) {
    the_tab.rows[line1].swapNode(the_tab.rows[line2])
}

function  change_col(the_tab,line1,line2) {
    for(var i=0;i<the_tab.rows.length;i++)
        the_tab.rows[i].cells[line1].swapNode(the_tab.rows[i].cells[line2]);
}

function  Move_up(the_table) {
    event.cancelBubble=true;
    if(cur_row==null || cur_row<=1)return;
    change_row(the_table,cur_row,--cur_row);
}

function  Move_down(the_table) {
    event.cancelBubble=true;
    if(cur_row==null || cur_row==the_table.rows.length-1 || cur_row==0)return;
    change_row(the_table,cur_row,++cur_row);
}

function  Move_left(the_table) {
    event.cancelBubble=true;
    if(cur_col==null || cur_col==0)return;
    change_col(the_table,cur_col,--cur_col);
    if(cur_col==sort_col)sort_col=cur_col+1;
    else if(cur_col+1==sort_col)sort_col=cur_col;
}

function  Move_right(the_table) {
    event.cancelBubble=true;
    if(cur_col==null || cur_col==the_table.rows[0].cells.length-1)return;
    change_col(the_table,cur_col,++cur_col);
    if(cur_col==sort_col)sort_col=cur_col-1;
    else if(cur_col-1==sort_col)sort_col=cur_col;
}

function  add_row(the_table)  {
    event.cancelBubble=true;
    var the_row,the_cell;
    the_row = cur_row==null?-1:(cur_row+1);
    clear_color();
    var newrow=the_table.insertRow(the_row);
    for (var i=0;i<the_table.rows[0].cells.length;i++) {
        the_cell=newrow.insertCell(i);
        the_cell.innerText="NewRow_" + the_cell.parentElement.rowIndex;
    }
    read_def(the_table);
}

function  del_row(the_table)  {
    if(the_table.rows.length==1) return;
    var the_row;
    the_row = (cur_row==null || cur_row==0)?-1:cur_row;
    the_table.deleteRow(the_row);
    cur_row = null;
    cur_cell=null;
}

function  add_col(the_table)  {
    event.cancelBubble=true;
    var the_col,i,the_cell;
    the_col = cur_col==null?-1:(cur_col+1);
    var the_title=prompt("Please input the title: ","Untitled");
    if(the_title==null)return;
    if(the_col!=-1 && the_col<=sort_col && sort_col!=null)sort_col++;
    the_title=the_title==""?"Untitled":the_title
    clear_color();
    for(var i=0;i<the_table.rows.length;i++){
        the_cell=the_table.rows[i].insertCell(the_col);
        the_cell.innerText=i==0?the_title:("NewCol_" + the_cell.cellIndex);
    }
    read_def(the_table);
}

function  del_col(the_table)  {
    if(the_table.rows[0].cells.length==1) return;
    var the_col,the_cell;
    the_col = cur_col==null?(the_table.rows[0].cells.length-1):cur_col;
    if(the_col!=-1 && the_col<sort_col && sort_col!=null)sort_col--;
    else if(the_col==sort_col)sort_col=null;
    for(var i=0;i<the_table.rows.length;i++) the_table.rows[i].deleteCell(the_col);
    cur_col = null;
    cur_cell=null;
}

function  res_tab(the_table) {
    the_table.outerHTML=Org_con;
    init();
}

function  exp_tab(the_table) {
    var the_content="";
    document.onclick();
    the_content=the_table.outerHTML;
    the_content=the_content.replace(/ style=/"[^/"]*/"/g,"");
    the_content=the_content.replace(/ mode=/"(false|true)"/g,"");
    the_content=the_content.replace(/ oBgc=/"[/w#/d]*/"/g,"");
    the_content=the_content.replace(/ oFc=/"[/w#/d]*/"/g,"");
    the_content=the_content.replace(/<DIV contentEditable=false>([^<]*)<//DIV>/ig,"$1");
    the_content="<style>table{font-size: 9pt;word-break:break-all;cursor: default;BORDER: black 1px solid;background-color:#eeeecc;border-collapse:collapse;border-Color:#999999;align:center;}</style>/n"+the_content;
    var newwin=window.open("about:blank","_blank","");
    newwin.document.open();
    newwin.document.write(the_content);
    newwin.document.close();
    newwin=null;
}4.源代码下载 /Files/singlepine/movegrid.rar