上一篇中我们看到了panel的基本实现,没有什么难度,最重要的是data-options和class两个标签属性的定义。这里我们将看一下在panel中如何加载其他的页面。
1.先看看引用的资源文件和html
Load Panel Content - jQuery EasyUI Demo Click the refresh button on top right of panel to load content.
这里没有什么要说的了还是两个主要的js文件jquery.min.js和jquery.easyui.min.js最主要的选项是data-options=" tools:[{iconCls:'icon-reload',handler:function(){$('#p').panel('refresh','_content.html')}}] "指定了这个panel的标签样式和加载的页面,执行的动作是refresh。
2.再看看这个加载的html文件,其实就是一一段简单的文字,如下
AJAX Content Here is the content loaded via AJAX.
- easyui is a collection of user-interface plugin based on jQuery.
- easyui provides essential functionality for building modem, interactive, javascript applications.
- using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
- complete framework for HTML5 web page.
- easyui save your time and scales while developing your products.
- easyui is very easy but powerful.
3.注意在jquery里面所有的关键字都是区分大小写的,这个和javascript是一致的
$('#centerContent').panel({ href:"_publish.html?Id="+selectedRow.Id, onLoad:function(){ //alert("aa"); $('#comBusiness').combobox('setValue', selectedRow.Business); if(selectedRow.Business!=null){ $('#comBusiness').combobox('setValue', selectedRow.Business); } if(selectedRow.Solution!=null){ $('#comSolution').combobox('setValue', selectedRow.Solution); } if(selectedRow.Service!=null){ $('#comService').combobox('setValue', selectedRow.Service); } if(selectedRow.About!=null){ $('#comAbout').combobox('setValue', selectedRow.About); } } });
在这一段中,我错误的把onLoad写成了onload,然后悲剧了折磨了我两个小时,写成小写的是不管用的,切记,切记!