`
ziyuewang
  • 浏览: 40491 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

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

JavaScript数据结构CSSjQueryJ# 
阅读更多

说明 : 正在开发中

截图 :

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

 

分享到：
| 自己写的XGrid O(∩_∩)O~
评论
5 楼 danny.chiu 2011-04-20  
shulin6688 写道
弱弱的问下这个会在什么情况下被应用到，它的意义在哪？

我的理解是，桌面应用，数据量比较大，需要与数据库同步，减少请求数，类似缓存吧。
欢迎拍砖在下拙作：http://www.iteye.com/topic/783537
4 楼 faiinlove 2011-04-20  
shulin6688 写道
弱弱的问下这个会在什么情况下被应用到，它的意义在哪？

意义真不大，还得自己写界面。还得配合写后台。还不如用phpMyadmin产品了。
3 楼 shulin6688 2011-04-20  
弱弱的问下这个会在什么情况下被应用到，它的意义在哪？
2 楼 ziyuewang 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>
1 楼 ziyuewang 2011-04-13  
目前只是定义好数据的基本结构以及界面的渲染，功能逐步完善 ！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    mongoDB数据库CURD操作，配有界面

    总的来说，MongoDB的CURD操作是数据库管理的基础，而结合Struts2、jQuery和CSS，我们可以创建出交互性好、功能丰富的Web应用，为用户提供直观的数据操作体验。通过深入理解和实践，开发者能够熟练掌握MongoDB的使用...

    基于fastapi框架的数据库CURD脚手架设计源码

    本项目是一款基于FastAPI框架的数据库CURD脚手架设计源码，包含45个文件，其中包括35个Python脚本文件、2个JavaScript文件、1个Git忽略文件、1个LICENSE文件、1个ini文件、1个markdown文件、1个png文件、1个css文件...

    所有使用数据库的Web应用都\"just CURD Apps(只是CURD应用)

    标题中的“所有使用数据库的Web应用都'just CURD Apps(只是CURD应用)'”指的是在Web开发中，大部分应用程序的核心功能围绕着四个基本操作：创建（Create）、读取（Read）、更新（Update）和删除（Delete），简称CURD...

    JDBC连接数据库CURD

    总之，JDBC是Java与数据库交互的核心工具，通过理解并熟练掌握JDBC的CURD操作，开发者可以灵活地实现各种数据库操作，为应用程序提供数据支持。在学习过程中，阅读相关的博客和文档，进行实际操作，是加深理解的最好...

    比较通用的XML数据操作类(CURD)

    XML（eXtensible Markup ...总的来说，XML数据操作类库是实现非数据库环境下的数据管理的有效工具。通过合理的设计和封装，它可以提供与数据库类似的CRUD功能，同时避免了数据库的复杂性，特别是在小型或轻量级应用中。

    MyBatis3操作数据库(CURD)

    MyBatis3是一款轻量级的Java持久层框架，它主要负责数据库的CRUD（创建、读取、更新和删除）操作。这个框架的核心理念是将SQL语句与Java代码分离，通过XML或注解的方式配置映射文件，实现动态SQL，增强了对数据库...

    maven springmvc mybatis整合 数据库操作curd

    在本教程中，我们将深入探讨如何使用Maven、Spring MVC和MyBatis这三大核心技术来构建一个完整的Web应用程序，实现数据库的CURD（创建、读取、更新和删除）操作。这个过程对于初学者来说是极其有价值的，因为它涵盖...

    ThinkPHP数据库操作CURD-9.pptx

    ThinkPHP数据库操作CURD-9

    spring boot项目中使用Jpa对mySql数据库进行CURD操作

    这个资源中的`boot-demo`可能包含了整个Spring Boot项目的源代码，包括上述的配置、实体类、仓库接口和相关服务类。通过阅读和运行这些代码，初学者可以更好地理解如何在Spring Boot项目中利用JPA与MySQL数据库进行...

    Android SQLite数据库的CURD.zip

    本教程将详细讲解如何在Android中进行SQLite数据库的CURD操作，即创建(Create)、查询(Query)、更新(Update)和删除(Delete)。 首先，我们需要创建一个SQLite数据库。在Android中，我们通常通过扩展`SQLiteOpenHelper...

    21-11-19-006_Nop_4.40.4数据交换层之多数据库支持和CURD操作功能性耦合的支撑实现).rar

    CURD操作是任何数据库驱动应用程序的基础，包括创建新记录、读取现有数据、更新信息以及删除不再需要的记录。在nopCommerce 4.40.4中，这些操作被整合到一个统一的框架内，确保了在执行时的一致性和可靠性。此外，...

    angularjs CURD Example

    这个"angularjs CURD Example"是一个示例项目，旨在教授如何在AngularJS中实现创建（Create）、读取（Read）、更新（Update）和删除（Delete）这四个基本的数据操作，也就是常说的CRUD操作。在Web应用开发中，CRUD...

    Laravel框架数据库CURD操作、连贯操作总结

    本文将深入讲解Laravel的CURD（Create, Read, Update, Delete）操作以及连贯操作，帮助开发者更好地理解和使用这些功能。 1. CRUD操作： - Create：创建数据通常通过`DB::table()`方法和`insert()`函数来实现。...

    MVC+LINQ进行CURD操作

    在提供的文件列表中，我们看到`StuTest_log.ldf`和`StuTest.mdf`是SQL Server数据库的主数据文件和日志文件，可能包含了示例数据库。`MVCTestP`可能是项目文件或代码文件，包含了实际的MVC3和LINQ示例。对于初学者，...

    php-ajax异步CURD操作

    本教程将重点讲解如何利用PHP和AJAX实现数据库数据的异步CRUD（创建Create、读取Read、更新Update、删除Delete）操作。这将帮助你提升Web应用的用户体验，因为用户无需每次操作都刷新整个页面。 首先，让我们理解这...

    模拟CURD操作

    PHP 模拟CURD post请求 用来检测接口有没有被调用成功

    一个CURD的demo

    xxm_admin.sql文件很可能是数据库的初始化脚本，包含了创建数据库表、插入初始数据或者设置权限等操作。这类脚本在项目启动前运行，确保数据库处于预期状态。为了更好地理解这个示例，你可以使用诸如MySQL Workbench...

    ssh三大框架整合 curd

    CURD操作是数据库中最基本的四种操作：创建（Create）、读取（Read）、更新（Update）和删除（Delete）。在SSH框架中，这些操作通常由以下步骤完成： 1. 创建：用户通过前端界面提交新建数据请求，Struts2 Action...

    SSM框架整合学生信息管理系统，实现普通的curd、分页以及数据导出到Excel.zip

    这个项目“SSM框架整合学生信息管理系统”旨在通过这些技术实现一个基本的学生信息管理功能，包括CRUD（创建、读取、更新、删除）操作、分页展示以及数据导出到Excel的功能。下面我们将详细探讨这个系统的设计和开发...

Magicbox
Global site tag (gtag.js) - Google Analytics