EasyUI实现下拉框多选功能
时间:2019-04-08
本文章向大家介绍EasyUI实现下拉框多选功能,主要包括EasyUI实现下拉框多选功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下
效果图:
这个没什么说的,直接引入css和js文件和图片,调用js即可。下面是源码:
<html> <head> <meta charset="utf-8" /> <title>利用EasyUI实现多选下拉框</title> <link rel="stylesheet" type="text/css" href="css/easyui.css" rel="external nofollow" /> <style type="text/css"> ul{ width: 200px !important; } li{ width: 50px !important; float: left !important; } </style> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { $('#ddlLine').combotree({ valueField: "id", //Value字段 textField: "text", //Text字段 multiple: true, data: [{ "id": 1, "text": "All", "children": [{ "id": 13, "text": "C1" }, { "id": 14, "text": "C2" }, { "id": 15, "text": "C3"}]}], // url: "tree_data2.json", //数据源 onCheck: function (node, checked) { //让全选不显示 $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", "")); }, onClick: function (node, checked) { //让全选不显示 $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", "")); } }); }) </script> </head> <body> 多选:<select id="ddlLine" class="easyui-combotree" style="width: 205px; height: 24px;"> </select> </body> </html>
下载地址:EasyUI实现下拉框多选
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 146. LRU缓存机制 Krains 2020-08-05 12:50:28 链表
- 337. 打家劫舍 III Krains 2020-08-05 10:18:45 动态规划
- 58道Vue常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度
- 记一次Linux计划任务cron无结果的排查过程
- 一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景用例
- 5 个 JS 数组技巧可提高你的开发技能
- 一个有意思的方案:不借助后台和 JS ,只用 CSS 让一个列表编号倒序,你会怎么做?
- 关于MySQL LOAD DATA特性的利用与思考
- NHibernate 缓存
- 渗透测试 | 突破前端JS加密限制
- 使用 Task 简化异步编程
- Task 编程中的异常处理
- AngularJS 中的 factory、 service 和 provider
- 设计模式之适配器模式
- 设计模式之组合模式