以前一直都是再用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 }