jsp&Servlet(3)

java学习共享网站：www.java1234.com

 

easyui的 easyui-datagrid 使用：

<table>里面用easyui-datagrid

属性有：title fitcolumns列宽自动调 pagination分页 rownumbers标明行号 fit自动大小适应界面 url post发送地址 toolbar 工具栏调用<div> singleSelect 设置只能单选

然后将数据区域放在

<thead>

列标题放在 <tr><th > 列标题</th> </tr> 【第一列<th field="cb" checkbox="true"> </th>设置可以有checkbox】

</thead>

例如：

<table id="dg" title="班级信息" class="easyui-datagrid" fitcolumns="true"
	pagination="true" rownumbers="true" fit="true" url="gradeList" toolbar="#tb"> <!-- singleSelect="true" -->
		<thead>
			<tr>
				<th field="cb" checkbox="true"> </th>
				<th field="id" width="50">编号</th>
				<th field="gradeName" width="100">班级名称</th>
				<th field="gradeDesc" width="250">班级描述</th>
			
			</tr>
		</thead>
</table>

 easyui的toolbar 使用:

嵌套在一个大的div里面的每一个div是一行，每一行加入若干个按钮：<a href="javascript代码"></a>

class="easyui-linkbutton" 属性有 iconCls 图标 plain 显示的朴素

例如：

	<div id="tb">
		<div>
			<a href="javascript:openGradeAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
			<a href="javascript:openGradeModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
			<a href="javascript:deleteGrade()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
		</div>
		 班级名称: <input type="text" name="s_gradeName" id="s_gradeName"/>
		<a href="javascript:searchGrade()" class="easyui-linkbutton" iconCls="icon-search" plain="true">查询</a>

	</div>

 添加操作：点击添加按钮弹出一个框的形式

easyui的easyui-dialog使用：

class="easyui-dialog"  属性有：closed buttons  规格：style="width:400px;height:280px;padding:10px 20px"

嵌套在<div>下 设置一个表单

表单的text 必填项有一个自动验证的功能【easyui-validatebox】 的属性：required="true"

例如：

	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" 
	 closed="true" buttons="#dlg-buttons">
	  <form id="fm" method="post">
		<table>
			<tr>
				<td>班级名称：</td>
				<td><input type="text" name="gradeName" id="gradeName" class="easyui-validatebox" required="true"/></td>			
			</tr>
			
			<tr>
				<td valign="top">班级描述：</td>
				<td><textarea rows="7" cols="30" name="gradeDesc" id="gradeDesc"></textarea></td>
			</tr>
		</table>
	  
	  </form>
	 
	 </div>

　　     <div id="dlg-buttons">
         　　<a href="javascript:saveGrade()" class="easyui-linkbutton" iconCls="icon-ok" >保存</a>
         　　<a href="javascript:closeGradeDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
     
     　　</div>

 对应以上的按钮实现的功能代码：

<script type="text/javascript">
	var url;
	
	function openGradeModifyDialog(){
		var selectedRows = $('#dg').datagrid('getSelections');
		if(selectedRows.length!=1){
			$.messager.alert("系统提示：","请选择一条要编辑的数据");
			return;
		}
		var row=selectedRows[0];
		$('#dlg').dialog('open').dialog('setTitle','编辑班级信息');
		$('#fm').form('load',row);
		url="gradeSave?id="+row.id;
	}
	
	function saveGrade(){
		 $('#fm').form('submit',{
			 url:url,
			 onSubmit: function(){
			 	return $(this).form('validate');
			 },
			 success: function(result){
			 	if (result.errorMsg){
				 $.messager.show({
			 			title: 'Error',
						 msg: result.errorMsg
			 			});
			 	} else {
			 			$.messager.alert("系统提示","保存成功！");
				 		$('#fm').form('clear');
				 		$('#dlg').dialog('close'); // close the dialog
						$('#dg').datagrid('reload'); // reload the user data
			 		}
			 	}
			 });
	}
	function closeGradeDialog(){
		 $('#dlg').dialog('close');
		 $('#fm').form('clear');
	}
	function openGradeAddDialog(){
		 $('#dlg').dialog('open').dialog('setTitle','添加班级信息');
	
		 url = 'gradeSave';
	}
	function searchGrade(){
		$('#dg').datagrid('load',{
			gradeName:$('#s_gradeName').val()
		});
		//$('#dg').datagrid('reload'); 
	}
	function deleteGrade(){
		var selectRows = $('#dg').datagrid('getSelections');
		if(selectRows.length==0){
			// $.messager.show({ // show error message
			//	 title: '系统提示：',
			//	 msg: '请选择要删除的数据'//result.errorMsg
			//	 });
			$.messager.alert("系统提示：","请选择要删除的数据");
			return;
		}
		var strIds=[];
		for(var i=0;i<selectRows.length;i++){
			strIds.push(selectRows[i].id);
		}
		var ids = strIds.join(",");
		 $.messager.confirm('<font color=red>系统提示</font>','您确定要删除这<font color=red>'+selectRows.length+'</font>条数据?',function(r){
			 if (r){
				 $.post("gradeDelete",{delIds:ids},function(result){
					 if (result.success){
						 $.messager.alert("系统提示","您已成功删除<font color=red>"+ result.delNums+"</font>条数据");
						 $('#dg').datagrid('reload');
					 }else{
							$.messager.show({ // show error message
							title: 'Error：',
							msg: result.errorMsg//result.errorMsg
							 });
						 
					 }
				 },'json');
			 }
		 });	 
	}
</script>