jQuery EasyUI,ComboTree(树型下拉框)组件

学习要点:

  1.加载方式

  2.属性列表

  3.方法列表

本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个组件依赖于Combo(下拉框) 和 Tree(树)组件。

一.加载方式

class 加载方式

<select id="cc" class="easyui-combotree" style="width:200px;" data-options="url:'tree.json',required:true"></select>

JS 加载方式

combotree()将一个input元素执行树型下拉框

<input type="text" id="box">
$(function () {
$('#box').combotree({
url: 'tree.json', //加载远程数据
required: true, //不能为空
});
});

二.属性列表

属性列表,下拉框属性扩展自 combo(自定义下拉框)和 tree(树形控件),

editable   boolean 定义用户是否可以直接输入文本到字段中。默认为 false。

$(function () {
$('#box').combotree({
url: 'tree.json', //加载远程数据
required: true, //不能为空
editable : true, //可以输入内容
});
});

PS:该控件的事件完全继承自 combo(自定义下拉框)和 tree(树形控件)。

三.方法列表

树形下拉框方法扩展自 combo(自定义下拉框)。

options   none 返回属性对象。

$(function () {
$('#box').combotree({
url: 'tree.json', //加载远程数据
required: true, //不能为空
editable : true, //可以输入内容
});
alert($('#box').combotree('options')); //返回属性对象
});

tree   none 返回树形对象。

$(function () {
$('#box').combotree({
url: 'tree.json', //加载远程数据
required: true, //不能为空
editable : true, //可以输入内容
}); $('#ann').click(function () {
adc();
});
function adc() {
var t = $('#box').combotree('tree'); //返回树形对象
alert(t.tree('getSelected')); //当用户选择一个节点时,返回当前节点对象
}
});

loadData   data 读取本地树形数据。

$(function () {
$('#box').combotree({
// url: 'tree.json', //加载远程数据
required: true, //不能为空
editable : true, //可以输入内容
});
$('#box').combotree('loadData',[ //读取本地树形数据
{
text:'加载本地数据'
}
]); // $('#ann').click(function () {
// adc();
// });
// function adc() {
//
// }
});

reload   url 再次请求远程树数据。通过'url'参数重写原始 URL 值。

$(function () {
$('#box').combotree({
url: 'tree.json', //加载远程数据
required: true, //不能为空
editable : true, //可以输入内容
});
$('#box').combotree('reload','tree.json'); // url 再次请求远程树数据。通过'url'参数重写原始 URL 值。 // $('#ann').click(function () {
// adc();
// });
// function adc() {
//
// }
});

clear   none 清空控件的值。

$(function () {
$('#box').combotree({
url: 'tree.json', //加载远程数据
required: true, //不能为空
editable : true, //可以输入内容
}); $('#ann').click(function () {
adc();
});
function adc() {
$('#box').combotree('clear'); //清空控件的值
}
});

setValues   values 设置组件值数组。

$(function () {
$('#box').combotree({
url: 'tree.json', //加载远程数据
required: true, //不能为空
editable : true, //可以输入内容
});
$('#box').combotree('setValues',[1,2]); //设置组件值数组 // $('#ann').click(function () {
// adc();
// });
// function adc() {
// $('#box').combotree('clear'); //清空控件的值
// }
});

setValue   value 设置组件值。

$(function () {
$('#box').combotree({
url: 'tree.json', //加载远程数据
required: true, //不能为空
editable : true, //可以输入内容
});
$('#box').combotree('setValue','设置值'); //设置组件值 // $('#ann').click(function () {
// adc();
// });
// function adc() {
// $('#box').combotree('clear'); //清空控件的值
// }
});

第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件的更多相关文章

  1. ComboTree( 树型下拉框) 组件

    本节课重点了解EasyUI中Tree(树)组件的使用方法, 这个组件依赖于Combo(下拉框)和 Tree(树)组件.一. 加载方式//class 加载方式<select id="cc ...

  2. 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  3. 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  4. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  5. 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  6. 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  7. 第三百二十七节,web爬虫讲解2—urllib库爬虫—基础使用—超时设置—自动模拟http请求

    第三百二十七节,web爬虫讲解2—urllib库爬虫 利用python系统自带的urllib库写简单爬虫 urlopen()获取一个URL的html源码read()读出html源码内容decode(& ...

  8. 雷林鹏分享:jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  9. 第二百三十七节,Bootstrap图标菜单按钮组件

    Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...

随机推荐

  1. Win7如何关闭操作中心的图标

    运行gpedit.msc,打开组策略编辑器   双击"删除操作中心图标",将其启用即可(重启可见)  

  2. 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序

    1.前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间.连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保 ...

  3. 学习EF之CodeFirst一

    最近将花点时间学习EF相关知识,通过文章来进行一个完整的学习,Code First是由先有代码后生成数据库:将通过一实例来进行学习:我们简单分为三层,其中DataLibrary为EF上下文处理层,Mo ...

  4. js 获取请求网络协议、IP、端口号、项目名称

      js 获取请求网络协议.IP.端口号.项目名称 CreationTime--2018年6月19日15点54分 Author:Marydon /** * 获取url请求前缀 * @return ht ...

  5. 织梦dedecms dede plus文件作用介绍及安全设置

    一.安装设置 1.默认的后台模块中心有很多模块. 这里除了"友情链接"模块其他都可以删掉.在后台可以先卸载再删除. 2.如果是一开始就不想要的话,安装版plus目录下进行如下操作. ...

  6. Java包装类的常量池

     Integer a=Integer.valueOf(100); Integer b=Integer.valueOf(100); System.out.println(a==b); Double d1 ...

  7. java 重载和多态的区别

    虚拟函数表是在编译期就建立了,各个虚拟函数这时被组织成了一个虚拟函数的入口地址的数组.而对象的隐藏成员--虚拟函数表指针是在运行期--也就是构造函数被调用时进行初始化的,这是实现多态的关键. http ...

  8. Entity Framework Code First使用者的福音 --- EF Power Tool使用记之一(转载)

    好像蛮长时间没有新文章带给大家了.前几天出差再加上忙着公司里的活儿,几乎都没时间上博客园了.今天正好有些时间,为大家简单介绍EF产品组新发布的一个牛逼的小工具——EF Power Tool(翻译的话, ...

  9. MySQL监控脚本

    zabbix监控mysql时自定key用到的脚本 #!/usr/bin/env python #-*- coding: UTF-8 -*- from __future__ import print_f ...

  10. twemproxy源码分析1——入口函数及启动过程

    最近工作中需要写一个一致性哈希的代理,在网上找到了twemproxy,结合网上资料先学习一下源码. 一.Twemproxy简介 Twemproxy是memcache与redis的代理,由twitter ...