与数据库连接的页面增删改查 的easyui实现(主要是前端实现)

一.首先看一下最终实现的效果,上图

二.思路,主要是分两个文件实现,一个是页面显示文件:代码如下:

<html>
<head>
<title>示例管理</title> #parse("ui:include")
<script
    src="${path}/com/gdt/project/dsm/demo/demoModel/demoModel_script.vm"></script>
<link type="text/css" rel="stylesheet" href="$path/ui/resource/common/css/global.css"  />
<style>
body {
    padding: 0;
    margin: 0
}
</style>
</head>
<body>
    <div class="easyui-layout" style="width: 100%; height: 100%;">
        <div data-options="region:‘north‘"  class="query-panel"  title="查询条件" style="height: 80px;">
                <form id="demoModelForm_Query" method="post">
                    <label>姓名:</label><input class="easyui-textbox" style="width: 110px" name="name">
                    <label>地址:</label><input class="easyui-textbox" style="width: 110px" name="address">
                    <label>身份证:</label><input class="easyui-textbox"style="width: 110px" name="cardNo">
                     <input type="hidden" name="rule" value="name*[email protected]*[email protected]*eq">
                     <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search"
                        onclick=‘javascript:$("#grid_demoModel").datagrid("load",jQuery("#demoModelForm_Query").serializeObject());‘>查询</a>
                </form>
        </div>
        <div data-options="region:‘center‘,title:‘示例列表‘">
            <table id="grid_demoModel"></table>
            <div id="dialog_demoModel" class="easyui-dialog"
                style="width: 400px; height: 280px; padding: 10px 20px;"
                closed="true">
                <form id="demoModelForm_Manager">
                    姓名:<input name="name" class="easyui-validatebox textbox"
                        style="width: 150px" data-options="required:true  "><br>
                    地址:<input name="address" class="easyui-validatebox textbox"
                        style="width: 150px" data-options="required:true  "><br>
                    身份证:<input id="uniquecardNo" name="cardNo"
                        class="easyui-validatebox textbox" style="width: 150px"
                        data-options="required:true">
                </form>
            </div>
        </div>
    </div>
</body>
</html>

另一个是页面与后台交互的实现代码文件:

#parse("ui:path")
jQuery(document).ready(function(){
	client.initView();
});
var client = {
	grid:null,
	updateEntity:false,
	initView:function(){
		var me = this;
		var toolbar = me.createToolbar();
		var grid = me.initGrid({toolbar:toolbar,url:‘${path}/com/gdt/project/dsm/demo/demoModel/page.do‘});
	},
	initGrid:function(param){
    	this.grid = jQuery("#grid_demoModel").datagrid({
    		url:param.url,
    		pagination:true,
    		singleSelect:true,
			fit:true,
			fitColumns:true,
			toolbar:param.toolbar,
    		columns:[[
					    		{field:‘name‘,title:‘姓名‘ },			    		{field:‘address‘,title:‘地址‘ },			    		{field:‘cardNo‘,title:‘身份证‘ }			    			]]
    	});
		return this.grid;
	},
	openInsertDialog:function(){
		var me = this;
		me.updateEntity = false;
		jQuery("#uniquecardNo").attr("readonly",false);
		me.clearForm();
		me.setDialog({name:‘#dialog_demoModel‘,button:me.executeButton(),title:‘新增示例‘});
	},
	openMergerDialog:function(){
		var me = this;
		var row = jQuery("#grid_demoModel").datagrid("getSelected");
        if (row) {
    		me.updateEntity = true;
		jQuery("#uniquecardNo").attr("readonly",true);
    		me.setDialog({name:‘#dialog_demoModel‘,button:me.executeButton(),title:‘修改示例‘});
    		me.clearForm();
            jQuery("#demoModelForm_Manager").form("load", row);
        }

	},
	openRemoveConfirm:function(){
		var row = jQuery("#grid_demoModel").datagrid("getSelected");
		if (row) {
			jQuery.messager.confirm(‘系统提示‘, ‘是否删除?‘, function (r) {
                if (r) {
					var rtn = server.deleteObject(row);
					if(rtn.STATU == ‘801‘){
						client.reload();
					}
    			}
			});
		}
	},
	executeButton:function(){
		var me = this;
		return [{
				text:‘保存‘,
				iconCls:‘icon-save‘,
				handler:function(){
					var obj = jQuery("#demoModelForm_Manager").serializeObject();
				if(obj.cardNo){
					var codecardNo = server.uniqueCode({cardNo:obj.cardNo,rule:‘cardNo*eq‘});
					$(‘#uniquecardNo‘).tooltip("hide");
					if(codecardNo&&!me.updateEntity){
						$(‘#uniquecardNo‘).tooltip({
				            position: ‘right‘,
				            content: ‘<span style="color:#000000">该编码已被占用.</span>‘,
				            onShow: function(){
				        		$(this).tooltip(‘tip‘).css({
				        			borderColor: ‘red‘
				        		});
				            }
				    	}).tooltip("show");
						return;
					}
				}
					var validate = jQuery("#demoModelForm_Manager").form(‘enableValidation‘).form(‘validate‘);
					if(validate){
    					if(me.updateEntity){
    						var row = jQuery("#grid_demoModel").datagrid("getSelected");
								obj[‘id‘] = row.id;

    					}
    					var rtn = server.saveOrUpdate(obj);
    					if(rtn.STATU == ‘801‘){
    						me.reload();
    					}
    					me.dialogControl({dialog:‘#dialog_demoModel‘,control:‘close‘});
					}
				}
			},{
				text:‘关闭‘,
				iconCls:‘icon-cancel‘,
				handler:function(){
					me.dialogControl({dialog:‘#dialog_demoModel‘,control:‘close‘});
				}
			}];
	},
	reload:function(){
		var me = this;
		me.grid.datagrid("load");
	},
	setDialog:function(param){
		jQuery(param.name).dialog({
			modal:true,
			buttons:param.button
		}).dialog(‘open‘).dialog(‘setTitle‘, param.title);
	},
	createToolbar:function(){
		var btns = server.btns();
		var toolbar = [];
		jQuery.each(btns,function(i,n){
			with(n){
				toolbar.push({text:btnName,iconCls:icon,handler:function(){eval(fun);}});
			}
		});
		return toolbar;
	},
	clearForm:function(){
		jQuery("#demoModelForm_Manager").form(‘clear‘);
	},
	dialogControl:function(param){
		jQuery(param.dialog).dialog(param.control);
	}
};
var server = {
	btns:function(){
		var btns = [
			{btnId:‘1‘,btnName:‘新增‘,icon:‘icon-add‘,enabled:‘Y‘,fun:‘client.openInsertDialog();‘},
			{btnId:‘2‘,btnName:‘编辑‘,icon:‘icon-edit‘,enabled:‘Y‘,fun:‘client.openMergerDialog();‘},
			{btnId:‘3‘,btnName:‘删除‘,icon:‘icon-remove‘,enabled:‘Y‘,fun:‘client.openRemoveConfirm();‘}];
		return btns;
	},
	saveOrUpdate:function(param){
		var rtn = null;
		jQuery.ajax({
    		type: "POST",
    		data: param,
			cache:false,
			async:false,
			url: "${path}/com/gdt/project/dsm/demo/demoModel/sou.do",
    		success: function(msg){
				rtn = msg;
    		}
    	});
		return rtn;
	},
	deleteObject:function(param){
		var rtn = null;
		jQuery.ajax({
    		type: "POST",
			cache:false,
			async:false,
			data: param,
    		url: "${path}/com/gdt/project/dsm/demo/demoModel/delete.do",
    		success: function(msg){
				rtn = msg;
    		}
    	});
		return rtn;
	},
	uniqueCode:function(param){
		var rtn = false;
		jQuery.ajax({
    		type: "POST",
			cache:false,
			async:false,
			data: param,
    		url: "${path}/com/gdt/project/dsm/demo/demoModel/findAll.do",
    		success: function(msg){
				rtn = false;
				if(msg.ReturnObjs.length>0){
					rtn = true;
				}
    		}
    	});
		return rtn;
	}
};

 三.根据上述的ajax中的URL在controller、service、model中编写相应的处理代码 

时间: 2024-11-09 02:42:07

与数据库连接的页面增删改查 的easyui实现(主要是前端实现)的相关文章

在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今天的阳光真特么好,写完本篇,好出去在阳光下溜溜狗.散散步什么的,正所谓文武之道一张一弛,走神了,进入正题. 首先是一个View Model,在这里定义验证规则,提交和保存数据的时候还必须和领域模型映射. using System; using System.ComponentModel.DataAnnotat

权限管理系统之LayUI实现页面增删改查和弹出层交互

由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一项目,设计风格都差不多,对于涉及单个数据表的页面,基本都是增删改查,布局都是差不多,实际项目中都是复制.粘贴过来改下数据基本就能完成80%,后续就是修修补补或者是要实现一些特殊需求,记得刚参加工作时,老大直接给了一个已经做好的模板页面让我比对着手动敲一遍,当时觉得重复操作没啥用,现在再看觉得作用很大

在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建

通常,在同一个页面上实现增删改查,会通过弹出框实现异步的添加和修改,这很好.但有些时候,是不希望在页面上弹出框的,我们可能会想到Knockoutjs,它能以MVVM模式实现同一个页面上的增删改查,再辅以knockout.validation.js,还可以对Model进行验证.但knockout.validation.js与ASP.NET MVC本身的验证没有做到无缝对接,不能形成一个从客户端到服务端连贯.统一的验证解决方案.关于在ASP.NET MVC中使用Knockoutjs和knockout

数据库连接,实现增删改查操作具体步骤(全)

1.连接数据库必要的步骤: jdbc: driver=com.mysql.jdbc.DriverjdbcUrl=jdbc:mysql://localhost:3306/lxnuser=rootpassword=lxn123 oracle: #driver=oracle.jdbc.driver.OricerDriver#jdbcUrl=jdbc:oracle:thin:@localhost:1521:orcl#user=system#password=lxn123 2.连接数据库的两种方法,实现数

数据库连接 ADO.NET增删改查

ADO.net:数据库访问技术程序操作的数据都是变量或对象,这些东西都存在于内存中但是有很多的数据是存在数据库中的,数据库中的数据存在于硬盘上 作用:将数据库中的数据取到内存中来,可以让程序进行操作 将内存中的数据,写入到数据库中 1.using System.Data.SqlClient; //引用命名空间 2.建立 数据库连接类 string str = "server=.;database=Data0515;user=sa;pwd=123;";//连接字符串 SqlConnect

2.大约QT数据库操作,简单的数据库连接操作,增删改查数据库,QSqlTableModel和QTableView,事务性操作,大约QItemDelegate 代理

 Linux下的qt安装,命令时:sudoapt-get install qt-sdk 安装mysql数据库,安装方法參考博客:http://blog.csdn.net/tototuzuoquan/article/details/39565783 假设行想进数据库开发.须要安装libqt5sql5-mysql.命令是: sudo apt-get install libqt5sql5-mysql 4 创建一个项目 要调用数据库.须要加上QT += gui widgets sql  也就是说要加

数据库连接,通用增删改查

import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; public class BaseDao { private static final String DRIVER="oracle.jdbc.driver.OracleDriver"; p

easyui+nodejs+sqlserver增删改查实现

用到的模块或者技术: Express: http://www.expressjs.com.cn/4x/api.html#express Easyui: http://www.jeasyui.com/documentation/index.php# express-session:https://www.npmjs.com/package/express-session#resave node-mssql: http://csdoc.org/ Redis: http://redis.io/ art

ListCode增删改查代码生成器介绍

1. 简介 listcode 是一个增删改查代码在线生成工具.主要提供java,python,php,nodejs等常见语言和框架的 CRUD代码生成服务(即 常见的增删改查),后台代码.前端界面.js等,一站解决. 相比于传统的增删改查代码生成器,ListCode 做了很多完善, 不论从功能的丰富程度,还是支持的语言.技术框架种类上都有了很大进步,可以很大的提高开发效率,减少人工介入修改的工作量. 功能特点: 前后端代码.js.UI一站生成 翻页,多条件联合查询 外键关联编辑.展示 输入验证,