树状下拉选择框实例.docVIP

jquery easy ui comboxtree应用 树状下拉选择框?? 2011-04-28 13:23:05|??分类： 默认分类 |??标签： |字号大中小?订阅 ? ? 随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。jQuery 是继prototype之后的又一个优秀的javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript? 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。它具有如下一些特点：1、代码简练、语义易懂、学习快速、文档丰富。2、jQuery是一个轻量级的脚本，其代码非常小巧，必威体育精装版版的JavaScript包只有20K左右。3、jQuery支持css1-CSS3,以及基本的xPath。4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。5、可以很容易的为jQuery扩展其他功能。6、能将JS代码和html代码完全分离，便于代码和维护和修改。7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。官方站点：/? 中文站点：/ ? 今天我们所讲的就是jquery-easy-ui，这是一个功能比较丰富的插件，提供了许多通用布局、显示组件。如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效等。此插件的目标就是Easy to build the ui of your web site by it! 我们通常有一些数据需要用户进行选择，比如部门或类别之类的，一般情况下我们提供了一个select元素即可。如下: ? ? 这样当然可以，但如果这些数据具有层次结构特征，比如类别之间的关系，组织机构之间的关系，我们更希望能在选择时清楚我们选择的数据在层次结构上的信息。这时我们首先肯定是树状组件，但如果能在下拉选择框中嵌入树状组件，用来代替相应的选项，这是一个很好的结果。 Jquery-easy-ui提供了这样的组件，称为comboxtree 效果如下: ? ? ? ? ?? link rel=stylesheet type=text/css href=../themes/default/easyui.css ?? link rel=stylesheet type=text/css href=../themes/icon.css ?? script type=text/javascript src=../jquery-1.4.2.min.js/script ?? script type=text/javascript src=../jquery.easyui.min.js/script ?? script ????? function reload(){ ??????? $(#cc).combotree(reload); ????? } ????? function setValue(){ ??????? $(#cc).combotree(setValue,{ ?????????? id:2, ?????????? text: ??????? }); ????? } ????? function getValue(){ ??????? var val = $(#cc).combotree(getValue); ??????? alert(val); ????? } ?? /script /head body ?? h1ComboTree/h1 ?? div