扩展DataGrid的客户端功能

我们知道DataGrid最终呈现在浏览器中为一个table ,为此我们丰富DataGrid的客户端功能其实就是使用javascript对table的操作。比如我们单击TABLE的某行时，它的颜色和其他行区别开来，同时我们也可以获取该行每列的数据。我们把该功能实现在一个HTC文件中，在CSS中引用该文件，然后在DataGrid 中应用该样式（CssClass="dataGrid"）同时应用ItemStyle样式（<ItemStyle CssClass="dataGridItem"></ItemStyle>）样式表定义如下：

.dataGrid
{
    border-top: 0px;
    behavior: url(../HTC/DataGrid.htc);
    overflow: auto;
    border-left: 0px;
    width: 100%;
    border-bottom: 0px;
    height: 100%;
    background-color: #757575;
}
.dataGridHeader
{
    background-image: url(../Images/other/bg_td.gif);
    background-color: transparent;
}
.dataGridItem
{
    border-right: #000075 2px solid;
    border-top: #000075 2px solid;
    background-image: none;
    border-left: #000075 2px solid;
    background-color: #efefef;
    cursor: hand;
}
.dataGridAlternatingItem
{
    background-color: #5522ff;
}

.dataGridSelectItem
{
    cursor: hand;
    background-color: lightgrey;
}

同时我们编写DataGrid.htc文件

<!--
            此处封装对DataGrid的相关操作
Create:2004-11-19    Version:Jewel.1.0    Author:maojun
//使用方法,在dataGrid里定义class=dataGrid, 事件响应函数selectIndexChange,同时定义keyIndex=0
然后在函数里可以通过.key属性获取当前选择的关键字,同时可以通过event.srcRow获取当前选择的行
-->
<public:component name="DataGridHTC" id="DataGridHTC">
<public:attach event=oncontentready onevent="element_ready()" />
<public:attach event=onclick onevent="row_click()" />

<public:event name="selectIndexChange" id="eventSelectIndexChange" />

<public:property name="key" id="key" get="getSelectKey" />

</public:component>

<script language="javascript">

    var myNowRow;
    var myKeyIndex;
    var myOldRow;
    var myBeginRow = 0;   //开始的行，一般为第一行，但如果有分页索引号的话，就是第2行
    //var myOldClass;
    
    function element_ready(){
        myKeyIndex = element.getAttribute("keyIndex");
        var b = parseInt(element.getAttribute("beginRow"));
        if(b!=NaN){
            myBeginRow = b;
        }
    }

    function row_click(){
        var oRow = getRow(event.srcElement);
        if(oRow==null){
            return;
        }
        if(myNowRow==oRow){
        //    如果是点击当前行,则不作处理
            return;
        }
    //    var headerRow = element.rows[myBeginRow];
    //    if(oRow==headerRow){
            //如果是点击了第一行,则也不做处理
    //        return;
    //    }
        if(oRow.className!="dataGridItem"){
            return ;
        }
        
        if(oRow != null){   
            if(myNowRow!=null){    
            //如果已有过点击,则这个是上次点击的记录
                myOldRow = myNowRow
                myOldRow.className = "dataGridItem";
            }
            
            oRow.className = "dataGridSelectItem";
            //myOldClass = oRow.className;
            myNowRow = oRow;    

            var evt = createEventObject();
            evt.srcRow = myNowRow
            eventSelectIndexChange.fire(evt);
            element.setAttribute("keyValue", this.key);
        }
        //alert(oRow.cells[0].innerText);
    }
    function getRow(oElement){
        var tagName = oElement.tagName;
        tagName = (tagName != null) ? tagName.toLowerCase() : null;
        var parentObj = oElement.parentElement.parentElement;       
        while(oElement != null && tagName != null && tagName != "tr"){
            oElement = oElement.parentElement;
            parentObj = oElement.parentElement.parentElement;
            tagName = oElement.tagName;
            tagName = (tagName != null) ? tagName.toLowerCase() : null;
        }
        if(parentObj.className=="dataGrid"){
            setdataitemcss(parentObj);
            return oElement;
        }else{
            return null;
        }
    }
    function setdataitemcss(oElement){
        var tagName = oElement.children[0].tagName;
        if(tagName==null){
            return;
        }
        tagName=tagName.toLowerCase();
        while(tagName!="tr" && tagName != null && oElement!=null){
                oElement=oElement.children[0];
                tagName=oElement.children[0].tagName.toLowerCase();
        }
        if(tagName=="tr"){
            for(var i=0;i<oElement.children.length;i++)
            {                
                var childElement = oElement.children[i];
                if(childElement.className=="dataGridSelectItem")
                {
                    childElement.className="dataGridItem";
                }
            }
        }    
    }
    
    function getSelectKey(){
        if(myNowRow!=null && typeof(myNowRow)!="undefined"){
            return myNowRow.cells[myKeyIndex].innerText;
        }else{
            return "";
        }
    }
    
//<public:attach event=onmouseover onevent="row_mouseOver()"/>
//<public:attach event=onmouseout onevent="row_mouseOut()"/>
    //function row_mouseOver(){
    //    var oRow = getRow(event.srcElement);
        //if(oRow != null){
        //    myOldClass = oRow.className;
        //    oRow.className = "dataGridMouseOverItem";
    //    }
    //}
    //function row_mouseOut(){
        //var oRow = getRow(event.srcElement);
        //if(oRow != null){
        //    oRow.className = myOldClass;
        //}
    //}
</script>

在这里我们响应contentready事件和click事件，同时当所选的行发生改变时我们触发自定义事件eventSelectIndexChange，并把当前所选的行作为事件参数传递给事件响应函数selectIndexChange。下面是我们对DataGrid的定义：
<asp:datagrid id="dg_goodinfo" runat="server" EnableViewState="false" CssClass="dataGrid" Width="100%" selectIndexChange="getRowData();">
同时我们定义函数getRowData的处理过程

function getRowData(){
                document.all("txt_subject").value=event.srcRow.cells[19].innerText;
                document.all("txt_goodsname").value=event.srcRow.cells[1].innerText;
                document.all("txt_amoumt").value=event.srcRow.cells[6].innerText;
                
                                document.all("txt_locus").value=event.srcRow.cells[20].innerText;
                document.all("txt_standard").value=event.srcRow.cells[9].innerText;
..
..
..
                
            }