前台的增删改查方法

在项目中最基本的用法就是增删改查，如果涉及到表，那么还有数据的绑定和重新绑定。下面根据我在项目中的经验将前台的的增删改查以及基本用法一一呈现。

一、增

js代码，显示增加的弹出框

function addType(){
    $('#dlgAdd').dialog('open').dialog('center').dialog('setTitle','添加类型');   //打开对话框
    $('#fm').form('clear');  //清除表单内容
}

弹出框的jsp页面代码

<!-- 添加按钮 -->
			<div id="dlgAdd" class="easyui-dialog" style="width: 400px"
				closed="true" buttons="#dlgAdd-buttons">
				<form id="fm" method="post" novalidate
					style="margin: 0; padding: 20px 50px">
					<div style="margin-bottom: 10px">
						<input id="TypeName" name="TypeName" class="easyui-textbox" required="true"
							label="类型名称:" style="width: 100%">
					</div>
				</form>
			</div>
			<div id="dlgAdd-buttons">
				<a href="javascript:void(0)" class="easyui-linkbutton c6"
					iconCls="icon-ok" οnclick="saveType()" style="width: 90px">保存</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-cancel"
					οnclick="javascript:$('#dlgAdd').dialog('close')" style="width: 90px">取消</a>  //通过内嵌的js代码关闭对话框
			</div>

添加的js代码

function saveType(){
	var typeName = $('#TypeName').val();	//获取页面文本框的值
	$.ajax({
        type:"POST",
        url:"saveType",  //向后台传送的地址
        dataType:"json",
        async : false,
        data : {"typeName":typeName},  //向后台传输数据
        success : function(data) {         
        	javascript:$('#dlgAdd').dialog('close');  //关闭对话框
            $.messager.alert('提示', '添加成功!');
            $('#dgType').datagrid('reload');  //重新绑定页面表格数据
        },
        error : function(err) {
        	javascript:$('#dlgAdd').dialog('close');
            $.messager.alert('提示', '添加失败!');
            $('#dgType').datagrid('reload');
        }
    })
}

添加的controller代码

@RequestMapping("/saveType")
	 @ResponseBody
	// 处理请求地址映射的注解,表示类中所有响应请求的方法,都是以该地址作为父路径
	public void saveType(HttpServletRequest request,
		HttpServletResponse response,String typeName) {
		typeEntity.setName(typeName);
		try{
			typeService.addType(typeEntity);
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
	}

二、删

删除弹出框的jsp页面代码

<!-- 删除按钮 -->
			<div id="dlgDel" class="easyui-dialog" style="width: 400px"
				closed="true" buttons="#dlgDel-buttons">
				<form id="fm" method="post" novalidate
					style="margin: 0; padding: 20px 50px">
					<div style="margin-bottom: 10px">
						真的要删除该类型吗?
					</div>
				</form>
			</div>
			<div id="dlgDel-buttons">
				<a href="javascript:void(0)" class="easyui-linkbutton c6"
					iconCls="icon-ok" οnclick="delType()" style="width: 90px">删除</a>
				<a href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-cancel"
					οnclick="javascript:$('#dlgDel').dialog('close')" style="width: 90px">取消</a>
			</div>

打开删除弹出框并进行删除的js代码

function delType(){
	var row = $('#dgType').datagrid('getSelections'); // 返回选中多行
	if (row.length == 0) {
	      $.messager.alert('提示', '请选择要删除的记录!');
	      return false;
	}
	var id ="";
	for (var i = 0; i < row.length; i++) {
        id=id + row[i].id + ",";
    }
	$.messager.confirm('提示', '确定要删除所选记录吗？删除之后，将不能恢复！', function(r) {
        if (r) {
        	$.ajax({
                type:"POST",
                url:"deleteType",
                dataType:"json",
                async : false,
                data : {"id":id},
                success : function(data) {         
                    $.messager.alert('提示', '删除成功!');
                    $('#dgType').datagrid('reload');
                },
                error : function(err) {
                    $.messager.alert('提示', '删除失败!');
                    $('#dgType').datagrid('reload');
                }
            })
        }
    });
}

删除的controller代码

@RequestMapping("/deleteType")
	 @ResponseBody
	// 处理请求地址映射的注解,表示类中所有响应请求的方法,都是以该地址作为父路径
	public void deleteType(HttpServletRequest request,
		HttpServletResponse response,String id) {
		id= id.substring(0, id.length()-1); 
        String[] ids=id.split(",");
		try{
			typeService.deleteTypeByIds(ids);
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
	}

三、改

打开编辑弹出框的js代码

var editId;
function editType(){
	var row =$('#dgType').datagrid('getSelected');
	var rowData=$('#dgType').datagrid('getSelections');

	if(rowData.length > 1){
	$.messager.alert('系统提示',"只能选中一行！", "", "info");
	return;
	}
	
	if(rowData.length==0){
		$.messager.alert('系统提示',"请选择要编辑的行！", "", "info");
		return;
	}
	
	if(rowData.length==1){
		$('#dlgEdit').dialog('open').dialog('center').dialog('setTitle','编辑类型');
	    $('#fm').form('clear');
	    
	    //将页面选中行数据加载到编辑页面中
	    $("#TypeId").textbox("setValue",row.name);
	    editId = row.id;

编辑弹出框的jsp页面代码

<!-- 修改按钮 -->
			<div id="dlgEdit" class="easyui-dialog" style="width: 400px"
				closed="true" buttons="#dlgEdit-buttons">
				<form id="fm" method="post" novalidate
					style="margin: 0; padding: 20px 50px">
					<div style="margin-bottom: 10px">
						<input id="TypeId" class="easyui-textbox" required="true"
							label="类型名称:" style="width: 100%">
					</div>
				</form>
			</div>
			<div id="dlgEdit-buttons">
				<a href="javascript:void(0)" class="easyui-linkbutton c6"
					iconCls="icon-ok" οnclick="commitType()" style="width: 90px">提交</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton"
					iconCls="icon-cancel"
					οnclick="javascript:$('#dlgEdit').dialog('close')" style="width: 90px">取消</a>
			</div>

更新的js代码

function commitType(){
	var typeName = $('#TypeId').val();
	$.ajax({
    	type:"POST",
    	url:"updateType",
    	data:{
    	 'id':editId,
    	 'typeName':typeName
    	},
    	success:function(data){
    	
    		 $.messager.alert('系统提示',"恭喜您，编辑成功！", "", "info");
    		 $("#dgType").datagrid("reload");
             $("#dgType").datagrid("unselectAll");               
             $("#dlgEdit").dialog('close');
    	 }, 
    	error: function(err) 
    	{
    		 		
    		 $.messager.alert('系统提示',"抱歉，编辑失败，请联系管理员。", "","info");
             $("#dgType").datagrid("unselectAll");               
             $("#dlgEdit").dialog('close');		
    	}
	
    	 
	});
}

更新的controller代码

@RequestMapping("/updateType")
	 @ResponseBody
	// 处理请求地址映射的注解,表示类中所有响应请求的方法,都是以该地址作为父路径
	public void updateType(HttpServletRequest request,
		HttpServletResponse response,String typeName,String id) {
		typeEntity.setName(typeName);
		typeEntity.setId(id);
		try{
			typeService.updateTypeById(typeEntity);
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
	}

四、查

查询的controller代码

@ResponseBody
	@RequestMapping("/loadType")
	// 处理请求地址映射的注解,表示类中所有响应请求的方法,都是以该地址作为父路径
	public void loadType(HttpServletRequest request,
	    HttpServletResponse response, int page, int rows) {
		String name = "";
		try{
			PageEntity<TypeEntity> queryTypeByPage = typeService.queryTypeByPage(page, rows, name);		
			toJson.beanToJson(response, queryTypeByPage);
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
	}

将查询到的数据绑定到jsp页面的代码

<table id="dgType" title="  " class="easyui-datagrid"
				style="width: 100%; height: auto" method="get" url="loadType"
				toolbar="#toolbar" pagination="true" rownumbers="true"
				fitColumns="true" singleSelect="false" pagelist="[10,20,30]">
				<thead>
					<th data-options="field:'ck',checkbox:true"></th>
					<th data-options="field:'id',width:50,align:'center',hidden:'true'">序号</th>
					<th data-options="field:'name',width:50,align:'center'">类型名称</th>
				</thead>
			</table>

另外一种用到js的绑定方法。

这里只说明js代码部分

function searchType()
{
	var typeName = $('#typeName').val();
	$('#dgType').datagrid({
		url:'queryTypeByName?typeId='+typeName,
		onLoadSuccess:function(data){
			onLoad(data);
		}
	});
}

小结

没有任何一个人能够无任何参考就能开发出优质的代码。代码是需要积累的，这也正是这篇博客诞生的原因。