easyui使用易错点

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了easyui使用易错点，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7425字，纯文字阅读大概需要11分钟。

内容图文

一、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({ //模型下拉框

onl oadSuccess: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的如下效果？

easyui使用易错点 - 文章图片

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>

内容总结

以上是互联网集市为您收集整理的easyui使用易错点全部内容，希望文章能够帮你解决easyui使用易错点所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/983052.html

来源：【匿名】

【上一篇】easyui 数据网格中numberbox的onChange触发无效【下一篇】PHP – EasyUI DataGrid 资料取的方式介绍

更多 ►

【easyui使用易错点】教程文章相关的互联网学习教程文章

前段时间做一个系统的服务端管理系统，使用了一下EasyUI。以下是我在使用中觉得需要注意的地方或者一些EasyUI中一些特别点的用法。总结如下，与大家分享下，希望对初学者能有写作用。EasyUI 使用注意点：1、使用href方式从外部引入，需将所有代码写在body标签中，可省略body标签之外的所有内容。可以通过函数来修改加载html解析的方式。、在EasyUI中还有一个属性extractor，可以用来定义获取href数据的规则，这个没有使用过，...

jQuery前端框架easyui使用Dialog时bug处理【图】

最近一直都在用easyui前端框架来开发设计UI，但在使用Dialog时，发现如果页面内容比较多，就会出现问题，首先看一下我的原代码：代码如下: <input type="button" value="确认预约" id="btnconfirm" onclick="javascript:openconfirmDlg();" /> <div id="confirmd"> <p>请选择确认结果：</p> <p><input type="radio" value="True" id="rtrue" name="rresult" class="rresult" /><label for="rtrue">成功</la...

Easyui使用Dialog行内按钮布局【图】

本文主要为大家带来一篇Easyui使用Dialog行内按钮布局的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。JSP页面<p class="easyui-layout" data-options="fit:true"> <p data-options="region:north,split:false" > <p title="角色分配" > <table cellpadding="12" cellspacing="0" > <tr> <td >角色名称:</td> <td><input id="roleName" class="easyui-textbox" ></t...

初试jQueryEasyUI使用介绍_jquery【图】

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。 OK，下面就开始我们的初探之旅。jQuery EasyUI---Accordion 手风琴效果...

jQuery前端框架easyui使用Dialog时bug处理_jquery【图】

最近一直都在用easyui前端框架来开发设计UI，但在使用Dialog时，发现如果页面内容比较多，就会出现问题，首先看一下我的原代码：代码如下: 请选择确认结果：成功失败$("#confirmd").dialog({title: '预约确认',iconCls: 'icon-save', resizable: false, modal: true, closed: true,width: 200, height: 200,buttons: [{ text: '提交', handler: function () {alert("ok");}}, { text: '取消', handler: function () {$("#confir...

Easyui使用Dialog行内按钮布局的实例【图】

JSP页面 <div class="easyui-layout" data-options="fit:true"> <div data-options="region:north,split:false" > <div title="角色分配" > <table cellpadding="12" cellspacing="0" > <tr> <td >角色名称:</td> <td><input id="roleName" class="easyui-textbox" ></td> <td >角色功能:</td> <td> <select id="roleFun" class="easyui-combobox" data-options="editable:false,multiple:true,panelHeight:400px" ></select> <...

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法【图】

在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单先上代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用车管理</title> <link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" /> <link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" /> <script src=".....

jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单【图】

先给大家看下效果图，效果图展示如下：关键代码如下所示： <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> <link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" /> <link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" /> <script src="../JQuery/jquery.min.js"></script>...

初试jQuery EasyUI 使用介绍【图】

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。 OK，下面就开始我们的初探之旅。jQuery EasyUI---Accordion 手风琴...