基于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
				} ;
			}() ;

评论

7 楼 ziyuewang 2011-04-20  

(*^__^*) 嘻嘻……

6 楼 80245089 2011-04-20  

css???

5 楼 ziyuewang 2011-04-17  

谢谢大家的建议！

4 楼 1927105 2011-04-17  

不错，不过个人感觉，要想把一个应用写好的话，得需要丰富的类库，

3 楼 ziyuewang 2011-04-12  

谢谢啊！多多交流！

2 楼 Durian 2011-04-12  

挺好。

我最不爱弄js

1 楼 ziyuewang 2011-04-08  

目前只完成了删除功能，其它功能会陆续完成的！