easyUI分页.docVIP

ExtJS一个很好的，一个非常好的UI工具，但太庞大，太复杂了。对于一些简单的应用也没有必要使用。 ????最近在网上转着，发现了一款还不错的UI插件JQuery EasyUI。对于个人来说，对JQuery还比较熟悉，既然是基于JQuery的，也不妨试试。 ??? JQuery EasyUI其实挺强大的，一些比较常用的比如 windows，tab，datagrid，pagination ,layout,menu,tree等都有，这已经可以构造一些比较实用的东东了。另一方面我发觉比较好的是，它的数据类型基于json数据格式。这就更另我喜悦，我个人比较喜欢这种格式。 ??? 另一方面，官方上提供的是etMVC框架，让人摸不着。这里将用struts2来实现一下。 ??? 废话不多说，先说说需要准备的东西吧： ? 第一步：准备阶段。 1.JQuery EasyUI 1.1.1 2.Jquery 1.4 ? struts2 jar包 1.****json-lib-2.2.3-jdk15.jar 2.ezmorph-1.0.6.jar 3.commons-httpclient.jar 4.commons-beanutils-1.8.0.jar ****struts2-json-plugin-2.1.8.jar ? 这里重中之重的是，json-lib 和 struts2-json-plugin， 这些jar包可以在struts 2.1.8 lib中找到。 ~1.json-lib 是转换对象与json对象的一些操作，其中包含转换为JSONObject、JSONArray、json字符串等。 ~2.struts2-json-plugn 我想很多童鞋们以前用的ajax，是直接由out对象输出json字符串吧。这样做，一则需要Servlet API，二则容易出现乱码错误，三则像datagrid中直接需要json对象，你给个字符串是不能解析的。利用这个包，可以使得action传值的时候以json字符串、JSONObject、JSONArray等多种格式传递，很方便。 ? 第二步：编写代码 test.html Java代码 ? !DOCTYPE?html?PUBLIC?-//W3C//DTD?HTML?4.01?Transitional//EN?/TR/html4/loose.dtd ?? html ?? head ?? ????meta?http-equiv=Content-Type?content=text/html;?charset=UTF-8 ?? ????titletest/title? ?? ????meta?http-equiv=keywords?content=keyword1,keyword2,keyword3 ?? ????meta?http-equiv=description?content=this?is?my?page ?? ????meta?http-equiv=content-type?content=text/html;?charset=UTF-8?? ?? ????link?rel=stylesheet?type=text/css?href=../js/themes/default/easyui.css ?? ????link?rel=stylesheet?type=text/css?href=../js/themes/icon.css ?? ???? ?? ????????script?type=text/javascript?src=../js/jquery-1.4.2.min.js/script ?? ????script?type=text/javascript?src=../js/jquery.easyui.min.js/script ?? ????script?type=text/javascript?src=test.js/script ?? ??/head?? ?? ??body ?? ????table?id=test/table ?? ??/body ?? /html?? !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 titletest/title meta http-equiv=keywords content=keyword1,keyword2,keyword3 meta http-equiv=description