easyui两种方式实现增删改查

于 2014-05-05 14:33:02 发布
阅读量389 收藏 5
点赞数
分类专栏： easyui 文章标签： jquery easyui ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangfeixinjing/article/details/84596568
版权
[b]刚入职不久，公司前段用jquery easyui写前端实现，最近一段时间一直沉醉在jquery easyui中，不多说，下面是我最近的成果，用easyui的两种方式实现功能。[/b]
[color=red]一种是在js中编写datagrid、window、form等插件，另一种是在body中用class形式编写插件。第一种方式代码量大，个人觉得好理解，第二种方式代码量小，差错时方便查找。[/color]
[img]
[img]http://dl2.iteye.com/upload/attachment/0096/7796/9e58d2c3-dbd8-3108-bafb-b642af528a81.jpg[/img]
[/img]
[size=medium]第一种：（代码量大，不易查找）[/size] 
<%@ include file="/common/view/header.jsp"%>
<script type="text/javascript">
	var win_add=null, win_upt=null, form_add=null, form_upt=null, form=null,win_pic=null;
	var editor = null;
	$(document).ready(function(){
	 	//html文本编辑器
		 KindEditor.ready(function(K) {
			editor = K.create('textarea[name="content"]', {
				allowUpload:true,
	        	filePostName:"picFile",
	            allowPreviewEmoticons:true,
	            urlType:'absolute', //返回路径为绝对路径
	            resizeMode:1, //编辑器只能调整高度
	            uploadJson:'<%=cp%>/upload/picupload',
				items : [
					'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
					'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
					'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
					afterBlur:function(){this.sync();}
			});
		});
  			//create datagrid
		 		$('#dg').datagrid({
                url:'<%=cp%>/news/getAllNews',
                //title:'新闻信息列表',
                pageSize:20,
    			pageList:[5,10,15,20],
    			pagination:true,//分页控件
    			rownumbers:true,//行号
                height:document.body.clientHeight,
                nowrap: true,     //True 就会把数据显示在一行里
                striped: true,  //奇偶条显示不同的颜色
                collapsible:true,   //可折叠
                remoteSort: false,    //是否从服务器给数据排序
                idField:'id',  
                loadMsg:'正在加载....',

			columns : [ [
			{field:'ck',checkbox:true,width:2}, //显示复选框
			  {
				title : '标题',
				field : 'title',
				width : 300,
				sortable : true,
				align : 'center',
				formatter:function(value,row,index){
					var prefix = "<a href='javascript:void(-1);' onclick='parent.addTab(\"阅读："+row.title+"\",\"<%=cp%>/read/msginfo/"+row.id+"\")'>";
					return prefix+row.title;
				}
			}, {
				title : '作者',
				field : 'author',
				width : 200,
				sortable : false,
				align : 'center'
			}, {
				title : '内容',
				field : 'content',
				width : 380,
				hidden:true,
				sortable : false,
				align : 'center'
			}, {
				title : '新闻类型',
				field : 'typename',
				sortable : true,
				width : 200,
				align : 'center'
			}, {
				title : '日期',
				field : 'date',
				width : 200,
				sortable : true,
				align : 'center'
			}, 
			{title:'操作',field:'opition',align:'center',width:200,
						formatter:function(value,row,index){
							var d='', e = '<a href="javascript:void(-1)" onclick="updatenews('+index+')">更新</a> ',f='';
							 f = ' <a href="javascript:void(-1)" onclick="deletenews('+index+')">删除</a>';
							return d+e+f;
						}
					}
			] ],
			toolbar:"#tb",
			onDblClickRow:function(rowIndex, rowData){   //双击触发
                	lookContent(rowIndex);
            },
            onLoadSuccess:function(){
				$('#dg').datagrid('clearSelections'); //加载成功后，消除所有选项
			},
			onClickRow:function(){     //单击触发
				$('#dg').datagrid('clearSelections');  
			}
		});
		init_window();
		init_form();
		initDialog();
	});
	window.onresize=function(){
		$('#dg').datagrid('resize',{height:document.body.clientHeight});
	}
	/* 初始化窗口控件 */
  	function init_window(){
  			var width = 1000;
  			var height = 500;
  			var top = (document.body.clientHeight-height)/2;
  			var left = (document.body.clientWidth-width)/2;
  			win_add = $('#newsform').window({
				closed:true,
				width: width,
				height: height,
				top: top,
  				left: left,
				modal: true
			});
		    win_upt = $('#updt_news').window({
				closed:true,
				width: width,
				height: height,
				top: top,
  				left: left,
				modal: true,
			});
			win_pic = $('#data_win').window({
				closed:true,
				width: width,
				height: height,
				top: top,
  				left: left,
				modal: true,
				iconCls:'icon-app'
			});
		}
		/* 初始化表单控件 */
  		 function init_form(){
  			form_add = win_add.find('form');
  			form_upt = win_upt.find('form');
  		}
		/* 新增新闻 */
  		function newAddNews(){
  			win_add.window('setTitle','添加新闻');
  			win_add.window('open');
			form_add.form('clear');
			form_add.url = '<%=cp%>/news/addNews';
			form = form_add;
  		}
    	//数据保存
  		function saveData(){
  			form.form('submit', {
				url:form.url,
				success:function(data){
					eval('data='+data);
					 if (data.success){
						$.messager.alert('成功',data.msg);
						$('#dg').datagrid('reload');
						closeWindow();
					} else {
						$.messager.alert('错误',data.msg,'error');
					} 
				}
			});
  		}
  		/* 关闭表单窗口 */
  		function closeWindow(){
			if(win_add)
				win_add.window('close');
			if(win_upt)
				win_upt.window('close');
		}
	/* 执行常规查询 */
  		function normalQuery(value){
			 $('#dg').datagrid("reload",{
				 title: value
			 }); 
  		}
  	/* 显示全部记录 */
  		function displayAll(){
  			$('#dg').datagrid("reload",{title:''});
  		}
  	/* 更新新闻 */
  		function updatenews(index){
  			var row =$('#dg').datagrid('getRows')[index];  //获取行
  			if (row){
  				win_upt.window('setTitle','修改新闻');
				win_upt.window('open');
				form_upt.form('clear');
				form_upt.form('load', '<%=cp%>/news/getNews/'+row.id);
				form_upt.url = '<%=cp%>/news/updateNews?id='+row.id;
				form = form_upt;

				$('#u_title').html(row.title);    //$('#u_title')[0].innerHTML = row.title;
				editor.html(row.content); 
				//$('#news_type').combobox('setValue',row.newstype);
				} else {
				$.messager.show({
					title:'警告', 
					msg:'请您先选择用户资料。'
				});
			}
  		}

  //删除
  	function deletenews(index){
  		$.messager.confirm('提示','您是否确认执行删除操作？',function(r){  
  				if (r){
  					var row = $('#dg').datagrid('getRows')[index];
  	    			if(row && row.id!=null){
  	    				$.post('<%=cp%>/news/delNews/'+row.id,function(data){
  	    					eval("data="+data);   //字符串转换成json对象
  	    					if(data.success){
  	    						$.messager.alert('提示',data.msg);
  	    						$('#dg').datagrid('reload');
  	    						//$.messager.show({title:'提示',msg:data.msg,timeout:2000,showType:'fade'});
  	    					}else{
  	    						$.messager.alert('错误',data.msg,'error');
  	    					}
  	    				}); 
  	    			}
  				}
  			});
  		}
  	/* 批量删除 */
  	function deleterow(){
  		var rows = $('#dg').datagrid('getSelections');
	        	if(rows==null||rows.length<=0){
	        		$.messager.alert('提示',"请先选择要删除的信息");return false;
	        	}
  		$.messager.confirm('提示','确定要删除吗?',function(result){
	        if (result){
	        	var ps = "";
	        	$.each(rows,function(i,n){
	        		if(i==0) 
	        			ps += "?id="+n.id;
	        		else
	        			ps += "&id="+n.id;
	        	});
	        	$.post('<%=cp%>/news/del'+ps,function(data){
		        	eval("data="+data);   //字符串转换成json对象
  	    			if(data.success){
  	    				$.messager.alert('提示',data.msg);
  	    				$('#dg').datagrid('reload');
  	    			}else{
  	    				$.messager.alert('错误',data.msg,'error');
  	    			}
	        	});
	        }
	    });
  	}
  	/* 数据加载 */
  	function lookContent(index){
  			var row = $('#dg').datagrid('getRows')[index];
  			if (row){

					win_pic.window('setTitle','新闻内容');
					$('#look_content').html(row.content); 
					win_pic.window('open');

			} else {
				$.messager.show({
					title:'警告',
					msg:'请您先选择数据行。'
				});
			}
  		}
  	/* 打开附件窗口 */
  		function openAttach(){
  		 	$('#fltree').tree({ 
	  			url:'<%=cp%>/file/fileTree',
	  			animate : true,
	  			checkbox:true,
	  			onlyLeafCheck:true,
	  			onLoadSuccess:function(node,data){
					if(data==null || data.length==0){
						$('#fltree').append('<li style="font-size:16px;margin-top:10px">暂无附件，请在"附件上传"模块上传。</li>');
					}
				}
  			}); 
  			$('#fileDialog').dialog('open'); 
  		}
  	function initDialog(){
		$('#fileDialog').dialog({
			closed:true,
			buttons:[{
				text:'确定',
				handler:fileSubmit
			},{
				text:'取消',
				handler:function(){
					$('#fileDialog').dialog('close');
				}
			}]
		});
	}
	var flid = [],flnms = [];
	function fileSubmit(){
		var nd = $('#fltree').tree('getChecked');
		if(nd.length > 0){
			for(var i = 0;i<nd.length;i++) {
				flid[i] = nd[i].id;
				flnms[i] = nd[i].text;
			}
		}else {
			$.messager.alert('提示','请选择上传的文件','info');
		}
		if(flnms.length>0){
			for(var i=0;i<flnms.length;i++){
				var str="<span id='fl_"+i+"'>"+flnms[i]+"[<a href='javascript:void(-1)' onclick='filedel("+i+");'>删除<a>] </span>";
				$('#file_tree').append(str);
			}
		$('#file_tree').show();
		}
		$('#fileDialog').dialog('close');
	}
	function filedel(index){
		$("#fl_"+index).html("");
		oaflcds.slice(index, 1);
		oaflnms.slice(index, 1);
	}
	</script>
</head>
<body style="margin:0">
	 <table id="dg" ></table>
	 <%-- 创建toolbar --%>
    <div id="tb" style="height:35px;">
    	<div style="float:left;padding:4px;">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
    	</div>
     	<div style="padding:6px;">
    		<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
    		<span  style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span> 
    	</div>
    </div>
	 <div id="data_win" class="easyui-window" closed="true" modal="true">
	     <div id="look_content" style="text-align:center; padding:1px;"></div> 
	</div>
<!-- data item form for update -->
	<div id="updt_news" class="easyui-window" closed="true" modal="true">
	    <div style="text-align:center; padding:1px;">
	        <form id="upt_news" method="post">
	            <table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
		            <tr>
		               <td>标题：</td>
		                   <!-- <td> <span id='u_title'></span></td> -->
		               		<td><input type="text" name="title" /></td> 
	                </tr> 
	                <tr>
	                   <td>作者：</td>
	                    <td><input type="text" name="author"  class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
	                </tr>
	                <tr>
	                   <td>新闻类型：</td>
	                   <td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="news_type" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
	                </tr>
	                <tr>
	                    <td>日期：</td>
	                    <td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
	                </tr> 
	                <tr> 
	                    <td>内容：</td>
	                    <td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
	                    <!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
	                </tr> 
	            </table>
	        </form>
	    </div>
	    <div style="text-align:center;padding:5px;">
	        <a href="javascript:void(0)" onclick="saveData()" id="btn-save" class="easyui-linkbutton" icon="icon-save">保存</a>  
	        <a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>  
	    </div>
	</div>
 <!-- data item form for insert -->
	<div id="newsform" class="easyui-window" closed="true" modal="true">
	    <div style="text-align:center; padding:1px;">
	        <form id="newsinfo_form" method="post">
	            <table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
	                <tr>
	                   <td>标题：</td>
	                    <td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
	                </tr>

	                <tr>
	                   <td>作者：</td>
	                    <td><input type="text" name="author"  class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
	                </tr>
	                <tr>
	                   <td>新闻类型：</td>
	                   <td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
	                </tr>
	                <tr>
	                    <td>日期：</td>
	                    <td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
	                </tr>
	                <tr>
	                	<td>附件</td>
	                	<td><a href ="javascript:openAttach();">附件上传</a></td>
	                </tr>
	                <tr id="file_tree" style="display:none;">
						<td colspan="1" ></td>
					</tr>
	                <tr>
	                    <td>内容：</td>
	                    <td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
	                    <!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
	                </tr>
	            </table>
	        </form>
	    </div>
	    <div style="text-align:center;padding:5px;">
	        <a href="javascript:void(0)" onclick="saveData()" id="btn-save" class="easyui-linkbutton" icon="icon-save">保存</a>  
	        <a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>  
	    </div>
	</div> 
	<div id="fileDialog" class="easyui-dialog" title="选择上传文件" 
			data-options="width:300,
			            height:450,
						modal:true,
					    minimizable:false,
						maximizable:false,
						collapsible:false,
						closed:true,       <!-- dialog不自动打开 -->
						resizable:false">
		<ul id="fltree"></ul>			
	</div>
</body>
</html>

[size=medium]第二种：（代码量小，以查找）[/size] 
<%@ include file="/common/view/header.jsp"%>
<script type="text/javascript">
	var win_add=null, win_upt=null, form_add=null, form_upt=null, form=null,win_pic=null;
	var editor = null;
$(document).ready(function(){
	 	//html文本编辑器
		 KindEditor.ready(function(K) {
			editor = K.create('textarea[name="content"]', {
				allowUpload:true,
	        	filePostName:"picFile",
	            allowPreviewEmoticons:true,
	            urlType:'absolute', //返回路径为绝对路径
	            resizeMode:1, //编辑器只能调整高度
	            uploadJson:'<%=cp%>/upload/picupload',
				items : [
					'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
					'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
					'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
					afterBlur:function(){this.sync();}
			});
		});
  	$('#dg').datagrid({ 
  			onDblClickRow:function(rowIndex, rowData){   //双击触发
                	lookContent(rowIndex);
            },
            onLoadSuccess:function(){
				$('#dg').datagrid('clearSelections'); //加载成功后，消除所有选项
			},
			onClickRow:function(){     //单击触发
				$('#dg').datagrid('clearSelections');  
			}
	});
	$('#dg').datagrid('resize', {
			height:document.body.clientHeight
	});
	resizeWin('w',0.6,0.9,1500,1000);
	resizeWin('data_win',0.6,0.9,1500,1000);
	$("#ff").form({
		success:function(data){
				eval("data="+data);
				 if (data.success){
					$.messager.alert('成功',data.msg);
					$("#dg").datagrid("reload");
					$('#w').window('close');
				} else {
					$.messager.alert('错误',data.msg,'error');
				} 
			}
	}); 
	initDialog();
});
	window.onresize=function(){
		$('#dg').datagrid('resize',{height:document.body.clientHeight});
	}
	/* 标题连接 */
	function titleOpeation(value,row,index){
		return "<a href='javascript:void(-1);' onclick='parent.addTab(\"阅读："+row.title+"\",\"<%=cp%>/read/msginfo/"+row.id+"\")'>"+value+"</a>";
	}
	/* 删除更新按钮 */
	function newsOpeation(value,row,index){
			var a = '<a href="javascript:void(-1)" onclick="updatenews('+index+')">更新</a> ';
			var b = ' <a href="javascript:void(-1)" onclick="deletenews('+index+')">删除</a>';
			return a+b;
	}
	/* 新增新闻 */
  	function newAddNews(){
 		$('#w').window('setTitle','添加新闻');
  		$('#w').window('open');
		$('#ff').form('clear');
		editor.html("");
		$('#ff').attr("action","<%=cp%>/news/addNews");
  	}
  	/* 更新新闻 */
  	function updatenews(index){
  		var row =$('#dg').datagrid('getRows')[index];  //获取行
  		if (row){
  			$('#w').window('setTitle','修改新闻');
			$('#w').window('open');
			$('#ff').form('clear');
			$('#ff').form('load', '<%=cp%>/news/getNews/'+row.id);
			$('#ff').attr("action",'<%=cp%>/news/updateNews?id='+row.id);

			/* $('#u_title').html(row.title); */    //$('#u_title')[0].innerHTML = row.title;
			editor.html(row.content); 
			//$('#news_type').combobox('setValue',row.newstype);
			} else {
			$.messager.show({
				title:'警告', 
				msg:'请您先选择用户资料。'
			});
		}
  	}
	/* 执行常规查询 */
  	function normalQuery(value){
		 $('#dg').datagrid("reload",{
			 title: value
		}); 
  	}
  	/* 显示全部记录 */
  	function displayAll(){
  		$('#dg').datagrid("reload",{title:''});
  	} 		
  //删除
  	function deletenews(index){
  		$.messager.confirm('提示','您是否确认执行删除操作？',function(r){  
  				if (r){
  					var row = $('#dg').datagrid('getRows')[index];
  	    			if(row && row.id!=null){
  	    				$.post('<%=cp%>/news/delNews/'+row.id,function(data){
  	    					eval("data="+data);   //字符串转换成json对象
  	    					if(data.success){
  	    						$.messager.alert('提示',data.msg);
  	    						$('#dg').datagrid('reload');
  	    						//$.messager.show({title:'提示',msg:data.msg,timeout:2000,showType:'fade'});
  	    					}else{
  	    						$.messager.alert('错误',data.msg,'error');
  	    					}
  	    				}); 
  	    			}
  				}
  			});
  		}
  	/* 批量删除 */
  	function deleterow(){
  		var rows = $('#dg').datagrid('getSelections');
	        	if(rows==null||rows.length<=0){
	        		$.messager.alert('提示',"请先选择要删除的信息");return false;
	        	}
  		$.messager.confirm('提示','确定要删除吗?',function(result){
	        if (result){
	        	var ps = "";
	        	$.each(rows,function(i,n){
	        		if(i==0) 
	        			ps += "?id="+n.id;
	        		else
	        			ps += "&id="+n.id;
	        	});
	        	$.post('<%=cp%>/news/del'+ps,function(data){
		        	eval("data="+data);   //字符串转换成json对象
  	    			if(data.success){
  	    				$.messager.alert('提示',data.msg);
  	    				$('#dg').datagrid('reload');
  	    			}else{
  	    				$.messager.alert('错误',data.msg,'error');
  	    			}
	        	});
	        }
	    });
  	}
  	/* 数据加载 */
  	function lookContent(index){
  			var row = $('#dg').datagrid('getRows')[index];
  			if (row){

					$('#data_win').window('setTitle','新闻内容');
					$('#look_content').html(row.content); 
					$('#data_win').window('open');

			} else {
				$.messager.show({
					title:'警告',
					msg:'请您先选择数据行。'
				});
			}
  		}
  	/* 打开附件窗口 */
  		function openAttach(){
  		 	$('#fltree').tree({ 
	  			url:'<%=cp%>/file/fileTree',
	  			animate : true,
	  			checkbox:true,
	  			onlyLeafCheck:true,
	  			onLoadSuccess:function(node,data){
					if(data==null || data.length==0){
						$('#fltree').append('<li style="font-size:16px;margin-top:10px">暂无附件，请在"附件上传"模块上传。</li>');
					}
				}
  			}); 
  			$('#fileDialog').dialog('open'); 
  		}
  	function initDialog(){
		$('#fileDialog').dialog({
			closed:true,
			buttons:[{
				text:'确定',
				handler:fileSubmit
			},{
				text:'取消',
				handler:function(){
					$('#fileDialog').dialog('close');
				}
			}]
		});
	}
	var flid = [],flnms = [];
	function fileSubmit(){
		var nd = $('#fltree').tree('getChecked');
		if(nd.length > 0){
			for(var i = 0;i<nd.length;i++) {
				flid[i] = nd[i].id;
				flnms[i] = nd[i].text;
			}
		}else {
			$.messager.alert('提示','请选择上传的文件','info');
		}
		if(flnms.length>0){
			for(var i=0;i<flnms.length;i++){
				var str="<span id='fl_"+i+"'>"+flnms[i]+"[<a href='javascript:void(-1)' onclick='filedel("+i+");'>删除<a>] </span>";
				$('#file_tree').append(str);
			}
		$('#file_tree').show();
		}
		$('#fileDialog').dialog('close');
	}
	function filedel(index){
		$("#fl_"+index).html("");
		oaflcds.slice(index, 1);
		oaflnms.slice(index, 1);
	}
	</script>
</head>
<body style="margin:0">
	 <table id="dg" class="easyui-datagrid" url="<%=cp%>/news/getAllNews" idField="id"
	 			data-options="pageSize:20,pageList:[5,10,15,20],loadMsg:'正在加载....'"
	 			pagination="true" rownumber="true" nowrap="true"  striped="true" collapsible="true" remoteSort="false"
	 			toolbar="#tb">
	 			<thead>
	 				<tr>
						<th data-options="field:'id',checkbox:true"></th>
						<th data-options="field:'title',width :300,sortable:true,align :'center',formatter:titleOpeation">标题</th>
						<th data-options="field:'author',width :200,align :'center'">作者</th>
						<th data-options="field:'content',width :200,hidden:true,align :'center'">内容</th>
						<th data-options="field:'typename',width :200,align :'center'">新闻类型</th>
						<th data-options="field:'date',width :200,sortable:true,align :'center'">日期</th>
						<th data-options="field:'opition',width :200,align :'center',formatter:newsOpeation">操作</th>
					</tr>		
	 			</thead>
	 </table>
	 <%-- 创建toolbar --%>
    <div id="tb" style="height:35px;">
    	<div style="float:left;padding:4px;">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
    	</div>
     	<div style="padding:6px;">
    		<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
    		<span  style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span> 
    	</div>
    </div>
	<div id="data_win" class="easyui-window" closed="true" modal="true">
	     <div id="look_content" style="text-align:center; padding:1px;"></div> 
	</div>
	<div id="fileDialog" class="easyui-dialog" title="选择上传文件" 
			data-options="width:300,
			            height:450,
						modal:true,
					    minimizable:false,
						maximizable:false,
						collapsible:false,
						closed:true,       <!-- dialog不自动打开 -->
						resizable:false">
		<ul id="fltree"></ul>			
	</div>
	<div id="w" class="easyui-window" data-options="iconCls:'icon-save',closed:true,modal:true">
		<div style="text-align:center; padding:1px;">
			<form id="ff" method="post">
			<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
				<tr>
	                   <td>标题：</td>
	                    <td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
	                </tr>

	                <tr>
	                   <td>作者：</td>
	                    <td><input type="text" name="author"  class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
	                </tr>
	                <tr>
	                   <td>新闻类型：</td>
	                   <td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
	                </tr>
	                <tr>
	                    <td>日期：</td>
	                    <td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
	                </tr>
	                <tr>
	                	<td>附件</td>
	                	<td><a href ="javascript:openAttach();">附件上传</a></td>
	                </tr>
	                <tr id="file_tree" style="display:none;">
						<td colspan="1" ></td>
					</tr>
	                <tr>
	                    <td>内容：</td>
	                    <td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
	                    <!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
	                </tr>
			</table>
			</form>
		</div>
		<div style="text-align:center;padding:5px;">
	        <a href="javascript:void(0)" onclick="$('#ff').submit();" id="btn-ok" class="easyui-linkbutton" icon="icon-save">保存</a>  
	        <a href="javascript:void(0)" onclick="$('#w').window('close');" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>  
	    </div> 
	</div>
</body>
</html>

[size=medium][color=blue]对第二种方法进行解析[/color][/size]
[size=medium]1、在添加内容时，使用文本编辑器KindEditor插件，需要引入其包，但在使用kindeditor时，取不到textarea里面的值，此时需要同步，加入afterBlur:function(){this.sync();具体解析参照链接[url]http://137694047.iteye.com/blog/2051315[/url][/size]
[size=medium]2、数据的分页显示，用到了datagrid插件，每页要求显示多少行数据，datagrid中的属性可以配置，更多属性的配置可查看easyui的api，easyui API的链接：[url]http://www.jeasyui.com/[/url]
[/size] 
<table id="dg" class="easyui-datagrid" url="<%=cp%>/news/getAllNews" idField="id"
	 			data-options="pageSize:20,pageList:[5,10,15,20],loadMsg:'正在加载....'"
	 			pagination="true" rownumber="true" nowrap="true"  striped="true" collapsible="true" remoteSort="false"
	 			toolbar="#tb">
	 			<thead>
	 				<tr>
						<th data-options="field:'id',checkbox:true"></th>
						<th data-options="field:'title',width :300,sortable:true,align :'center',formatter:titleOpeation">标题</th>
						<th data-options="field:'author',width :200,align :'center'">作者</th>
						<th data-options="field:'content',width :200,hidden:true,align :'center'">内容</th>
						<th data-options="field:'typename',width :200,align :'center'">新闻类型</th>
						<th data-options="field:'date',width :200,sortable:true,align :'center'">日期</th>
						<th data-options="field:'opition',width :200,align :'center',formatter:newsOpeation">操作</th>
					</tr>		
	 			</thead>
	 </table>

[size=medium]3、创建toolbar，实现添加、显示全部、批量删除、条件查找功能。
在创建这些按钮时，我遇到的问题，添加、显示全部、批量删除按钮添加到页面时，可垂直居中，当把搜索框添加上去后，搜索框不能垂直居中，搜索框的添加，破坏了页面的margin，整了一下午，勉强找到了个解决的办法，但个人觉得不太好，这里还没有找到更好方案，我的结局方案是，将添加、显示全部、批量删除按钮一个div中，并且style="float:left，搜索框放大另外一个div中。
具体代码：[/size] 
<%-- 创建toolbar --%>
    <div id="tb" style="height:35px;">
    	<div style="float:left;padding:4px;">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
    	</div>
     	<div style="padding:6px;">
    		<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
    		<span  style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span> 
    	</div>
    </div>

[size=medium]4、添加和更新公用一个window、form，两个功能只需写一个window、form即可，节省代码量[/size] 
<div id="w" class="easyui-window" data-options="iconCls:'icon-save',closed:true,modal:true">
		<div style="text-align:center; padding:1px;">
			<form id="ff" method="post">
			<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
				<tr>
	                   <td>标题：</td>
	                    <td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
	                </tr>

	                <tr>
	                   <td>作者：</td>
	                    <td><input type="text" name="author"  class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
	                </tr>
	                <tr>
	                   <td>新闻类型：</td>
	                   <td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
	                </tr>
	                <tr>
	                    <td>日期：</td>
	                    <td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
	                </tr>
	                <tr>
	                	<td>附件</td>
	                	<td><a href ="javascript:openAttach();">附件上传</a></td>
	                </tr>
	                <tr id="file_tree" style="display:none;">
						<td colspan="1" ></td>
					</tr>
	                <tr>
	                    <td>内容：</td>
	                    <td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
	                    <!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
	                </tr>
			</table>
			</form>
		</div>
		<div style="text-align:center;padding:5px;">
	        <a href="javascript:void(0)" onclick="$('#ff').submit();" id="btn-ok" class="easyui-linkbutton" icon="icon-save">保存</a>  
	        <a href="javascript:void(0)" onclick="$('#w').window('close');" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>  
	    </div> 
	</div>

[color=red][size=medium]插件中功能的实现调用的方法看上面贴的详细代码[/size][/color]
[size=medium]附加：
js中需要添加如下代码，来调整datagrid的自适应度，使其根据浏览器的大小变化而变化。[/size] 
//设置datagrid的自适应度
	window.onresize=function(){
		$('#dg').datagrid('resize',{height:document.body.clientHeight});
	}

[size=medium]不添加如上代码，会出现如下图片中的问题[/size]

[img]http://dl2.iteye.com/upload/attachment/0096/7815/d04e0808-2b7b-3187-9715-9befc283dded.jpg[/img]
wangfeixinjing
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值