easyui使用易错点

乐之者java

于 2021-05-12 11:20:15 发布

阅读量630

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/116700380

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

一、easyui报错:form[0].submit is not a function

使用easyui提交表单的时候报错：easyui报错:form[0].submit is not a function。

原因：

easyui表单提交可以提交文件和普通字段，相当于jquery-from.js了，当然了，要想提交文件，设置form标签的enctype="multipart/form-data"是前提，但是使用easyui提交表单的时候却报了如上的错误，检查了该设置的都设置了，最后发现原因是触发提交的按钮的id或者nane写成了submit,改成其它任意名字就行了，但是就是不能叫做"submit"。

原先错误的写法：

<a href="#" id="submit"  class="easyui-linkbutton" data-options="iconCls:'icon-ok'" >提交</a>

这里我修改为：

<a href="#" id="toAdd_submit"  class="easyui-linkbutton" data-options="iconCls:'icon-ok'" >提交</a>

就可以了。

使用jquery-easyui提交表单示例：

$("#toAdd_submit").click(function(){//提交操作
		$("#toAdd_comm_thumbpic_file").val("");
		$('#toAdd_form').form({    
		    url:'trueAddContnet',   
		    onSubmit:function(param){
		    	if(!$("#toAdd_comm_title").val()){
		    		$.messager.alert('错误','标题必填!','error');
		    		return false;
		    	}
		    	$.messager.progress({msg:"正在提交....",title:"请稍等"});
		    },
		    success:function(data){    
		    	$.messager.progress("close");
		    	data=$.parseJSON(data);
		    	if(data.status=="success"){
		        	$.messager.alert('提示',data.info,'info');
		        	var tab = $('#centerArea').tabs('getSelected');  // 获取选择的面板
		        	tab.panel('refresh');
		        }else{
		        	$.messager.alert('错误',"添加文档出错",'error');
		        }
		    }    
		});    
		$('#toAdd_form').submit();  
	});

二、easyui几个笔记重点easyui加载html片段

$('#centerArea').tabs("add",{
    title:opts.txt,
    narrow:true,
    closable:true,
    method:opts.method,
    content:"<iframe   frameborder=0 scrolling='auto' width='100%'  height='99%' src='toMakeIndex'></iframe>"
});

easyui使用content加载tab选项卡的时候可以写iframe，那么src引用的地址toMakeIndex如下

@RequestMapping("/toMakeIndex")
	public String toMakeIndex(){
		return "static/toMakeIndex";
	}

即toMakeIndex这个方法返回的toMakeIndex.jsp包含完整的html结构,而如果写成下面的方式：

	$('#centerArea').tabs("add",{
				title:txt,
				narrow:true,
				closable:true,
				method:opts.method,
				queryParams:opts.queryParams,
				href:toMakeIndex
			});

那么此时toMakeIndex.jsp只能是html片段，所谓html片段就是不能包含html，body这些标签，因为这个html片段是被放入到其他页面中的，如果再有html，body等标识该页面时完整html结构的标签的话，就会导致页面错乱，js脚本不执行等奇怪现象。这两种方式各有千秋，看自己怎么个需求了。

eayui的tabs选项卡组件通过href引入html片段的不足：

通过iframe的方式不必担心页面的html元素的id是什么，随便起都可以，而通过href的方式加载html片段的方式需要注意toMakeIndex.jsp(被引入的页面)和引入toMakeIndex.jsp的页面里面的html元素的id不能重复，一不小心就出错了，还要注意css冲突的问题，引入页面和被引入页面可能出现css覆盖的问题。

eayui的tabs选项卡组件通过href引入html片段的优点：

css、js这些静态资源只需要在引入页面引入就可以了，这里还拿toMakeIndex.jsp作为被引入的页面，他只是作为引入toMakeIndex.jsp页面的一部分html结构而存在，当然可以使用原有页面的css和js了，而iframe则需要单独引入需要的css和js，加载起来可能会慢点。

6.$("#layout").layout("panel","center").panel({

onResize:function(width, height){

$("#centerArea").tabs("resize","auto");

}

});内容区域自适应大小

7.$("#contentManage_chanenl_id").combobox({ //模型下拉框

onLoadSuccess:function(){

$("#contentManage_chanenl_id").combobox("select","---所有---");

}); 改为使用

$("#contentManage_chanenl_id").combobox({ //模型下拉框

value:"all"//all是---所有---对应的id值，这样就避免了加载出来页面没操作下拉框时通过$("#contentManage_chanenl_id").combobox("getValue")

//取到的值是“---所有---”而不是其对应的id的情况出现，也不用再在后边进行data["contentManage_chanenl_id"]=$("#contentManage_chanenl_id").combobox("getValue")=="---所有---"?"all":$("#contentManage_chanenl_id").combobox("getValue");

//等复杂判断了

});

三、easyui tabs右键菜单关闭

需求：如何实现easyui tabs的如下效果？

01.首先需要给tabs组件添加onContextMenu事件

$("#centerArea").tabs({
			border:false,
			fit:true,
			onContextMenu: function(e, title, index){
				  e.preventDefault();
				  $('#closeCxt').menu('show', {
		                 left: e.pageX,
		                 top: e.pageY
		          });
			}
		});

id为closeCxt的元素是上下文菜单：

   <div id="closeCxt" class="easyui-menu" >
	  <div id="closeCxt_crt" data-options="iconCls:'icon_cancle'" >关闭当前</div>
      <div id="closeCxt_all" data-options="iconCls:'icon_cross'" >关闭全部</div>
      <div id="closeCxt_other" data-options="iconCls:'icon_no'">关闭其他</div>
   </div>

我们定义菜单的点击事件，实现关闭逻辑即可：

	 $("#closeCxt").menu({
             onClick : function (item) {
                 closeTab(item.id);
             }
         });
function closeTab(id){
	if(id=="closeCxt_crt"){
		var crtTab=$("#centerArea").tabs("getSelected");
		var crtIndex=$("#centerArea").tabs("getTabIndex",crtTab);
		$("#centerArea").tabs("close",crtIndex);
	}else if(id=="closeCxt_all"){
		var allTabs=$("#centerArea").tabs("tabs");
		var len=allTabs.length;
		while(len!=0){
			$("#centerArea").tabs("close",0);
			len=$("#centerArea").tabs("tabs").length;
		}
	}else if(id=="closeCxt_other"){
		var crtTab=$("#centerArea").tabs("getSelected");
		var crtIndex=$("#centerArea").tabs("getTabIndex",crtTab);//跟addtab时指定的id无关，索引动态改变
		var allTabs=$("#centerArea").tabs("tabs");
		var len=allTabs.length;
		for(var i=0;i<len;i++){
			if(i<crtIndex){
				$("#centerArea").tabs("close",0);
			}else if(i>crtIndex){
				$("#centerArea").tabs("close",1);
			}
		}
	}
}

关键在于closeTab方法的实现。

四、easyui datagrid的编辑功能

easyui datagrid的编辑功能javascript代码：

<script type="text/javascript">
	var obj={
			 editCell:undefined
	};
	$(function (){
		$('#emps').datagrid({    
		    url:'<%=request.getContextPath() %>/userServlet?flag=list',    
		    columns:[[    
		        {field:'CID',title:'CID',width:100},    
		        {field:'CNAME',title:'CNAME',width:100},    
		        {field:'CAGE',title:'CAGE',width:100,align:'right'},    
		        {field:'CSALARY',title:'CSALARY',width:100,align:'right'},
		        {field:'CSUBCOMPANY',title:'CSUBCOMPANY',width:100,align:'right'},    
		        {field:'CDEPT',title:'CDEPT',width:100,align:'right'},    
		        {field:'CBIRTH',title:'CBIRTH',width:100,align:'right'},    
		        {field:'CNOTE',title:'CNOTE',width:100,align:'right',editor:{
		        	type:'text',
		        	options:{}
		        }}    
		    ]],
		    onClickCell:function (rowIndex, field, value){
		    	if(field=="CNOTE"){
		    		if(obj.editCell!=undefined){
		    			$("#emps").datagrid("endEdit",obj.editCell);
		    			obj.editCell=rowIndex;
		    			$("#emps").datagrid("beginEdit",rowIndex);
		    		}else{
		    			obj.editCell=rowIndex;
				    	$("#emps").datagrid("beginEdit",rowIndex);
		    		}
		    	}
		    },
		    onAfterEdit:function (rowIndex, rowData, changes){
		    	var param={
		    			id:rowData.CID,
		    			note:rowData.CNOTE
		    	};
		    	var params={};
		    	 params["param"]=JSON.stringify(param);
		    	 $("#emps").datagrid("loading");
		    	 $.ajax({
		    		 type:'post',
		    		 data:params,
		    		 url:"<%=request.getContextPath() %>/userServlet?flag=update",
		    		 success:function(resultData){
		    			 $("#emps").datagrid("loaded");
		    			 //$("#emps").datagrid("loadData",resultData);
		    			$.messager.show({
		    				title:'我的消息',
		    				msg:'更新成功。'
		    			})
		    		 },
		    	//服务器发生错误了，不管服务器端有没有try catch【反正我测试了有的，没有的也不知道error啊】	 
		    		 error:function(){
		    			 $("#emps").datagrid("loaded");
		    			 //$("#emps").datagrid("loadData",resultData);
		    			 alert(resultData.info);
		    		 }
		    	 });
		    }
		});
	});
</script>

乐之者java

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
easyui使用易错点

一、easyui报错:form[0].submit is not a function使用easyui提交表单的时候报错：easyui报错:form[0].submit is not a function。原因：easyui表单提交可以提交文件和普通字段，相当于jquery-from.js了，当然了，要想提交文件，设置form标签的enctype="multipart/form-data"是前提，但是使用easyui提交表单的时候却报了如上的错误，检查了该设置的都设置了，最后发现...
复制链接

扫一扫

专栏目录