Imitate the Easyui of the DataGrid to do, only to do a general, later slowly optimize and add functionality
CSS Styles
/*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;}
customizing jquery
JavaScript document$ (function () {var dataGrid = function (Ele, opt) {this.defaults = {id: "", Url:null, Pagesize:10, pageindex:1} this.settings = $.extend ({}, THIS.D Efaults, 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></tr></thead><tbody></tbody>"); This.createtablehead (Json.columns,id); This.createtablebody (Json,id); },//Loop Add Table header Createtablehead:function (headcols,id) {for (var i = 0; i < headcols.length; i++ {$ ("#" + ID). Find ("Thead tr"). Append ("<th>" + headcols[i].title + "</th>"); }},//loop add row CreatetablebOdy:function (json,id) {var rowsdata= ""; for (var rows=0;rows<json.data.length;rows++) {rowsdata+= "<tr>"; for (var cols = 0; cols < json.columns.length;cols++) {rowsdata+= ' <td> ' + Json.data[rows][json.columns[cols].field] + ' </td> ';} rowsdata+= "</tr>";} $ ("#" + ID). Find ("Tbody"). Append (Rowsdata); }, Bindevent:function () {var id = this.settings.id; Add mouse hover Event $ ("#" + ID). Find ("Tbody tr"). MouseOver (function () {$ (this). addclass ("MouseOver"); }). MouseLeave (function () {$ (this). Removeclass ("MouseOver"); }); Add an interlaced//$ ("#" + ID). Find ("Tr:odd"). CSS ("Background-color", "#A77C7B"). CSS ("Color", "#fff"); }, Getajaxdate:function (URL, parms) {//defines a global variable to accept the return value of $post var result; Synchronize with Ajax $.ajax ({url:url, async:false,//change to synchronous mode data:parms , Success:function (data) {result = data; } }); return result; }} $.fn.grid = function (options) {var Grid = new DataGrid (this, options); Return This.each (function () {grid.init (); }); }})
HTML page Call
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Untitled Document</title><Scriptsrc= "Jquery-1.8.0.min.js"></Script><Linkrel= "stylesheet"type= "Text/css"href= "Style.css"><Scriptsrc= "Pagetion.js"></Script><Scripttype= "Text/javascript">$(function(){ $("#dg"). Grid ({ID:"DG", URL:"Data.json" }); });</Script></Head><Body><formID= "Form1"><TableID= "DG"></Table></form></Body></HTML>
Browser display
Customizing the jquery Table plugin