首页 > Dhtmlx > dhtmlxCombo 中文帮助文档

dhtmlxCombo 中文帮助文档

Combo组件使用说明

一、导入资源

    <link rel="STYLESHEET" type="text/css" 
         href="<%=url%>Combo/codebase/dhtmlxcombo.css">
	<script src="<%=url%>Combo/codebase/dhtmlxcommon.js"></script>
	<script src="<%=url%>Combo/codebase/dhtmlxcombo.js"></script>
	<附加操作功能时需要导入以下的JS>
	<script src="<%=url%>Combo/codebase/ext/dhtmlxcombo_extra.js"></script>
	<script src="<%=url%>Combo/codebase/ext/dhtmlxcombo_group.js"></script>
	<script src="<%=url%>Combo/codebase/ext/dhtmlxcombo_whp.js"></script>

二、初始化(Initializing)

注意:combo组件有一个特殊的地方,就是它的css在使用的时候需要已存在的图片,所以在用combo的一切方法之前先设置全局图片路径,用方法:
window.dhx_gloableImgPath = “<%=url%>Combo/codebase/imgs/”;
Combo组件有两种初始化方式:
1、常用的初始化方式,即根据提供的容器(div)新建combo对象

	  <div id=”combo_zone” style=”width:200px, height:30px;” ></div>
	  <script> var z = new dhtmlXCombo(“id”, “name”, “width”);</script>
  

2、初始化页面中已经存在的select

      <select id=”combo_zone” style=”width:80px;” name=”name1”></select>
      <script> var z = dhtmlXComboFromSelect(“select_id”); </script>
  

三、加载Option

灵活的combo可以又多种加载option的方式:加载已经存在的select下的option;加载本地xml;加载访问url返回的option,调用JavaScript方法加载。
1、加载本地xml:z.loadXML(“xml_path”);
2、访问url:服务器端Action必须按如下的格式组织xml

       <?xml version="1.0" ?>
       <complete>
          <option value=”1”>北京</option>
       </complete>
       

3、调用JavaScript方法加载
z.addOption([[value,label,css], [value2,label2,css2]… …]);
value label css
其中 value为option的value,label为option在页面中显示的内容。

四、过滤和自动填充功能

z.enableFilteringMode(flag); //flag:true/false
效果例如:按用户在combo中的输入逐步过滤optoin中不符合条件的选项。
自动过滤(filter) :option为(a01,a02,b01,b02),当用户在combo中键入a的时候组件会自动过滤掉b01和b02选项。
自动完成(complete):接上例,当用户输入a的时候,组件自动将以a开头的第一个符合条件的option的内容添加到输入框中。

五、事件

onKeyPressed 当在combo中按下键盘上的任意键的时候触发
onChange 当combo中的值改变时触发
onSelectionChange 当选中值改变时触发
onBlur 失去焦点时触发

六、实现多个combo联动

在应用中常有combo联动的应用,如根据用户在第一个combo中选定的是哪个省自动将本省对应的所有市区添加到第二个combo中。
Combo组件又两种实现方式:将一个combo绑定另一个子combo;自动给一个combo添加子combo。
1、combo_a.attachChildCombo(combo_b, url);
选定combo_a中的option之后combo_b会自动访问url指向的服务器端组件,组件会接受combo_a选定的option的value值,参数名为parent。Combo_b根据返回的xml数据增加option。
实现实例:

		<javascript>
			za.enableFilteringMode(true); 
			za.loadXML("test/comboBox/province.xml");
			za.attachChildCombo(zb,"user!listCity.action");
		</javascript>
		

Action根据parent的值给出对应的option。Xml格式必须符合规定结构。
2、combo.setAutoSubCombo(url,name);
与A方法唯一不同的地方是本方法中子combo与父combo在同一容器中,在父combo选择值之前子combo不会显示。

此组件非常简单地实现百度、google搜索的联想功能及多个下拉列表的级联功能。

除非注明,文章为IT热血青年原创,欢迎转载!转载请注明本文地址,谢谢。
本文地址:http://blog.itblood.com/dhtmlx-combo-chinese-help-documentation.html

分类: Dhtmlx 标签: ,
  1. spp
    2012年11月1日16:42 | #1

    对于我已经加载的 combo的值 ,如何在修改的时候再次赋值到combo 上。 不会 一个一个的添加吧。

  2. spp
    2012年11月1日16:47 | #2

    在页面一开始加载的时候,我从后台获取数据,需要加载到combo,这个有赋值的方法没?

  1. 本文目前尚无任何 trackbacks 和 pingbacks.