基于JQuery写的Grid，大家多多指点
截图 :
$(function(){var settings = {title : "用户信息" ,renderTo : "foo" ,headers : ["姓 名","年 龄","性 别","城 市","联系方式","备 注"] ,list : [{name:"wangziyue",age:"28",sex:"男",fromTo:"北京",tel:"13146253513",note:"我是一名程序员!"} ,{name:"zhangsan",age:"22",sex:"女",fromTo:"北京",tel:"13520454933",note:"你好世界 。。。 。。。"} ,{name:"lisi",age:"32",sex:"男",fromTo:"北京",tel:"13423356789",note:"今天心情不,今天心情不,今天心情不错 。。。 。。。"} ,{name:"wangwu",age:"18",sex:"女",fromTo:"北京",tel:"13214467780",note:"你好世界 。。。 。。。"} ,{name:"sunliu",age:"45",sex:"女",fromTo:"北京",tel:"13801139027",note:"你好世界 。。。 。。。"}] ,commands : [{name : "+ 添加" ,cmd : "add"} ,{name : "- 删除" ,cmd : "del"} ,{name : "修 改" ,cmd : "mod"}]} ;XGrid.load(settings) ;}) ;var XGrid = function(){var records = [] ;function _isChecked(){var jq_checker = $("input[@type=checkbox]:checked") ;var size = jq_checker.size() ;return (1 == size) ? true : false ; } ;function _curd(cmd,id){if("add" == cmd){_add() ;}else if("del" == cmd){_delete(id) ;}else if("mod" == cmd){}else{alert("无效的参数" + cmd + "!") ;return ;}} ;function _add(){var _div = $("<div></div>").addClass("data_add").appendTo("body") ;var _top = parseInt(document.documentElement.clientHeight / 2 - _div.height() / 2) ;var _left = parseInt(document.documentElement.clientWidth / 2 - _div.width() / 2) ;var _css = {top : _top + "px" ,left : _left + "px" ,display : "none"} ;_div.css(_css).fadeIn("normal") ;} ;function _delete(id){var i = 0 ;for(;i<records.length;i++){var record = records[i] ;if(id == record.id){break ;}}records.splice(i,1) ;_reload() ;}function _reload(){var _table = $(".data_grid").find("tbody#mytbody").empty() ;for(var i=0;i<records.length;i++){var r = records[i] ;var assId = r.id ;var _tr = $("<tr></tr>").css("display","none").appendTo(_table).fadeIn("slow") ;var _td_ = $("<td></td>").appendTo(_tr) ;$("<input type='checkbox' />").attr("assId",assId).appendTo(_td_) ;var name = $("<td></td>").html(r.name).appendTo(_tr) ;var age = $("<td></td>").html(r.age).appendTo(_tr) ;var sex = $("<td></td>").html(r.sex).appendTo(_tr) ;var fromTo = $("<td></td>").html(r.fromTo).appendTo(_tr) ;var tel = $("<td></td>").html(r.tel).appendTo(_tr) ;var note = $("<td></td>").html(r.note).appendTo(_tr) ;}}function _validate(){} ;function _render(settings){var title = settings.title ;var renderTo = settings.renderTo ;var headers = settings.headers ;var list = settings.list ;var commands = settings.commands ;var dataGrid = $("<div></div>").addClass("data_grid").appendTo("body") ;var dataHeader = $("<div></div>").addClass("data_header").html(title).appendTo(dataGrid) ;var dataCommand = $("<div></div>").addClass("data_command").appendTo(dataGrid) ;for(var i=0;i<commands.length;i++){var command = commands[i] ;var name = command.name ;var cmd = command.cmd ;$("<a href='#'></a>").attr("cmd",cmd).html(name).click(function(){if(_isChecked()){var id = $("input[@type=checkbox]:checked").attr("assId") ;_curd($(this).attr("cmd"),id) ;}else{alert("请选择并且只能选择一项!") ;}}).appendTo(dataCommand) ;}var dataList = $("<div></div>").addClass("data_list").appendTo(dataGrid) ;var _table = $("<table cellspacing='1' cellpadding='0'></table>").appendTo(dataList) ;var _tr = $("<tr></tr>").appendTo(_table) ;var checker = $("<th></th>").html("选 择").appendTo(_tr) ;for(var j=0;j<headers.length;j++){var header = headers[j] ;$("<th></th>").html(header).appendTo(_tr) ;}var _tbody = $("<tbody></tbody>").attr("id","mytbody").appendTo(_table) ;for(var k=0;k<list.length;k++){var data = list[k] ;var assId = _getAssId() ;var _tr_ = $("<tr></tr>").appendTo(_tbody) ;var _td_ = $("<td></td>").appendTo(_tr_) ;$("<input type='checkbox' />").attr("assId",assId).appendTo(_td_) ;for(var prop in data){$("<td></td>").html(data[prop]).appendTo(_tr_) ;}data.id = assId ;records[records.length] = data ;}} ;function _getAssId(){var myString = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","_"] ;var assId = "" ;for(var i=0;i<8;i++){var assIndex = parseInt(Math.random() * myString.length) ;assId += myString[assIndex] ;}return assId ;}function load(settings){_render(settings) ;} ;return {load : load} ;}() ; 2 楼 Durian 2011-04-12 挺好。