论坛首页 Web前端技术论坛

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

浏览 3058 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-04-13   最后修改:2011-04-14

说明 : 正在开发中

截图 :

		<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>
		

 

   发表时间:2011-04-13  
目前只是定义好数据的基本结构以及界面的渲染,功能逐步完善 !
0 请登录后投票
   发表时间:2011-04-17  
代码更新 :

<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) ;
					}
				} ;
				function _press(dom,m){
					dom.click(
						function(){
							_execute(m,dom) ;
						}
					) ;
				} ;
				function _execute(obj,dom){
					var id = obj.id ;
					if("grid" == id){
						_box(obj.apps,dom) ;
					}
					else if("database" == id){
						_box(obj.apps,dom) ;
					}
					else if("log" == id){
					
					}
					else if("database_add" == id){
						var title = dom.text() ;
						var dataBaseAdd = $("<div></div>")
									.addClass("database-add")
									.appendTo("body") ;
						var _top = parseInt(document.documentElement.clientHeight / 2 - dataBaseAdd.height() / 2) ;
						var _left = parseInt(document.documentElement.clientWidth / 2 - dataBaseAdd.width() / 2) ;
						var _css = {
							position : "absolute" ,
							top : _top ,
							left : _left ,
							display : "none"
						} ;
						dataBaseAdd.css(_css) ;
						var _title = $("<div></div>")
								.addClass("title")
								.html(title)
								.appendTo(dataBaseAdd) ;
						var _div = $("<div></div>")
								.html("数据库名称 : ")
								.appendTo(dataBaseAdd) ;
						var _input = $("<input type='text' />").appendTo(_div) ;
						var _a = $("<a href='#'></a>")
								.html("确 定")
								.click(function(){
									var dbName = $(".database-add input").val() ;
									if(dbName){
										var tmp = $(".database-add") ;
										if(tmp){   // 清除数据库输入窗口
											tmp.remove() ;
										}
										_add(id,dbName) ;
									}
									else{
										alert("数据库名称不能为空!") ;
									}
								})
								.appendTo(dataBaseAdd) ;
						dataBaseAdd.show("fast") ;
					}
				}
				function _box(apps,target){
					var tmp = $(".box") ;
					if(tmp){
						tmp.remove() ;
					}
					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") ;
								})
								.click(function(){
									var tmp = $(".box") ;
									if(tmp){
										$(".box").hide() ;
									}
								})
								.appendTo(_box_)
								.css("backgroundImage","url(" + icon + ")")
								.css("backgroundRepeat","no-repeat")
								.css("backgroundPosition","0px 8px") ;
						_press(_li,app) ;
					}
				} ;
				function _add(id,dbName,headers){
					if("database_add" == id){
						var database = {} ;
						database.id = _getAssId() ;
						database.name = dbName ;
						database.tables = [] ;
						datas[datas.length] = database ;
					}
				} ;
				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 _debug(){
					for(var i=0;i<datas.length;i++){
						var data = datas[i] ;
						for(var prop in data){
							alert(data[prop]) ;
						}
					}
				}
				function load(config){
					var ver = config.version ;
					var modules = config.modules ;
					_render(modules) ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>

0 请登录后投票
   发表时间:2011-04-20  
弱弱的问下这个会在什么情况下被应用到,它的意义在哪?
0 请登录后投票
   发表时间:2011-04-20  
shulin6688 写道
弱弱的问下这个会在什么情况下被应用到,它的意义在哪?

意义真不大,还得自己写界面。还得配合写后台。还不如用phpMyadmin产品了。
0 请登录后投票
   发表时间:2011-04-20   最后修改:2011-04-20
shulin6688 写道
弱弱的问下这个会在什么情况下被应用到,它的意义在哪?

我的理解是,桌面应用,数据量比较大,需要与数据库同步,减少请求数,类似缓存吧。
欢迎拍砖在下拙作:http://www.iteye.com/topic/783537
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics