网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种
内容
    Grid.htm
    代码如下:
    <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="行"+mIndex+"列"+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('已实现功能')">Grid参数区</button><br>
    <input type=button value="表格背景" id="defineGridBgColorID"><br>
    <input type=button value="头行背景" id="defineFirstRowBgColorID"><br>
    <input type=button value="头列背景" id="defineFirstColBgColorID"><br>
    <input type=button value="当前选择行背景" id="defineCurRowBgColorID"><br>
    <input type=button value="当前选择列背景" id="defineCurColBgColorID"><br>
    <input type=button value="当前选择编辑单元格背景" id="defineCurEditBgColorID"><br>
    <button onclick="window.confirm('未实现功能')">保留功能区</button><br>
    <input type=text value="" id="defineGridRowCount"><button onclick="iGridRowCount=defineGridRowCount.value;">行数</button><br>
    <input type=text value="" id="defineGridColCount"><button onclick="iGridColCount=defineGridColCount.value;">列数</button><br>
    <input type=radio>是<input type=radio>否启动行调整<br>
    <input type=radio>是<input type=radio>否启动列调整<br>
    <input type=radio>是<input type=radio>否启动单元格编辑<br>
    <button onclick="createGrid()">创建表格</button><br>
    </fieldset>
    Grid.htc
    代码如下:
    <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>
    //常量[可以设置为属性]
    var rgbGridBgColor="#E1E4EC";//表格背景
    var rgbFirstRowBgColor="#6699CC";//头行背景
    var rgbFirstColBgColor="#6699CC";//头列背景
    var rgbCurRowBgColor="#BBCCDD";//当前选择行背景
    var rgbCurColBgColor="#BBCCDD";//当前选择列背景
    var rgbCurEditBgColor="#FFFFFF";//当前选择编辑单元格背景
    //表格列数
    var iColCount=0;
    //表格行数
    var iRowCount=0;
    //当前选择行
    var iCurRowIndex=0;
    //当前选择列
    var iCurColIndex=0;
    var bIsDragRow=false;//行是否拖动状态
    var bIsDragCol=false;//列是否拖动状态
    var iDragHistoryRowIndex=0;//拖动前原始行位置索引
    var iDragCurrentRowIndex=0;//拖动后目的行位置索引
    var iDragHistoryColIndex=0;//拖动前原始列位置索引
    var iDragCurrentColIndex=0;//拖动后目的列位置索引
    function initGrid()
    {
    //属性获取
    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";}
    //初始化常量
    iColCount=element.rows(0).cells.length;
    iRowCount=element.rows.length;
    //设置表格样式
    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";
    //设置单元格样式
    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";
    }
    }
    //设置头行样式
    for(iCol=0;iCol<iColCount;iCol++)
    {
    element.rows(0).cells(iCol).style.backgroundColor=rgbFirstRowBgColor;
    }
    //设置头列样式
    for(iRow=1;iRow<iRowCount;iRow++)
    {
    element.rows(iRow).cells(0).style.backgroundColor=rgbFirstColBgColor;
    }
    //设置编辑单元格
    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);
    }
    }
    //绑定列事件
    for(iCol=1;iCol<iColCount;iCol++)
    {
    element.rows(0).cells(iCol).attachEvent("onmouseup",onColHeaderMouseDown);
    }
    //绑定行事件
    for(iRow=1;iRow<iRowCount;iRow++)
    {
    element.rows(iRow).attachEvent("onmouseup",onRowHeaderMouseDown);
    }
    //绑定事件方法
    element.attachEvent("onmousedown",onMouseDown);
    element.attachEvent("onmousemove",onMouseMove);
    element.attachEvent("onmouseup",onMouseUp);
    element.attachEvent("onselectstart",onSelectStart);
    }
    //按下列
    function onColHeaderMouseDown()
    {
    iCurColIndex=window.event.srcElement.cellIndex;
    onColHeaderMouseDownColor(iCurColIndex);
    }
    //按下行
    function onRowHeaderMouseDown()
    {
    iCurRowIndex=window.event.srcElement.parentElement.rowIndex;
    onRowHeaderMouseDownColor(iCurRowIndex);
    }
    //启动编辑单元格
    function onEditTrue()
    {
    var vEditObject=window.event.srcElement;
    vEditObject.contentEditable=true;
    vEditObject.runtimeStyle.backgroundColor=rgbCurEditBgColor;
    }
    //禁止编辑单元格
    function onEditFalse()
    {
    var vEditObject=window.event.srcElement;
    vEditObject.contentEditable=false;
    vEditObject.runtimeStyle.backgroundColor="transparent";
    }
    //Grid鼠标按下
    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鼠标移动
    function onMouseMove()
    {
    if(bIsDragRow==true)
    {
    //拖动行模拟层处理.
    }
    if(bIsDragCol==true)
    {
    //拖动列模拟层处理.
    }
    }
    //Grid鼠标抬起
    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鼠标移出
    function onMouseOut()
    {
    if(bIsDragRow==true)
    {
    bIsDragRow=false;
    }
    if(bIsDragCol==true)
    {
    bIsDragCol=false;
    }
    }
    //Grid选择开始
    function onSelectStart()
    {
    return false;
    }
    //库
    //移动行
    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();
    }
    //移动列
    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();
    }
    //行按下变化
    function onRowHeaderMouseDownColor(pCurRowIndex)
    {
    clearClient();
    for(kIndex=1;kIndex<iColCount;kIndex++)
    {
    element.rows(pCurRowIndex).cells(kIndex).bgColor=rgbCurRowBgColor;
    }
    }
    //列按下变化
    function onColHeaderMouseDownColor(pCurColIndex)
    {
    clearClient();
    for(kIndex=1;kIndex<iRowCount;kIndex++)
    {
    element.rows(kIndex).cells(pCurColIndex).bgColor=rgbCurColBgColor;
    }
    }
    //清除客户区
    function clearClient()
    {
    for(mIndex=1;mIndex<iRowCount;mIndex++)
    {
    for(nIndex=1;nIndex<iColCount;nIndex++)
    {
    element.rows(mIndex).cells(nIndex).bgColor="transparent";
    }
    }
    }
    //单元格事件绑定
    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>
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 18:29:55