<style>
INPUT
{
Defineinputonclick:expression (This.onclick=function () {if (this.type== "button") {This.style.color=choosecolor ();}});
}
</style>
<script>
var igridrowcount=0;
var igridcolcount=0;
function Creategrid ()
{
Divid.innerhtml= "";
if (igridrowcount==0) {igridrowcount=5;}
if (igridcolcount==0) {igridcolcount=5;}
var vtable=document.createelement ("table");
Vtable.style.behavior= "url (grid.htc)";
if (DefineGridBgColorID.style.color)
{Vtable.definegridbgcolor=definegridbgcolorid.style.color;}
if (DefineFirstRowBgColorID.style.color)
{Vtable.definefirstrowbgcolor=definefirstrowbgcolorid.style.color;}
if (DefineFirstColBgColorID.style.color)
{Vtable.definefirstcolbgcolor=definefirstcolbgcolorid.style.color;}
if (DefineCurRowBgColorID.style.color)
{Vtable.definecurrowbgcolor=definecurrowbgcolorid.style.color;}
if (DefineCurColBgColorID.style.color)
{Vtable.definecurcolbgcolor=definecurcolbgcolorid.style.color;}
if (DefineCurEditBgColorID.style.color)
{Vtable.definecureditbgcolor=definecureditbgcolorid.style.color;}
for (mindex=0;mindex<igridrowcount;mindex++)
{
var vtr=vtable.insertrow (Mindex);
for (nindex=0;nindex<igridcolcount;nindex++)
{
Vtd=vtr.insertcell (nindex);
vtd.innertext= "Row" +mindex+ "column" +NINDEX;
}
}
Divid.appendchild (vTable);
}
function Choosecolor ()
{
var strcolor=dlghelper.choosecolordlg ();
Strcolor=strcolor.tostring (16);
if (strcolor.length<6)
{
var stempstring= "000000". substring (0,6-strcolor.length);
Strcolor=stempstring.concat (Strcolor);
}
return strcolor;
}
</script>
<div id= "divID" ></div>
<object id= "Dlghelper" classid= "clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width= "0px" height= "0px" ></ Object>
<fieldset>
<button onclick= "window.confirm (' implemented function ')" >grid parameter area </button><br>
<input Type=button value= "table Background" id= "Definegridbgcolorid" ><br>
<input Type=button value= "head row Background" id= "Definefirstrowbgcolorid" ><br>
<input Type=button value= "header Background" id= "Definefirstcolbgcolorid" ><br>
<input Type=button value= "Current select row Background" id= "Definecurrowbgcolorid" ><br>
<input Type=button value= "Current Select column Background" id= "Definecurcolbgcolorid" ><br>
<input Type=button value= "Currently selected edit cell background" id= "Definecureditbgcolorid" ><br>
<button onclick= "window.confirm (' not implemented feature ')" > Reserved Ribbon </button><br>
<input type=text value= "id=" Definegridrowcount "><button onclick=" Igridrowcount=definegridrowcount.value ;" > Number of lines </button><br>
<input type=text value= "id=" Definegridcolcount "><button onclick=" Igridcolcount=definegridcolcount.value ;" > Number of Columns </button><br>
<input type=radio> is <input type=radio> no start line adjustment <br>
<input type=radio> is <input type=radio> no boot column adjustment <br>
<input type=radio> is <input type=radio> no start cell editing <br>
<button onclick= "Creategrid ()" > CREATE TABLE </button><br>
</fieldset>
<public:property name= "Definegridbgcolor" >
<public:property name= "Definefirstrowbgcolor" >
<public:property name= "Definefirstcolbgcolor" >
<public:property name= "Definecurrowbgcolor" >
<public:property name= "Definecurcolbgcolor" >
<public:property name= "Definecureditbgcolor" >
<public:attach event=oncontentready onevent= "Initgrid ()" >
<script>
Constants [can be set to properties]
var rgbgridbgcolor= "#E1E4EC";//Table background
var rgbfirstrowbgcolor= "#6699CC";//header row background
var rgbfirstcolbgcolor= "#6699CC";//Header column background
var rgbcurrowbgcolor= "#BBCCDD";//Current Select row background
var rgbcurcolbgcolor= "#BBCCDD";//Current Select column background
var rgbcureditbgcolor= "#FFFFFF";//Current selection edit cell background
Number of table columns
var icolcount=0;
Number of table rows
var irowcount=0;
Current selection Line
var icurrowindex=0;
Current selection column
var icurcolindex=0;
var bisdragrow=false;//row Drag State
var bisdragcol=false;//column Drag state
var idraghistoryrowindex=0;//the original row position index before dragging
var idragcurrentrowindex=0;//the destination row position index after dragging
var idraghistorycolindex=0;//the original column position index before dragging
var idragcurrentcolindex=0;//destination column position index after dragging
function Initgrid ()
{
Property gets
if (Definegridbgcolor)
{Rgbgridbgcolor=definegridbgcolor;} Else{rgbgridbgcolor= "#E1E4EC";}
if (Definefirstrowbgcolor)
{Rgbfirstrowbgcolor=definefirstrowbgcolor;} Else{rgbfirstrowbgcolor= "#6699CC";}
if (Definefirstcolbgcolor)
{Rgbfirstcolbgcolor=definefirstcolbgcolor;} Else{rgbfirstcolbgcolor= "#6699CC";}
if (Definecurrowbgcolor)
{Rgbcurrowbgcolor=definecurrowbgcolor;} Else{rgbcurrowbgcolor= "#BBCCDD";}
if (Definecurcolbgcolor)
{Rgbcurcolbgcolor=definecurcolbgcolor;} Else{rgbcurcolbgcolor= "#BBCCDD";}
if (Definecureditbgcolor)
{Rgbcureditbgcolor=definecureditbgcolor;} Else{rgbcureditbgcolor= "#FFFFFF";}
Initializing constants
Icolcount=element.rows (0). Cells.length;
Irowcount=element.rows.length;
Set Table Styles
Element.style.backgroundcolor=rgbgridbgcolor;
element.border= "0";
element.cellspacing= "1";
element.cellpadding= "0";
Element.width= "80%";
element.style.borderleft= "1px solid #000000";
Element.style.borderbottom= "1px solid #000000";
Set cell styles
for (irow=0;irow<irowcount;irow++)
{
for (icol=0;icol<icolcount;icol++)
{
Element.rows (IRow). Cells (icol) style.bordertop= "1px solid #000000";
Element.rows (IRow). Cells (icol) style.borderright= "1px solid #000000";
}
}
Set header row Style
for (icol=0;icol<icolcount;icol++)
{
Element.rows (0). Cells (icol). Style.backgroundcolor=rgbfirstrowbgcolor;
}
Set Header column Style
for (irow=1;irow<irowcount;irow++)
{
Element.rows (IRow). Cells (0). Style.backgroundcolor=rgbfirstcolbgcolor;
}
Set Edit Cells
for (mindex=1;mindex<irowcount;mindex++)
{
for (nindex=1;nindex<icolcount;nindex++)
{
var vtext=element.rows (Mindex). Cells (nindex). InnerHTML;
Element.rows (Mindex). Cells (nindex) innerhtml= "<div contenteditable=false>" +vtext+ "</div>";
Element.rows (Mindex). Cells (nindex). Children[0].attachevent ("onclick", onedittrue);
Element.rows (Mindex). Cells (nindex). Children[0].attachevent ("onblur", Oneditfalse);
}
}
Bound Column Events
for (icol=1;icol<icolcount;icol++)
{
Element.rows (0). Cells (Icol). attachevent ("onmouseup", Oncolheadermousedown);
}
Bound Row Events
for (irow=1;irow<irowcount;irow++)
{
Element.rows (IRow). attachevent ("onmouseup", Onrowheadermousedown);
}
Binding Event Method
Element.attachevent ("onmousedown", onmousedown);
Element.attachevent ("OnMouseMove", onmousemove);
Element.attachevent ("onmouseup", onmouseup);
Element.attachevent ("onselectstart", onselectstart);
}
Press the following
function Oncolheadermousedown ()
{
Icurcolindex=window.event.srcelement.cellindex;
Oncolheadermousedowncolor (Icurcolindex);
}
Press the downlink
function Onrowheadermousedown ()
{
Icurrowindex=window.event.srcelement.parentelement.rowindex;
Onrowheadermousedowncolor (Icurrowindex);
}
Start editing cells
function Onedittrue ()
{
var veditobject=window.event.srcelement;
Veditobject.contenteditable=true;
Veditobject.runtimestyle.backgroundcolor=rgbcureditbgcolor;
}
Prohibit editing cells
function Oneditfalse ()
{
var veditobject=window.event.srcelement;
Veditobject.contenteditable=false;
veditobject.runtimestyle.backgroundcolor= "Transparent";
}
Grid mouse Down
function OnMouseDown ()
{
if (window.event.srcElement.tagName.toUpperCase () = = "TD")
{
if (window.event.srcelement.cellindex==0)
{
Bisdragrow=true;
Idraghistoryrowindex=window.event.srcelement.parentelement.rowindex;
}
if (window.event.srcelement.parentelement.rowindex==0)
{
Bisdragcol=true;
Idraghistorycolindex=window.event.srcelement.cellindex;
}
}
}
Grid mouse Movement
function OnMouseMove ()
{
if (bisdragrow==true)
{
Drag rows to simulate layer processing.
}
if (bisdragcol==true)
{
Drag the column to simulate layer processing.
}
}
Grid Mouse Lift
function OnMouseUp ()
{
if (bisdragrow==true)
{
if (window.event.srcElement.tagName.toUpperCase () = = "TD")
{
if (window.event.srcelement.cellindex==0)
{
Idragcurrentrowindex=window.event.srcelement.parentelement.rowindex;
if (idraghistoryrowindex!=0&&idragcurrentrowindex!=0)
{
Moverow (Idraghistoryrowindex,idragcurrentrowindex);
}
}
}
}
if (bisdragcol==true)
{
if (window.event.srcElement.tagName.toUpperCase () = = "TD")
{
if (window.event.srcelement.parentelement.rowindex==0)
{
Idragcurrentcolindex=window.event.srcelement.cellindex;
if (idraghistorycolindex!=0&&idragcurrentcolindex!=0)
{
Movecol (Idraghistorycolindex,idragcurrentcolindex);
}
}
}
}
Bisdragrow=false;
Bisdragcol=false;
}
Grid Mouse Move out
function onmouseout ()
{
if (bisdragrow==true)
{
Bisdragrow=false;
}
if (bisdragcol==true)
{
Bisdragcol=false;
}
}
Grid Select Start
function onselectstart ()
{
return false;
}
Library
Move row
function Moverow (ifromindex,itoindex)
{
var strfromarray=new Array (Icolcount);
var strtoarray=new Array (Icolcount);
for (mindex=0;mindex<icolcount;mindex++)
{
Strfromarray[mindex]=element.rows (Ifromindex). Cells (Mindex). InnerHTML;
Strtoarray[mindex]=element.rows (Itoindex). Cells (Mindex). InnerHTML;
}
for (nindex=0;nindex<icolcount;nindex++)
{
Element.rows (Ifromindex). Cells (nindex). Innerhtml=strtoarray[nindex];
Element.rows (Itoindex). Cells (nindex). Innerhtml=strfromarray[nindex];
}
Onrowheadermousedowncolor (Itoindex);
Cellattachevent ();
}
Move column
function Movecol (ifromindex,itoindex)
{
var strfromarray=new Array (Irowcount);
var strtoarray=new Array (Irowcount);
for (mindex=0;mindex<irowcount;mindex++)
{
Strfromarray[mindex]=element.rows (Mindex). Cells (Ifromindex). InnerHTML;
Strtoarray[mindex]=element.rows (Mindex). Cells (Itoindex). InnerHTML;
}
for (nindex=0;nindex<irowcount;nindex++)
{
Element.rows (nindex). Cells (Ifromindex). Innerhtml=strtoarray[nindex];
Element.rows (nindex). Cells (Itoindex). Innerhtml=strfromarray[nindex];
}
Oncolheadermousedowncolor (Itoindex);
Cellattachevent ();
}
Line down Change
function Onrowheadermousedowncolor (pcurrowindex)
{
Clearclient ();
for (kindex=1;kindex<icolcount;kindex++)
{
Element.rows (Pcurrowindex). Cells (Kindex). Bgcolor=rgbcurrowbgcolor;
}
}
Column down Change
function Oncolheadermousedowncolor (pcurcolindex)
{
Clearclient ();
for (kindex=1;kindex<irowcount;kindex++)
{
Element.rows (Kindex). Cells (Pcurcolindex). Bgcolor=rgbcurcolbgcolor;
}
}
Clear Customer Area
function Clearclient ()
{
for (mindex=1;mindex<irowcount;mindex++)
{
for (nindex=1;nindex<icolcount;nindex++)
{
Element.rows (Mindex). Cells (nindex). bgcolor= "Transparent";
}
}
}
Cell Event Bindings
function Cellattachevent ()
{
for (mindex=1;mindex<irowcount;mindex++)
{
for (nindex=1;nindex<icolcount;nindex++)
{
Element.rows (Mindex). Cells (nindex). Children[0].attachevent ("onclick", onedittrue);
Element.rows (Mindex). Cells (nindex). Children[0].attachevent ("onblur", Oneditfalse);
}
}
}
</script>
