树状下拉选择框comboxtree实例

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应用程序中。

官方站点：https://www.sodocs.net/doc/0e14086829.html,/ 中文站点：https://www.sodocs.net/doc/0e14086829.html,/

今天我们所讲的就是jquery-easy-ui，这是一个功能比较丰富的插件，提供了许多通用布局、显示组件。如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效等。此插件的目标就是

Easy to build the ui of your web site by it!

我们通常有一些数据需要用户进行选择，比如部门或类别之类的，一般情况下我们提供了一个select

元素即可。如下:

这样当然可以，但如果这些数据具有层次结构特征，比如类别之间的关系，组织机构之间的关系，我们更希望能在选择时清楚我们选择的数据在层次结构上的信息。这时我们首先肯定是树状组件，但如果能在下拉选择框中嵌入树状组件，用来代替相应的选项，这是一个很好的结果。

Jquery-easy-ui提供了这样的组件，称为comboxtree

效果如下:

ComboTree

Select:

很简单，组件的数据来源于一个depart.json文件，当然也可以来源于服务器，你可以用服务器组件(jsp,servlet之类)的返回一个相关的文件。我们来看一个其结构信息：

[{

"id" : 1,

"text" : "健坤集团",

"children" : [{

"id" : 2,

"text" : "清华IT",

"children" : []

}, {

"id" : 3,

"text" : "北大bird",

"children" : []

}, {

"id" : 4,

"text" : "后勤部",

"children" : []

}, {

"id" : 5,

"text" : "科技公司",

"children" : [{

"id" : 6,

"text" : "软件实训部",

"children" : []

}]

}]

}]

所有，我们只要把数据从数据库或其它数据来源中取出来，递归生成对应格式的文件即可。

以下是简单的示例:

package org.entites;

import java.util.ArrayList;

import java.util.List;

public class NodeBean {

static List list = new ArrayList();

static{

//模拟从数据源中取出记录封装于java对象中

NodeBean node = new NodeBean(1,"健坤集团",0);

NodeBean node2 = new NodeBean(2,"清华IT",1);

NodeBean node3 = new NodeBean(3,"北大bird",1);

NodeBean node4 = new NodeBean(4,"后勤部",1);

NodeBean node5 = new NodeBean(5,"科技公司",1);

NodeBean node6 = new NodeBean(6,"软件实训部",5);

list.add(node);

list.add(node2);

list.add(node3);

list.add(node4);

list.add(node5);

list.add(node6);

}

/**

* [

* {

* text:'健坤',

* children:[

* {....}

* ]

* }

* ]

* @return

*/

static String getJsonData(){

StringBuffer buffer = new StringBuffer();

buffer.append("[");

iterGet(list, 0, buffer);

buffer.append("]");

//将,\n]替换成\n]

String tmp = buffer.toString();

tmp = tmp.replaceAll(",\n]", "\n]");

return tmp;

}

static int count=0;

/**

* 递归生成json格式的数据{id:1,text:'',children:[]}

* @param args

*/

static void iterGet(List list,int pid,StringBuffer buffer){

for(NodeBean node : list){

//查找所有父节点为pid的所有对象，然后拼接为json格式的数据

if(node.getPid()==pid)

count++;

// for(int i=0;i

// buffer.append("\t");

// }

buffer.append("{\"id\":"+node.getId()+",\"text\":\""+node.getText()+"\",\"children\":[");

//递归

iterGet(list, node.getId(), buffer);

buffer.append("]},\n");

count--;

}

}

}

/**

* 测试

* @param args

*/

public static void main(String[] args) {

System.out.println(getJsonData());

}

private int id;//节点编号

private String text;//节点名

private int pid;//父节点编号

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public NodeBean() {

super();

}

public NodeBean(int id, String text, int pid) {

super();

this.id = id;

this.text = text;

this.pid = pid;

}

public String getText() {

return text;

}

public void setText(String text) {

this.text = text;

}

public int getPid() {

return pid;

}

public void setPid(int pid) {

this.pid = pid;

}

}

很简单吧！其中的一些细节，比如节点的图标显示，你可以生成对应字符串根据数据形态去确即可。

感谢开源,谢谢指教，如需进一步交流，请留言!!!

jQuery实现仿百度搜索时的下拉列表

当我们使用百度或是谷歌进行搜索时，只要输入一个字母就可以产生一个下拉列表，并且可以通过键盘上下键来控制列表项的选择。最近在项目中也碰到了类似的情况，在文本框中输入某个字母就可以出现一个下拉列表，展现从数据库里搜索过来的结果。 AD： 先说一下我的实现思路吧，当用户在文本框中输入时，可以利用ajax方式将文本框内内容传给后台的某个页面，在那个页面中经过处理后将产生的结果(这里的结果是一个字符串数组)再获取过来在前台呈现。有了思路后就开始考虑怎么去具体实现吧。首先要使用ajax的话，就想到可以使用jQuery提供的$.post()方法，这个方法可带4个参数，分别是： ·url，请求的页面URL地址; ·data(可选)，作为HTTP消息的实体内容发送给服务器; ·callback(可选)，载入成功后的回调函数，自动将请求结果和状态传递给该方法; ·type(可选)，服务器端返回的数据格式，可以是：xml、html、script、json等。 好，现在对$.post()方法有了一定的了解，现在就可以考虑这个方法该怎么来写了。在我的项目中，请求的URL地址是@Url.Action("GetTags")(由于是https://www.sodocs.net/doc/0e14086829.html, MVC架构，地址是由Routing配置产生的，这个转义到前台就是一个普通的URL地址)，需要传送的是ID为newTag的文本框中的值，所以第二个参数为{pinyins: $("#newTag").val()}，这里的pinyins是由后台定义的。第三个参数callback是处理请求成功后要做的事，暂且命名为pinyinCallback，第四个参数设为'json'，即数据格式为一个JSON对象。这样的话，这个ajax请求可以写为： 1.$.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, piny inCallback, 'json'); 但是如果用户每输入一个字母就立即往服务器传的的话，服务器的承载就会过大，于是考虑可以将每次请求延迟一秒发送，于是发送请求的方法可以这样定义： 1.function pinyinOption() { 2. var t = setTimeout(function () { 3. $.post('@Url.Action("GetTags")', { pinyins: $("#newTag").v al() }, pinyinCallback, 'json'); 4. }, 1000); 5. 6. }

自写select下拉框,样式随意改

用mfc实现组合框控件下拉列表显示

用mfc实现组合框控件下拉列表显示 用mfc实现组合框控件下拉列表显示2012-05-12 13:14:54 分类：C/C++MFC里组合框控件显示下拉列表 现在正在帮一个大四的哥们做毕业设计。需要设计一个MFC 程序。实现的功能是实现和GSM模块的通信。也就是能够通过这个程序来收发短信。这个功能很简单，短信的内容也是实现约定好的ASCII码（因为最终与GSM通信的不是手机，而是MCU控制的GSM模块），没有实现中文短信的功能。 编写的过程就是用VC++（我用的是VC6SP6）编写一个基于对话框的应用程序，在对话框里面添加MSComm控件，实现程序控制电脑串口的功能。程序界面大致如下： 父窗口.png 实际运行的时候发现，这个程序只能运行在固定的串口号上面，如果把模块插在不同的usb口（串口号发生改变），这个程序就运行不正常了。所以我就想在程序里面添加一个选择串口号的功能。

实现的方法如下： 1. 插入—>资源打开插入资源对话框，在里面选择dialog，然后点击新建，就会出现一个dialog资源。 2. 双击这个资源，会出现让你添加一个类，这样添加一个类即可。 3. 修改这个新建资源的界面，如下： 然后再在父窗口里面的OnInitDialog()函数里面添加这样的代码： // TODO: Add extra initialization here CChoseCom dlg; //CchoseCom是你新建资源添加的类的类名，父类是Cdialog dlg.DoModal(); 这样再编译一下（可能需要添加一下头文件，就include一下即可），运行结果会先出现这个串口选择对话框。当然组合框的下拉列表内还没有内容。所以下一步就是要添加内容。 4. 在组合框里面添加选项。首先打开类向导，在里面选择Message Maps选项页。在里面现在CchoseCom类，控件ID是IDC_COMBO1（组合框控件），分别选择消息CBN_DROPDOWN和CBN_SELCHANGE添加消息响应函数。CBN_DROPDOWN是当点击组合框的倒黑色小三角是

下拉列表框(dropdownlist)的几种绑定数据的方法

未绑定状态 绑定方法1 单击“确定”完成列表项的添加 看到default.aspx代码如下： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

  a b c d e

运行看到： 绑定方法2：用Dropdownlist1的items集合的Add方法添加项数据在确定按钮的单击事件中添加如下代码： protected void Button1_Click(object sender, EventArgs e) { this.DropDownList1.Items.Add(new ListItem("11")); this.DropDownList1.Items.Add(new ListItem("22")); this.DropDownList1.Items.Add(new ListItem("33")); this.DropDownList1.Items.Add(new ListItem("44")); this.DropDownList1.Items.Add(new ListItem("55")); } 这样default.aspx.cs中的代码如下： using System; using System.Data; using System.Configuration; using System.Web;

EXCEL二级下拉菜单

excel 二级下拉菜单（转载） 我们在用Excel录入表格数据时，常常会遇到某列数据的值只在几个固定值中选择一个的情况，比如：人的性别列只可能录入男或女，对学历列只可能录入高中、大专、本科、研究生之一等。遇到这类数据，如果我们手工录入，效率既低又容易出错，最好的解决办法是提供一个下拉列表框供我们选择其中的值。下面就通过一个编排教师的课表为例教大家如何实现，该Excel表格能在填表时选择教师姓名，并能在另一列表中选择他所负责的课程名称。 一创建数据源表 在sheet2表中输入教师姓名以及所负责的课程，把教师姓名横放在第2行。选中B2:F2，即教师姓名。然后在名称框为它输入一个名字“name”（图1），输入完成后一定要按回车，转到sheet1工作表。 二数据关联 为了在sheet1表引用name名称，在教师姓名列下拉框选（B3:B9）单元格，点击菜单栏中的“数据→有效性”，在弹出的“数据有效性”对话框中选择“设置”选项卡，在“允许”选择框中选择“序列”，在来源输入框中输入“=name”（图2），点击“确定”后，在下拉列表中就可选择各个教师了。

提示：现在就可体会出名称框的妙用，因为来源的拾取按钮是不能跨表去拾取其他表的数据的。 第二步就是实现能够自动选择教师所负责的课程，由于教师姓名是变动的，要求负责的课程名称也要随之变动。负责课程这一列中的有效性数据来自于教师姓名这一列，怎么解决这个问题？同样，我们可用名称框来解决。 回到sheet2表，用不着给表中的每个教师的课程单独取名，很麻烦也很耽误时间。把整个区域选中（B2:F6），用每一列的第一行数据取名，点击“插入→名称→指定”，在指定名称对话框中只选中“首行”（图3），点击“确定”后就可在sheet1表中使用了。 转到sheet1表，把负责课程列下的区域选中（C3:C9），点击“数据→有效性→序列”。接着就要注意来源输入框中的内容了，因为不能等于单元格，在这里希

sap动态设定下拉列表框

REPORT yth_test2. *功能码返回值 DATA: ok_code TYPE sy-ucomm, save_code TYPE sy-ucomm. *VRM 类型定义接口 TYPE-POOLS vrm. DATA input(20) TYPE c. DATA fld1(20) TYPE c. *内表，记录，字段变量定义 DATA:fname TYPE vrm_id, vva TYPE vrm_values, lvva LIKE LINE OF vva. DATA d_con LIKE ztmmconfig. DATA l_str TYPE STANDARD TABLE OF string WITH HEADER LINE. PARAMETERS kunnr LIKE knvv-kunnr. RANGES l_lotcl FOR ztmm0022-lotcl. CALL SCREEN 100. WRITE 'test'. WRITE fld1. *----------------------------------------------------------------------* * MODULE STATUS_0100 *----------------------------------------------------------------------* * *----------------------------------------------------------------------* MODULE status_0100 OUTPUT. "这里要加上output，不然工具条显示不出来SET PF-STATUS 'TEST'. fname = 'INPUT'. * lvva-key = 1. * lvva-key = 'PS'. * APPEND lvva TO vva. * * lvva-key = 2. * lvva-key = 'NN'.

excel下拉列表框的制作方法

下拉列表框的制作方法——使用控件设置下拉列表框 本页——使用控件设置下拉列表框 下一页——使用数据有效性设置下拉列表框制作下拉表框有两种方法： 一是使用数据有效性设置下拉列表框，其制作方法有两种。 二是使用开发工具中的窗体控件制作下拉列表框，其制作方法也有两种。 为了能使介绍一目了然，这里全部采用图片加文字说明介绍本人常用的四种制作方法。考虑到制作一个页面过长，故分为两个页面。 一、使用开发工具中的窗体控件制作下拉列表框 1、点开发工具/插入/表单控 件/组合框(窗体控件)，鼠标 变为十字形；

2、在工作表上点击会出现一个下 拉箭头，调整大小；或者直接拉出一个组合框。3、鼠标右击组合框，点设置控件格式，出现的对话框中为控制。

7、在A1：A8中输入要选择的内容，如生产、销售、软件、管理等； 8、点击组合框下拉箭头，即可选择A 列中的选项。 二、使用窗体加函数制作下拉列表框

5、选择修改好函数的单元格，拖动填充柄向右拖动将公式复制到右边的三个单元格 6、点击组合框的下拉箭头，测试经修改后的函数的准确性 7、将组合框拖放到设置下拉选框的单元格，调整大小。 8、运用组合框下拉框选择的数据，可增加价格、长度等计算单元格。 这样，一个运用开发工具中的窗体控件和函数的下拉列表框就做成了。按组合框的下拉箭头，即可选择右表作数据库的表中各列数据。右边作数据库用的表格是作后台用的，可以远离前台表格，还可以把单元格链接数隐藏起来。

注意；此类下拉选框制作成功之后，单元格不能随意拖动，拖动后须修改函数中的数据 列表解说制作下拉列表框函数中的三个数据

设置excel单元格下拉菜单的3种方法.

一、直接输入： 1.选择要设置的单元格，譬如A1单元格； 2.选择菜单栏的“数据”→“有效性”→出现“数据有效性”弹出窗口； 3.在“设置”选项中→“有效性条件”→“允许”中选择“序列”→右边的“忽略空值”和“提供下拉菜单”全部打勾→在“来源”下面输入数据，譬如“1,2,3,4,5,6,7,8,9”(不包括双引号，分割符号“,”必须为半角模式→按“确定”就OK了，再次选择该A1单元格，就出现了下拉菜单。 二、引用同一工作表内的数据： 如果同一工作表的某列就是下拉菜单想要的数据，譬如引用工作表Sheet1的B2：B5，B2：B5分别有以下数据：1、2、3、4，操作如下： 1.选择要设置的单元格，譬如A1单元格； 2.选择菜单栏的“数据”→“有效性”→出现“数据有效性”弹出窗口； 3.在“设置”选项中→“有效性条件”→“允许”中选择“序列”→右边的“忽略空值”和“提供下拉菜单”全部打勾→在“来源”下面输入数据“=$B$2:$B$5”，也可以按右边带红色箭头的直接选择B2：B5区域→按“确定”就OK了，再次选择该A1单元格，就出现了下拉菜单。 三、引用不同工作表内的数据（必须用到定义名称）： 如果不同工作表的某列就是下拉菜单想要的数据，譬如工作表Sheet1的A1单元格要引用工作表Sheet2的B2：B5区域，工作表Sheet2的B2：B5分别有以下数据：1、2、3、4，操作如下： 1.定义名称：菜单栏→“插入”→“名称”→“定义”→弹出“定义名称”窗口，在“在当前工作薄中的名称”下面输入“DW”（可以自己随便明明）→“引用位置”下面输入“=Sheet2!$B$2:$B$5”，也可以按右边带红色箭头的直接选择B2：B5区域→按“添加”后再按“确定”完成第一步。 2.选择菜单栏的“数据”→“有效性”→出现“数据有效性”弹出窗口； 3.在“设置”选项中→“有效性条件”→“允许”中选择“序列”→右边的“忽略空值”和“提供下拉菜单”全部打勾→在“来源”下面输入“=DW”，“DW”就是刚刚定义好的名称，按“确定”就OK了，再次选择该A1单元格，就出现了下拉菜单。

下拉列表、列表框标签使用说明

?1、该JAR包中有两个控件标签，两个JS函数标签，每个控件标签都有一个函数标签来支持它的触发事件。它们都被放在searchtag.tld标签库。 2、listTag标签是能实现模糊筛选下拉列表中数据的的下拉列表控件，它所采用的函数标签名叫script。 3、该标签中需要search.jsp页面来支持AJAX，使得请求发出时不需要刷新页面，需要将search.jsp文件放入工作路径之下，如WebRoot下。 如下例子： <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> //该函数实现的是点击页面除下拉列表外的地方，可//以使列表框显示为不可见。 <%@ taglib uri="/WEB-INF/searchtag.tld" prefix="selectcheck" %> //引用script标签，将需要的JS函数包括到JSP页面上来 //该标签是下拉列表控件，属性type是文件的处理类型，默认为// com.chinacreator.search.DefaultSearch，left..表示的是下拉列表的位置 // 注意：该下拉列表的width要大于17个像素才能显示出来 4、该标签的功能：下拉列表内容的显示是根据用户输入而来。比如用户输入“生”，则下拉列表显示的所有内容都会包括“生”字。匹配字在越前面的数据项排列在下拉列表的越前面。 ?实现能模糊筛选列表控件中数据项的弹出窗口。 功能同上3 如下例子： <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>

改变HTML下拉框SELECT选项的多种方法

? ? 当前位置: 主页 > 网页制作 > HTML/Xhtml > 改变HTML下拉框SELECT选项的多种方法 来源：互联网作者：佚名时间：12-30 17:00:57【大中小】点评：提交表单后返回的HTML页面重新渲染，SELECT控件的value和selectedIndex 属性都无法使下拉框保留提交表单前的状态,接下来将和大家分享改变HTML下拉框选项的方法,感兴趣的朋友可以研究下 提交表单后返回的HTML页面重新渲染，SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态。 复制代码 代码如下: 全部 通过 末通过 待处理 一种临时的解决方案是在vm文件末尾加上一段脚本为下拉框赋值： 复制代码 代码如下: 另一种方案是设置默认选中项： 复制代码 代码如下:

全部 通过 末通过 待处理 用VTL的写法就是： 复制代码 代码如下: 全部 通过 末通过 待处理 这里要注意的是：进行==比较时，Velocity是区分类型的，如果用字符串“1”、“2”、“3”比较会始终得到false。 velocity中比较的问题 对于velocity来说，比较尤其是涉及到不等比较（大于或者小于）都是比较难实现的。现在我想把页面上的file size分类显示（Bytes、MB、GB），于是就涉及到比较filesize大小的问题，请问一下目前有没有比较好的办法实现呢？ 比如下面的代码： 复制代码 代码如下: #if ($files ize > 1024 && $filesize < 1048567) #set($ksize = $filesize%1024)