columns样式 jquery_创建自己的jquery表格插件

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

由于涉及到ajax访问，所以必须部署到iis上才能看出效果，先给大家看一下效果图：

css样式

/* CSS Document */

body {

font: 14px/1.43 "Helvetica Neue", Tahoma, "Microsoft YaHei", Arial;

color: #253443;

margin: 0 auto;

padding: 0 auto;

}

table {

border-collapse: collapse;

border-spacing: 0;

background: #FFF;

font-size: 12px;

width: 100%;

border: 1;

width: 100%;

}

thead {

display: table-header-group;

vertical-align: middle;

border-color: inherit;

}

tr {

display: table-row;

vertical-align: inherit;

border-color: inherit;

}

table thead tr {

background-color: #E6F0FF;

}

table thead tr th {

padding: 5px 8px;

font-weight: normal;

color: #999;

border-bottom: 1px solid #B50802;

vertical-align: bottom;

line-height: 20px;

}

tbody {

display: table-row-group;

vertical-align: middle;

border-color: inherit;

}

table tbody tr td {

padding: 8px;

border-top: 0px;

border-bottom: 1px solid #DDD;

vertical-align: middle;

line-height: 20px;

}

table tfoot tr td {

width: 100%;

background-color: #F4F4F4;

height: 20px;

padding: 8px 0px;

color: #000;

}

table tfoot tr td input {

width: 30px;

float: left;

}

table tfoot tr td span {

display: inline-block;

cursor: pointer;

height:20px;

padding:0 10px;

float: left;

}

.mouseover {

background-color: #EAF2FF;

color: #000;

}

JSON文件

{

"total":16,

"rows": [

{

"ID": 1,

"name": "公共js和公共css样式部分",

"descrtion":"描述公共js和公共css样式部分",

"Price": 950

},

{

"ID": 2,

"name": "自定义特性(如：皮肤风格选择等)部分",

"descrtion":"描述自定义特性(如：皮肤风格选择等)",

"Price": 5500

},

{

"ID": 3,

"name": "具体定义及实现部分",

"descrtion":"描述具体定义及实现部分",

"Price": 150

},

{

"ID": 4,

"name": "