关闭

基于easyui框架的增删改查

标签: easyuijsjspjquery
1795人阅读 评论(0) 收藏 举报
分类:

easyui是一个前台框架,基于jquery界面插件的集合,他可很方便的创建前台的界面,只需要通过编写一些简单HTML标记,就可以定义用户界面。可以在jquery和h5上使用

  在初次使用easyui进行开发之前,首先需要做的事是导入easyui所需的相关jar包css样式等,还需要准备一个easyui的api供查看学习

在使用easyui时,首先要了解的是DataGrid,也就是数据表格,他可以创建一个表格或表单,首先我们需要在页面定义一个table的id,然后在js页面就可以直接的去调用使用

<div fit=true  style="width:100%; height:100%"> 
	    <div>
	        <!-- 创建table表格 -->
  			<table id="userTable"></table>
	    </div>       
	</div> 

然后通过书写js代码构建表格的框架

在datagrid这个大框架下,首先是他的各种类型的属性名,可以设置请求地址,列的高度宽度等属性,还有用于构建表格的列行这些

frozenColumns属性:这里定义的是固定在左侧的列,用于checkbox的勾选等

columns属性:用于easyui的各列的配置对象

toolbar属性:用于表格顶部的工具栏,一般会有新增修改删除这些


$(function(){
			var flag;//判断新增和修改
			var updateid;//编辑的Id
			$('#userTable').datagrid({    
			    url:'login/agentLists.action',  //请求地址
			    width:'auto',	//列的宽度
			    height:658,		//列的高度
			    striped: true,	//是否显示斑马线效果
			    fitColumns:'true', //真正的自动展开/收缩列的大小
			    loadMsg: "数据加载中,请稍后……",
		  	    pageSize: 5,//每页显示的记录条数,默认为10 ,后台接收默认为rows
		        pageList: [5,10,15],//可以设置每页记录条数的列表 
		        pagination:true,//显示分页工具栏
			    frozenColumns:[[	//同列属性,但是此列会被冻结在左侧
			    	{
			    		field:'ck',	//列字段名称
			    		title:'全选',//列标题文本
			    		width:10,	//列宽度
			    		checkbox:true	//是否是多选
			    	}, 
			    ]],

			    columns:[[   		//列配置对象
			        {
			        	field:'agentName',	
			        	title:'代理商名称',
			        	width:10,
			        	align:'center'	//对齐方式
			       },{
			        	field:'userName',
			        	title:'代理商帐号',
			        	width:10,
			        	align:'center'
			       },{
			        	field:'area',
			        	title:'代理商所在地区',
			        	width:10,
			        	align:'center'
			       },{
			        	field:'team',
			        	title:'代理商团队名',
			        	width:10,
			        	align:'center'
			       },{
			        	field:'pic',
			        	title:'代理商负责人',
			        	width:10,
			        	align:'center'
			       }
			    ]],
			    toolbar: [			//顶部工具栏的DataGrid面板
			    {
			    	text:'新增',		//文本名称
					iconCls: 'icon-add',	//增加图标
					handler:function(){		//点击按钮时触发一个事件
			    		
			   	 }
			    },'-',{
			   		text:'编辑',
					iconCls: 'icon-edit',	//跟新操作
					handler:function(){		//点击时触发
	  						
	  						
	  					}
				},'-',{
					text:'删除',
					iconCls: 'icon-remove',
						handler: function(){
							
								
							});
						}
					}
				}
				
				]
			})
})
在相应的新增修改方法中,需要定义工具框的名称图标等,这都有专门的属性可以为我们做到,触发相应的函数可以调用页面中相对应的代码

toolbar: [			//顶部工具栏的DataGrid面板
			    {
			    	text:'新增',		//文本名称
					iconCls: 'icon-add',	//增加图标
					handler:function(){		//点击按钮时触发一个事件
			    		flag='add';			
						$('#userDialog').dialog({	//打开新增框
			  				title:'新增代理商'	//名称
			  			});
			  			//重置
			  			$('#userForm').form('clear');
			  			$("#userForm").get(0).reset();
						$("#userDialog").dialog('open');
			   	 }
			    },'-',{
			   		text:'编辑',
					iconCls: 'icon-edit',	//跟新操作
					handler:function(){		//点击时触发
	  						flag ='update';
							var arr=$("#userTable").datagrid('getSelections');	//返回所有被选中的行,没有记录的时候返回空数组
	  						if(arr.length!=1){	//如果选中的不是一行
	  							$.messager.show({	
	  								title:'提示',
	  								msg:'请至少选择一行进行编辑'
	  							});
	  						}else{
	  						    updateid=arr[0].agentId; 
	  							$('#userDialogs').dialog({	//弹出对话框
	  								title:'代理商修改'
	  							});
	  							//打开窗口
	  							$('#userDialogs').dialog('open');
	  							//重置
	  							$('#userForms').get(0).reset();
	  							$('#userForms').form('load',{	//读取字符串填充到表单当中

	  								agentNames:arr[0].agentName,
	  								areas:arr[0].area,
	  								teams:arr[0].team,
	  								pics:arr[0].pic,
	  								
	  						});
	  					  }
	  					}
				}
]

通过js代码调用同一个页面下的新增修改代码

<div id="userDialog" class="easyui-dialog" closed="true" style="width:620px;top:150;" data-options="iconCls:'icon-save',resizable:true,modal:true">
	  	<fieldset class="tableStyle">    
		<form id="userForm" method="post">
			<table class="tableStyle" style="width: 100%;height:96%; font-size: 14px"height="100px">
		    	<tr class="tableStyle"  height="40px" >
		      		<td width="15%" class="tableStyle">代理商名称:</td>
		      		<td>
		      			<input id="agentName"  name="agentName" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
		      		</td>
		      		<td width="15%" class="tableStyle">代理商帐号:</td>
				    <td>
				      <input id="userName"  name="userName" style="width: 150px"  onkeyup="value=value.replace(/[^\w]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\w]/g,''))" required="true" missingMessage="该项为必填!">
				    </td>
		    	</tr>
		    
		      	<tr class="tableStyle"  height="40px" >
		            <td width="15%" class="tableStyle">登录密码:</td>
			        <td>
		               <input id="passWd" type="password" name="passWd" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
				    </td>
		         
			   	  	<td width="15%" class="tableStyle" height="40px">所在地区:</td>
		          	<td>
			     	   <input id="area"  name="area" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
			      	</td>
		      	</tr>
		    
		      	<tr class="tableStyle"  height="40px" >
		        	<td width="15%" class="tableStyle">团队名:</td>
		        	<td>
	                   <input id="team" name="team" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
			    	</td>
		         
			   		<td width="15%" class="tableStyle" height="35px">负责人:</td>
		          	<td>
			     		<input id="pic" name="pic" class="easyui-textbox" style="width: 150px" required="true" missingMessage="该项为必填!">
			      	</td>
		    	</tr>
		  	</table><br>
		  	<center>
				<a id="confirm" class="easyui-linkbutton" align='center' style="width: 80">确定</a>  
				<a id="cancel" class="easyui-linkbutton" align='center' style="width: 80">取消</a>
			</center>
		</form>
    </div>
新增提交代码

/*
			 *提交新增表单方法
			 */
			$("#confirm").click(function(){
				$('#userForm').form('submit',{ //做一个提交操作
				    url:'login/addAgent.action',   
				    onSubmit: function(){    //在提交之前触发,提交一个有效的且放重复的表单
			            var isValid = $("#userForm").form('validate');//做表单字段验证
						if (!isValid){
							$.messager.alert("提示信息","请输入完整的信息!","info");	// 如果表单是无效的则隐藏进度条
						}
						return isValid;	// 返回false终止表单提交
		   			 },    
			    	success:function(result){  //回调函数 
				        	if(result=="ok"){
								$.messager.show({
									title:'提示',
									msg:'操作成功'
								});
								$("#userDialog").dialog('close');//关闭新增框
								$("#userTable").datagrid('reload');
								$('#userForm').form('clear');
							}else{
									$.messager.show({
									title:'提示',
									msg:'操作失败'
								}); 							
							}    
			   		 	}    
					});    
				}); 
对此,可以完成一个基本的easyui的构建和增删改查的操作


1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:18058次
    • 积分:363
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:4篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论