首页 / EASYUI / easyui使用易错点
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的如下效果?
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的编辑功能
<table id="emps" ></table>
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 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。