利用jquery easyui设计删改查页面

最新推荐文章于 2022-06-21 16:59:57 发布

yiwanxinyuefml

最新推荐文章于 2022-06-21 16:59:57 发布

阅读量597

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yiwanxinyuefml/article/details/38300413

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

略去了一些涉及项目的信息，但是主要用法什么的都可以直接使用。

jsp页面：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<link rel="stylesheet" type="text/css"	href="../../js/jquery-easyui-1.3.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"	href="../../js/jquery-easyui-1.3.2/themes/icon.css">
<link rel="stylesheet" type="text/css"	href="../../js/jquery-easyui-1.3.2/demo/demo.css">

<script type="text/javascript"	src="../../js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript"	src="../../js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript"	src="../../js/jquery-easyui-1.3.2/easyui-lang-zh_CN.js"></script>
	<s:include value="/header.jsp"></s:include>
</head>
<body>
	<div id="tb" style="padding: 3px">
	  项目:<input id="projectId" class="easyui-combobox" name="projectId" style="width:220px;"
	    	data-options="valueField:'projId',textField:'projName',url:'findProjNameAction'">
	    	  
	  期次:<input id="termId" class="easyui-combobox" name="termId" style="width:120px;"
	    	data-options="valueField:'termId',textField:'termName',url:'findTermsAction'">
	      	
	 开始日期：<input id="startDtId" class="easyui-datebox" style="width:80px;"></input>~
	 结束日期：<input id="finishDtId" class="easyui-datebox" style="width:80px;"></input>
	   
		<a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="doSearch()">查  询</a>
	</div>

	<table id="dg" style="width: 1200px; height: auto" pagination="true"
		data-options="
				rownumbers: true,
				singleSelect: true,
				onDblClickRow: onClickRow
			">
		<thead>
			<tr>
				<th hidden="true" data-options="field:'id',width:80"></th>
				<th hidden="true" data-options="field:'projId',width:80"></th>
				<th data-options="field:'projName',width:160,align:'center'">项目名称</th>
				<th data-options="field:'term',width:80,align:'center'">期次</th>
				<th data-options="field:'submStatusValue',width:100,
						editor:{
							type:'combobox',
							options:{
								valueField:'key',
								textField:'name',
								url:'findSubmissionStatusAction',
								required:true
							}
						}">状态</th>
				
				<th hidden="true" data-options="field:'submStatusCd',width:80,align:'right'">状态(隐藏域)</th>
				<th data-options="field:'startDate',width:90,align:'center',editor:'datebox'">开始日期</th>
				<th data-options="field:'finishDate',width:90,align:'center',editor:'datebox'">结束日期</th>
				<th data-options="field:'chapterCheckValue',width:80,
						editor:{
							type:'combobox',
							options:{
								valueField:'key',
								textField:'name',
								url:'findSubmissionChapterheckAction',
								required:true
							}
						}">质检</th>
				<th data-options="field:'peroid',width:80,align:'right',editor:'text'">阶段</th>
				<th data-options="field:'updateRecordTime',width:80,align:'right'">最后更新时间</th>
			</tr>
		</thead>
	</table>

	<script type="text/javascript">
	
		var $obj;
		$obj = $("#dg");
		$('#dg').datagrid(
						{
							loadMsg : '数据加载中,请稍后......',
							singleSelect : true,
							collapsible:true,
							url : 'findSubmissionAction',
								  toolbar: [
							     {	text:'保 存',
									iconCls: 'icon-save',
									handler: saverow
								},'-',{
									text:'取 消',
									iconCls: 'icon-undo',
									handler: cancelrow
								}], 
							idField : 'id',
							//fitColumns : true,
							onBeforeEdit : function(index, row) {
								row.editing = true;
								$('#dg').datagrid('refreshRow', index);
							},
							onAfterEdit : function(index, row) {
								row.editing = false;
								$('#dg').datagrid('refreshRow', index);
							},
							onCancelEdit : function(index, row) {
								row.editing = false;
								$('#dg').datagrid('refreshRow', index);
							}
						});

		function selectCurRow(obj) {
			var $a = $(obj);
			var $tr = $a.parent().parent().parent();
			var tmpId = $tr.find("td:eq(0)").text();
			$obj.datagrid('selectRecord', tmpId);
		}

		function getIndexAfterDel() {
			var selected = $obj.datagrid('getSelected');
			var index = $obj.datagrid('getRowIndex', selected);
			return index;
		}

		function editrow(index, obj) {
			selectCurRow(obj);

			var tmpIndex = getIndexAfterDel();
			$obj.datagrid('beginEdit', tmpIndex);
		}

		function cancelrow(index, obj) {
			selectCurRow(obj);
			var tmpIndex = getIndexAfterDel();
			$obj.datagrid('cancelEdit', tmpIndex);
			endEditing();
		}

		function deleterow(index, obj) {
			$.messager.confirm('Confirm', '确认删除?', function(r) {
				if (r) {
					selectCurRow(obj);
					var index = getIndexAfterDel();
					var node = $obj.datagrid('getSelected');
					var id = node.id;
					$.ajax({
						url : 'deleteSubmissionAction?id=' + id,
						type : 'post',
						timeout : 60000,
						success : function(data, textStatus, jqXHR) {
							if (data == 'success') {
								$.messager.alert('提示', '删除成功！', 'info', function() {
									$('#dg').datagrid('reload');
								});
							} else if (data == "fail") {
								$.messager.alert('提示', '删除失败！', 'info', function() {
									$('#dg').datagrid('reload');
								});
							} else {
								$.messager.alert('提示', '系统异常！', 'info', function() {
									$('#dg').datagrid('reload');
								});
							}
						}
					});
				}
			});
		}

		function saverow(index, obj) {
			selectCurRow(obj);
			var tmpIndex = getIndexAfterDel();
			$obj.datagrid('endEdit', tmpIndex);
			var node = $obj.datagrid('getSelected');
			var json = {};
			json.id = node.id; 
			json.projId = node.projId;
			json.term = node.term;
			json.artId =node.artId;
			json.submStatusValue = node.submStatusValue;
			json.submStatusCd = node.submStatusCd;
			json.startDate =node.startDate;
			json.finishDate = node.finishDate;
			json.chapterCheck = node.chapterCheck;
			json.chapterCheckValue = node.chapterCheckValue;
			json.peroid = node.peroid;
			json.updateRecordTime = node.updateRecordTime;
			
			$.ajax({
				url : 'saveSubmissionAction',
				async : false,
				type : 'POST',
				data : json,
				timeout : 30000,
				success : function(data, textStatus, jqXHR) {
					var msg = '';
					if (data == "success") {
						$.messager.alert('提示', '保存成功！', 'info', function() {
							$('#dg').datagrid('reload');
						});
						endEditing();
					} else {
						if (data == "fail") {
							msg = "保存失败！";
						}
						$.messager.alert('提示', msg, 'error', function() {
							$obj.datagrid('beginEdit', tmpIndex);
						});
					}
				},
				error : function(data){
					$.messager.alert('提示', '保存失败！', 'info', function() {
						$('#dg').datagrid('reload');
					});
				}
			});
		}

		function doSearch() {
			var projectId_ = $('#projectId').combobox('getValue');
			var term_ = $('#termId').combobox('getValue');
			var startDt_ =  $('#startDtId').datebox('getValue');
			var finishDt_ =  $('#finishDtId').datebox('getValue');
			$('#dg').datagrid('reload', {
				projId : encodeURI(projectId_),
				term : encodeURI(term_),
				startDate : startDt_,
				finishDate : finishDt_
			});
		}

		var editIndex = undefined;
		function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'id'});
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		function onClickRow(index){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index)
							.datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg').datagrid('selectRow', editIndex);
				}
			}
		}
		
		$('#dg').datagrid({//给某些数据加上背景色
		    rowStyler:function(index,row){
		        if (row.submStatusValue=='延迟'){
		            return 'background-color:#99CCFF;color:red;font-weight:bold;';
		        }
		    }
		});
	</script>

</body>
</html>

以上代码片段中，通过script中的url : 'findSubmissionAction' 自动加载json数据到前台。

后台返回json数据：

	public void findSubmission(){
		//...
		List<xxVO> vos = <span style="font-family: Arial, Helvetica, sans-serif;">xxService</span>.findVOs();
		int totalSize = 1000;//总的记录数
		JSONArray jsonArray = JSONArray.fromObject(vos);
		
		StringBuffer jsonStr_ = new StringBuffer();
		jsonStr_.append("{\"total\":").append(totalSize).append(",\"rows\":");
		jsonStr_.append(jsonArray);
		jsonStr_.append("}");
		
		out.print(jsonStr_);
		out.flush();
		out.close();
		}

	public void saveSubmission(){
		String message = MSG_SUCCESS;
		HttpServletResponse response = ServletActionContext.getResponse();
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		buildBO();
		try{
			xxService.saveSubmission(bo);
		}catch(Exception e){
			message = MSG_FAIL;
			e.printStackTrace();
		}
		out.print(message);
		out.flush();
		out.close();
	}

struts.xml

<package name="doc" extends="json-default">
		<action name="*Action" class="cn.ccb.pio.action.xxxAction" method="{1}">
			<result name="success" type="json"> </result>
		</action>
</package>

里面没有啥技术性的东西，作一个记号方便查询