如何使用Css样式自定义一个DataGrid的风格

原创 2004年06月29日 14:51:00

下面是我写的一个css文件 可以把下面的代码复制到一个写字板里另存为*。css

的文件,例如命名为1024.css

/*---------------------------Datagrid--------------------------------*/
.datagrid
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width :100%;
border :solid 1px blue;
table-layout :fixed ;
border-collapse :separate ;
}
.dg_header
{
font-weight :bold ;
color:#ffffff;
background-color :#4a3c8c;
border :solid 1px red;

}
.dg_alter
{
background-color :#E7E7FF;
border :solid 1px red;
}
.dg_item
{
color :#330099;
background-color:#F7F7F7 ;
border :solid 1px red;
}
.dg_page
{
border :solid 1px red;
}

然后到aspx的文件的Html代码中加入下面一句:

在datagrid的headerStyle中的cssclass属性中写dg_header
ItemStyle中写dg_item 等

就是引用样式表中的dg_header类,这样就可以了,随意设置你想要的样式,只需修改css文件即可
第一次写文章,请大家多多指教

datagrid自定义分页控件

  • qq_31971935
  • qq_31971935
  • 2016年08月10日 17:32
  • 493

easyUI——DataGrid自定义操作列

项目中遇到一个问题:在easyUI的datagrid中增加一列为操作列。官网的demo中没有给出具体的解决问题的方法。解决的思路就是利用单元格的属性formatter中添加内容。...
  • suneqing
  • suneqing
  • 2015年01月31日 15:54
  • 5041

DataGrid 自定义字段内容

因为DataGrid Web 控件的AutoGenerateColumn 属性预设为True,表示会自动产生数据源中所有的字段。如果我们想自订DataGrid Web 控制所要显示的字段,只要将Aut...
  • limshirley
  • limshirley
  • 2017年04月17日 14:16
  • 455

详解WPF 4 DataGrid控件的基本功能

详解WPF 4 DataGrid控件的基本功能 提到DataGrid 不管是网页还是应用程序开发都会频繁使用。通过它我们可以灵活的在行与列间显示各种数据。本篇将详细介绍WPF 4 中DataGrid...
  • jiangxinyu
  • jiangxinyu
  • 2013年03月04日 16:05
  • 4092

datagrid数据格式解析-自定义过滤函数loadFilter

$('#tTable').datagrid({ fit:true, iconCls:'icon-liebiao', width:200, height:450, sing...
  • kunkkaCoco
  • kunkkaCoco
  • 2015年07月27日 15:37
  • 3331

WPF DataGrid自定义样式

WPF DataGrid自定义样式 微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师)。 下面,找到我的小抄造型的网格。它不是100...
  • Metal1
  • Metal1
  • 2014年11月19日 22:43
  • 13117

easyui datagrid自定义操作

很多时候要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jquery easyUI 1.3.2 这里我的实现方式是采用HTML形式,js方式...
  • Pompeii
  • Pompeii
  • 2014年11月19日 20:22
  • 905

easyui 中datagrid的使用方法

由于使用datagrid主要是和数据打交道,所以为了方便就用了js的方式创建数据表格 ...
  • jimscx
  • jimscx
  • 2015年06月03日 23:51
  • 1003

easyui datagrid自定义表头

第一种实现方法: 实现界面: html代码: js代码: $('#tt').treegrid({ url: '/cost/getInfo.do', method: ...
  • tolcf
  • tolcf
  • 2015年09月10日 18:31
  • 4309

easyUI datagrid自定义添加列 (点击事件)

有列表 想添加一个操作列  类似删除之类的   ...
  • nnn_net
  • nnn_net
  • 2016年07月13日 15:42
  • 9824
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何使用Css样式自定义一个DataGrid的风格
举报原因:
原因补充:

(最多只允许输入30个字)