实现gridview 固定gridview列字符串的长度,多余的以...表示

来源:互联网 发布:mac不知管理员名称密码 编辑:程序博客网 时间:2024/06/08 00:48

下面是源码:
先添加js和CSS
<script type="text/javascript" language="javascript">
      
    function DoCheck(flag)// 全选 flag=1 反选 flag=0
    {
        var inputs = document.forms[0].elements;
        for (var i=0; i < inputs.length; i++)
        if (inputs[i].type == 'checkbox')
        {
            if (flag)
                inputs[i].checked = true;
           else
                inputs[i].checked =!inputs[i].checked;
        }
    }
</script>

CSS:
.ellipsis_row { OVERFLOW: hidden; WIDTH: 300px; WHITE-SPACE: nowrap;  TEXT-OVERFLOW: ellipsis; }
.caseweight{OVERFLOW: hidden; WIDTH: 20px; WHITE-SPACE: nowrap; color:Red ;text-align:center ;padding-left:10px;}


-----------------------------------------

gridview控件的设置如下:   其中OnRowDataBound="gvCaseList_RowDataBound" 事件中添加了光棒效果:

<asp:GridView ID="gvCaseList"   runat="server" AutoGenerateColumns="False" OnRowDataBound="gvCaseList_RowDataBound"  >
        <Columns>
       <asp:BoundField HeaderText="类型"  DataField="type" >
                <ControlStyle Width="80px" />
            </asp:BoundField>
                 <asp:TemplateField HeaderText="名称"> <!--把这一列转换为模板列-->                 
                <ControlStyle Width="300px" />
                <ItemTemplate>
                <DIV class="ellipsis_row"><%#DataBinder.Eval(Container.DataItem,"name")%></DIV> <!--这里使用了一个div,通过CSS来控制该列的宽度,多余的字符使用....表示-->                 
                </ItemTemplate>
            </asp:TemplateField>
                 <asp:TemplateField HeaderText="费用"> <!--把这一列转换为模板列-->                
              <ControlStyle Width="20px" />
                <ItemTemplate>
                <div class="caseweight"><%#DataBinder.Eval(Container.DataItem,"fee")%></div><!--把该列的数据用红色显示出来,改变了该的文字样式-->  
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField > <!--把这一列转换为模板列-->                
                <ControlStyle Width="20px"  />
                 <HeaderTemplate> <!--注意这个HeaderTemplate,在这里加了两链接用于全选和反选-->   
                 <a onclick="DoCheck(0);" href="#">反选</a> <!--反选-->
                 <a onclick="DoCheck(1);" href="#">全选</a> <!--全选-->                 
                </HeaderTemplate>
                <ItemTemplate>
                <div style="text-align:center ;">
                    <asp:CheckBox ID="CheckBox1" runat="server"/>
                </div>
                </ItemTemplate>
              
            </asp:TemplateField>
        </Columns>     
       
    </asp:GridView>

后台的光棒效果代码:(注意要添加OnRowDataBound="gvCaseList_RowDataBound"事件)

 protected void gvCaseList_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#FFFF80'");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c;");

        }

    }

 

原创粉丝点击