以前一直都是再用easyui插件来实现各种功能,但是easyui太过于庞大,使用越多对服务器负载影响越大。

基于此,在模仿easyui的dataGrid表格插件的同时,自己去封装了一个。实现了基本的json数据的动态加载,自动分页,全选全不选,鼠标悬浮变色,隔行变色等

由于涉及到ajax访问,所以必须部署到iis上才能看出效果

css样式

 1 /* CSS Document */
 2 body {
 3     font: 14px/1.43 "Helvetica Neue", Tahoma, "Microsoft YaHei", Arial;
 4     color: #253443;
 5     margin: 0 auto;
 6     padding: 0 auto;
 7 }
 8 table {
 9     border-collapse: collapse;
10     border-spacing: 0;
11     background: #FFF;
12     font-size: 12px;
13     width: 100%;
14     border: 1;
15     width: 100%;
16 }
17 thead {
18     display: table-header-group;
19     vertical-align: middle;
20     border-color: inherit;
21 }
22 tr {
23     display: table-row;
24     vertical-align: inherit;
25     border-color: inherit;
26 }
27 table thead tr {
28     background-color: #E6F0FF;
29 }
30 table thead tr th {
31     padding: 5px 8px;
32     font-weight: normal;
33     color: #999;
34     border-bottom: 1px solid #B50802;
35     vertical-align: bottom;
36     line-height: 20px;
37 }
38 tbody {
39     display: table-row-group;
40     vertical-align: middle;
41     border-color: inherit;
42 }
43 table tbody tr td {
44     padding: 8px;
45     border-top: 0px;
46     border-bottom: 1px solid #DDD;
47     vertical-align: middle;
48     line-height: 20px;
49 }
50 table tfoot tr td {
51     width: 100%;
52     background-color: #F4F4F4;
53     height: 20px;
54     padding: 8px 0px;
55     color: #000;
56 }
57 table tfoot tr td input {
58     width: 30px;
59     float: left;
60 }
61 table tfoot tr td span {
62     display: inline-block;
63     cursor: pointer;
64     height:20px;
65     padding:0 10px;
66     float: left;
67 }
68 .mouseover {
69     background-color: #EAF2FF;
70     color: #000;
71 }
CSS

相关文章:

  • 2021-11-06
  • 2022-12-23
  • 2021-12-26
  • 2021-09-01
  • 2022-12-23
  • 2022-12-23
  • 2021-09-04
  • 2022-01-20
猜你喜欢
  • 2021-08-23
  • 2021-08-02
  • 2022-01-18
  • 2021-08-11
相关资源
相似解决方案