JavaScript模拟数据库curd(包含数据导入导出，操作日志)

说明 : 正在开发中

截图 :

		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				var config = {
					version : "1.0" ,
					modules : [
						{
							name : "数据表" ,
							id : "grid" ,
							apps : [
									{
										id : "grid_add" ,
										name : "创建数据表" ,
										icon : "grid-new.png" ,
									} ,
									{
										id : "grid_edit" ,
										name : "修改数据表" ,
										icon : "grid-edit.png" ,
									} ,
									{
										id : "grid_del" ,
										name : "删除数据表" ,
										icon : "grid-del.png" ,
									} ,
									{
										id : "grid_find" ,
										name : "检索数据表" ,
										icon : "grid-find.png" ,
									}
							]
						} ,
						{
							name : "数据库" ,
							id : "database" ,
							apps : [
									{
										id : "database_add" ,
										name : "创建数据库" ,
										icon : "database-new.png" ,
									} ,
									{
										id : "database_edit" ,
										name : "修改数据库" ,
										icon : "database-edit.png" ,
									} ,
									{
										id : "database_del" ,
										name : "删除数据库" ,
										icon : "database-del.png" ,
									} ,
									{
										id : "database_find" ,
										name : "检索数据库" ,
										icon : "database-find.png" ,
									}
							]
						} ,
						{
							name : "操作日志" ,
							id : "log" ,
							apps : [
							
							]
						}
					]
				} ;
				DMS.load(config) ;
			}) ;
			
			
			var DMS = function(){
				var datas = [] ;   // 全局数据存储器
				function _render(modules){
					var dmsMenu = $("<div></div>")
								.addClass("dms-menu")
								.appendTo("body") ;
					var _ul = $("<ul></ul>").appendTo(dmsMenu) ;
					for(var i=0;i<modules.length;i++){
						var m = modules[i] ;
						var name = m.name ;
						var id = m.id ;
						var apps = m.apps ;
						var _li = $("<li></li>").appendTo(_ul) ;
						var _a = $("<a href='#'></a>")
								.html(name)
								.appendTo(_li)  ;
						_press(_a,m,_li) ;
					}
				} ;
				function _press(dom,m,target){
					dom.click(
						function(){
							_execute(m,target) ;
						}
					) ;
				} ;
				function _execute(obj,target){
					var _box_ = $(".box") ;
					if(_box_){
						_box_.remove() ;
					}
					var id = obj.id ;
					if("grid" == id){
						var apps = obj.apps ;
						_box(apps,target) ;
					}
					else if("database" == id){
						var apps = obj.apps ;
						_box(apps,target) ;
					}
					else if("log" == id){
					
					}
				}
				function _box(apps,target){
					var _box_ = $("<ul></ul>")
							.addClass("box")
							.appendTo("body") ;
					var _css = {
						position : "absolute" ,
						top : target.offset().top + target.height() + 10 + "px" ,
						left : target.offset().left + "px" ,
						display : "none"
					} ;
					_box_
						.css(_css)
						.fadeIn() ;
					for(var j=0;j<apps.length;j++){
						var app = apps[j] ;
						var id = app.id ;
						var name = app.name ;
						var icon = "img/" + app.icon ;
						var _li = $("<li></li>")
								.html(name)
								.hover(function(){
									$(this).addClass("active") ;
								}
								,function(){
									$(this).removeClass("active") ;
								})
								.appendTo(_box_)
								.css("backgroundImage","url(" + icon + ")")
								.css("backgroundRepeat","no-repeat")
								.css("backgroundPosition","0px 8px") ;
					}
				} ;
				function _bindEvent(){
					$(document).click(function(e){
						
					}) ;
				} ;
				function load(config){
					var ver = config.version ;
					var modules = config.modules ;
					_render(modules) ;
					_bindEvent() ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>
		

?