jQuery EasyUI는 jQuery를 기반으로 한 UI 플러그인 모음이며, jQuery EasyUI의 목표는 웹 개발자가 기능이 풍부하고 아름다운 UI 인터페이스를 보다 쉽게 만들 수 있도록 돕는 것입니다. 개발자는 복잡한 자바스크립트를 작성할 필요도 없고 CSS 스타일에 대한 심층적인 이해도 필요하지 않습니다. 모든 개발자는 간단한 HTML 태그만 알면 됩니다. 이 글은 jQuery EasyUI 개발 스킬 요약에 대한 관련 정보를 주로 소개하고 있습니다. 이 글을 통해 누구나 EasyUI의 개발 스킬을 익힐 수 있으니 참고하시면 좋겠습니다.
jQuery EasyUI 개발 스킬 요약
1. 탭을 사용할 때 URL 대신 콘텐츠를 사용하는 경우 iframe을 삽입해야 합니다
addTab({ title:node.text, closeable:true, content:‘<iframe src="'+url+'" frameborder="0" style="border:0;width:100%;height:99%"></iframe> });
1) iframe에서 태그 콘텐츠를 외부적으로 호출합니다
<button onclick="console.info($('iframe').contents().find('#frameId'));"/>
2) 외부 메서드에 대한 내부 호출:
onclick="parent.getData();"
2. 쿼리 제출 양식:
function serarchFun(){//搜索 $("#datagrid").datagrid("load", serializeObject($("#searchForm"))); } function cleanFun(){//清空 $("#searchForm input").val(''); $("#datagrid").datagrid("load", {}); } function removeFun(){//删除 var rows=$("#datagrid").datagrid("getChecked"); var ids[] = new Array(); if(rows.length>0){ for(var i=0;i<rows.length;i++){ ids.push(row[i].id); } $.ajax({ url:'${rootPath}/user_delete.action', data:{ids:ids.join(',')}, dataType:'json', success:function(data){ $('#datagrid').datagrid('load'); $('#datagrid').datagrid('unselectAll'); $.messager.Show({ title:'提示', msg:data.msg }); } }) }else{ $.messager.Show({ title:'提示', msg:'不能删除' }); } }
3.
$("#datagrid").datagrid( url:"${rootPath}/user_add.action", idField:'id', checkOnSelect:false, selectOnCheck:true,//选中复选框选中 frozonColumns:[[{ field:'id', title:'编号', width:150, checkbox:true },{ field:'name', title:'登陆名称', width:150, sortable:true }]], columns:[[{ field:'pwd', title:'密码', width:150, formatter: function(){ return:"****************" } }]] );
4、 확인 대화 상자:
$.messager.confirm('确认','你真的要删除吗?',function(data){ if(data){ } });
5. 페이지의 동적 로딩을 구현하도록 편집
function editFun(){ var rows=$("#datagrid").datagrid("getChecked"); $('<p/>').dialog({ width:500, height:200, href:'${rootPath}/edit.jsp, modal:true, title:'编辑用户', buttons:[{ text:编辑, handler:function(){ $('#editForm').form('submit',{ url:'${rootPath}/user_edit.action', success:function(data){ var obj = JQuery.parseJSON(data); if(obj.success){ $('#edit_dialog').dialog('close'); } $.messager.show({ title:'提示', msg:obj.msg }); } } } }], onClose:function(){//必须写的 $(this).dialog('destroy'); }, onOpen:function(){ var data = rows[0]; }, onLoad:function(){//初始化数据,填充数据 var data = rows[0]; $("#editForm").form("load", data); } }); }
6. 업데이트 라인
var rows=(‘#datagrid').datagrid(‘getChecked');(‘#datagrid').datagrid(‘updateRow',{ index:$(‘#datagrid').datagrid(‘getRowIndex',rows[0]), row:result.obj });
관련 권장 사항:
jQuery EasyUI 창 사용 예제에 대한 자세한 설명