Customize jquery table plug-in and jquery table

Customize jquery table plug-in and jquery table

It imitates the datagrid of easyui and only makes a rough picture. It will be optimized and added later.

Css style

/* 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 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;    text-align: center;}.mouseover {    background-color: #3A99AB;    color: #FFF;}

Custom jquery

// JavaScript Document $ (function () {var dataGrid = function (ele, opt) {this. defaults = {id: "", url: null, pageSize: 10, pageindex: 1} this. settings = $. extend ({}, this. defaults, opt);} dataGrid. prototype = {init: function () {this. create (); this. bindEvent () ;}, create: function () {var json = this. getAjaxDate (this. settings. url, null); var id = this. settings. id; $ ("#" + id ). append ("<thead> <tr> </thead> <tbody> </tbody>"); this. createTableHead (json. columns, id); this. createTableBody (json, id) ;}, // cyclically Add the header createTableHead: function (headcols, id) {for (var I = 0; I 
Json File
{"Columns": [{"field": "time", "title": "Release Date" },{ "field": "title", "title ": "title" },{ "field": "author", "title": "author"}], "data": [{"time ", "title": "dynamically generated grid", "author": "Administrator" },{ "time": "", "title": "dynamically generated grid ", "author": "Administrator" },{ "time": "2014-01-01", "title": "dynamically generated grid", "author": "Administrator "}, {"time": "2014-01-01", "title": "dynamic grid generation", "author": "Administrator"}]}
Html page call
<! Doctype html> 
Browser display