easyui datagrid 去掉外边框及行与行之间的横线标题字体
这是以前写的一个项目中写的东西,为了让datagrid样式好看,所有做的这个处理:
今天同事又问到于是记录下来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $( '#id' ).datagrid({ width: '99%' , height: 150, fit: false , nowrap: true , url: 'url地址' , singleSelect: true , columns: [ [ { field: 'TaskName' , title: '标题' , width: '100%' , formatter: function (v, rd, i) { if (v != undefined) { return '<img src="../Images/roundpoint.png"></img> <a href="#" onclick= ReportDetails(\'' + rd.MatTypeInt + '\',\'' + rd.PeriodNo + '\',\'' + rd.TaskId + '\',\'' + v + '\',\'' + rd.MatType + '\') class="href-noneline-blacknofont" >' + v + ',' + '<span class="red-font">' + rd.MatType + '</span>总数' + '<span class="red-font">' + rd.PriceCount + '</span>条' ; } } } ] ], onLoadSuccess: function (data) { var panel = $( this ).datagrid( 'getPanel' ); var tr = panel.find( 'div.datagrid-body tr' ); tr.each( function () { var td = $( this ).children( 'td' ); td.css({ "border-width" : "0" }); ; }); } }); |
关键是:
1 2 3 4 5 6 7 8 9 | onLoadSuccess: function (data) { var panel = $( this ).datagrid( 'getPanel' ); var tr = panel.find( 'div.datagrid-body tr' ); tr.each( function () { var td = $( this ).children( 'td' ); td.css({ "border-width" : "0" }); }); |
下面是去外边框线:
#idDiv .datagrid-header {
position: absolute;
visibility: hidden;
}
#idDiv .datagrid-body {
overflow: hidden;
}
标题字体:
#iddiv .datagrid-header .datagrid-cell span {
font-size: 18px;
font-family: "黑体";
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现