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>?
<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> 3 楼 shulin6688 2011-04-20 弱弱的问下这个会在什么情况下被应用到,它的意义在哪? 4 楼 faiinlove 2011-04-20 shulin6688 写道弱弱的问下这个会在什么情况下被应用到,它的意义在哪?