1.来张效果图
2.知识准备
- 熟悉CSS3,HTML
- 属性Less
3.CSS样式渲染优先级
!important>行内>内嵌>外部引用
4.实现代码
1 /*EasyUI Tree的展开/收缩依赖这个字体，请不要删除他*/ 2 @font-face { 3 font-family: 'FontAwesome'; 4 src: url('../../bootstarp/fonts/fontawesome-webfont.eot?v=4.5.0'); 5 src: url('../../bootstarp/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../../bootstarp/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../../bootstarp/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../../bootstarp/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../../bootstarp/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); 6 font-weight: normal; 7 font-style: normal; 8 } 9 10 /*树型表格样式*/ 11 .comEasyuiTreeGrid { 12 13 .tdBorderStyle() { 14 td { 15 border-style: solid; 16 } 17 } 18 19 .datagrid-row-selected { 20 background-color: rgb(89, 155, 233); 21 /*background-color: transparent;*/ 22 color: #000; 23 } 24 25 .datagrid-row-over { 26 /*background-color: rgba(89, 155, 233, 0.75);*/ 27 } 28 29 .datagrid-header { 30 31 @headCell_H: 40px; 32 height: @headCell_H !important; 33 background: transparent; 34 .tdBorderStyle(); 35 36 .datagrid-header-inner { 37 38 .datagrid-htable { 39 height: @headCell_H !important; 40 background-color: transparent; 41 } 42 43 .datagrid-header-row { 44 height: @headCell_H; 45 //表头所在tr的样式 46 .datagrid-cell { 47 height: @headCell_H; 48 line-height: @headCell_H; 49 50 span { 51 font-size: 14px; 52 font-weight: bold; 53 } 54 /*background-color: red;*/ 55 } 56 } 57 } 58 } 59 60 .datagrid-body { 61 @bodyCell_H: 34px; 62 63 .tdBorderStyle(); 64 65 .datagrid-btable { 66 .datagrid-row { 67 .datagrid-cell { 68 /*height: @bodyCell_H; 69 line-height: @bodyCell_H;*/ 70 /*background-color:red;*/ 71 .fa() { 72 display: inline-block; 73 font: normal normal normal 14px/1 FontAwesome; 74 font-size: 14px; 75 text-rendering: auto; 76 -webkit-font-smoothing: antialiased; 77 -moz-osx-font-smoothing: grayscale; 78 margin-top: 3px; 79 } 80 81 span { 82 height: @bodyCell_H; 83 line-height: @bodyCell_H; 84 background: none; 85 text-align: center; 86 margin-top: 3px; 87 88 &.tree-collapsed:before { 89 //关闭时 90 .fa(); 91 content: "f0da"; 92 } 93 94 &.tree-expanded:before { 95 //展开时 96 .fa(); 97 -moz-transform: rotate(45deg); 98 -ms-transform: rotate(45deg); 99 -o-transform: rotate(45deg); 100 -webkit-transform: rotate(45deg); 101 transform: rotate(45deg); 102 content: "f0da"; 103 } 104 105 &.tree-icon { 106 margin-top: 3px; 107 } 108 //文件夹 109 &.tree-folder:before { 110 .fa(); 111 content: "f07b"; 112 } 113 //文件夹 展开时 114 &.tree-folder-open:before { 115 .fa(); 116 content: "f07c"; 117 } 118 //文件 119 &.tree-file:before { 120 .fa(); 121 content: "f07b"; 122 } 123 } 124 } 125 } 126 } 127 } 128 129 .datagrid-footer { 130 .tdBorderStyle(); 131 } 132 }