第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件

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');        //清空控件的值// }
});

转载于:https://www.cnblogs.com/adc8868/p/6752275.html

第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件相关推荐

easyui combotree（树形下拉框）使用收获总结
easyui combotree使用收获总结 easyui官网有简单的实例,但是项目中需要加载全国的区域,一次性加载容易造成页面加载过慢和卡死,所以需要动态加载最后效果 textarea 显示效果 ...
【EasyUI篇】Combo自定义下拉框组件
微信公众号:程序yuan 关注可了解更多的教程.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 20.Combo自定义下拉框组件这组件不可以通过class方式进行定义 JSP ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...
html下拉框只选择年份和月份,原生jQuery实现只显示年份下拉框
本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下代码: Document 1949 var date = new Date(); var y = date.g ...
html只选择年份,原生jQuery实现只显示年份下拉框
本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下代码: Document 1949 var date = new Date(); var y = date.g ...
jquery模拟可输入的下拉框
//页面html <div id="select" class="select" ><ul><c:forEach items=&q ...
jquery可以勾选的下拉框_jquery.chosen下拉框多选插件使用详解_蓝戒的博客
Chosen 是一个支持jquery的selec t下拉框美化插件,它能让丑陋的.很长的selec t选择框变的更好看.更方便.不仅如此,它更扩展了selec t, 增加了自动筛选的功能.它可对列表 ...
jquery中如何获取select 下拉框默认选中的值？
通过id获取下拉框默认选中的值 <select class="form-control" id="numbers"><option value ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件

第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件相关推荐

最新文章

热门文章