<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="./common-static/css/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="./common-static/css/themes/icon.css">

</head>

<body>

<input id="tb" type="text" style="width:300px"> 

<script src="./common-static/js/jquery.min.js"></script>

<script src="./common-static/js/jquery.easyui.min.js"></script>

<script src="./common-static/js/easyui-lang-zh_CN.js"></script>

<script>

	$('#tb').combobox({

		valueField: 'id',

		textField: 'text',

		data: [{

				"id":1,

				"text":"text1"

			},{

				"id":2,

				"text":"text2",

				"selected":true

			},{

				"id":3,

				"text":"text3",

				"selected":true

			},{

				"id":4,

				"text":"text4"

			},{

				"id":5,

				"text":"text5"

			}],

            multiple:true,

			hasDownArrow:true,

			editable:false,

			separator:' , ',

		formatter: function (row) {

            var opts = $(this).combobox('options');

            return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]

        },

        onShowPanel: function () {

            var opts = $(this).combobox('options');

            var target = this;

            var values = $(target).combobox('getValues');

            $.map(values, function (value) {

                var el = opts.finder.getEl(target, value);

                el.find('input.combobox-checkbox')._propAttr('checked', true);

            })

        },

        onLoadSuccess: function () {

            var opts = $(this).combobox('options');

            var target = this;

            var values = $(target).combobox('getValues');

            $.map(values, function (value) {

                var el = opts.finder.getEl(target, value);

                el.find('input.combobox-checkbox')._propAttr('checked', true);

            })

        },

        onSelect: function (row) {

            var opts = $(this).combobox('options');

            var el = opts.finder.getEl(this, row[opts.valueField]);

            el.find('input.combobox-checkbox')._propAttr('checked', true);

        },

        onUnselect: function (row) {

            var opts = $(this).combobox('options');

            var el = opts.finder.getEl(this, row[opts.valueField]);

            el.find('input.combobox-checkbox')._propAttr('checked', false);

        }

	})

</script>

</body>

</html>

　　

easyui-combox(tagbox) 多选操作 显示为tagbox的更多相关文章

  1. JS实战 · 复选框全选操作

    思路: 1.获取被选中checkbox,通过checked属性的状态完成: 2.获取被选中的checkbox的value值: 3.求所有value的和sum: 4.定义span区域存储和sum:   ...

  2. Android在listview添加checkbox实现单选多选操作问题（转）

    转自:http://yangshen998.iteye.com/blog/1310183 在Android某些开发需求当中,有时候需要在listveiw中加入checkbox实现单选,多选操作.表面上 ...

  3. AngularJs 简单实现全选，多选操作

    很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作. Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现.) demo 演示地址 ...

  4. ListView多选操作模式详解CHOICE_MODE_MULTIPLE与CHOICE_MODE_MULTIPLE_MODAL

    这篇文章我们将详细的介绍如何实现ListView的多选操作,文中将会纠正在使用ListViewCHOICE_MODE_MULTIPLE或者CHOICE_MODE_MULTIPLE_MODAL时容易犯的 ...

  5. jquery easyUI 日期格式化，DateBox只显示年

    jquery easyUI 日期格式化,DateBox只显示年 >>>>>>>>>>>>>>>>> ...

  6. Android在listview添加checkbox实现单选多选操作问题

    android根据View的不同状态更换不同的背景http://www.eoeandroid.com/thread-198029-1-1.html android 模仿朋友网推出的菜单效果[改进版]h ...

  7. 完美解决Android在listview添加checkbox实现单选多选操作问题

    在Android某些开发需求当中,有时候需要在listveiw中加入checkbox实现单选,多选操作.表面上看上去只是改变checkbox那么简单,然而实际开发中,实现起来并不是那么得心应手.尤其当 ...

  8. js勾选时显示相应内容

    使用环境,一.比如用户勾选时显示一些安全方面提示“你真的要自动登录吗?这将使你下次不需要密码即可进入你的个人中心.”二.显示其他预设选项,以方便用户选择输入,比如密保问题设置,当用户不想使用自定义设置 ...

  9. jquery easyui datebox 时间控件默认显示当前日期的实现方法

    jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以

随机推荐

  1. “==”和equals方法究竟有什么区别？

    ==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...

  2. 在网站中使用Bing Translator插件翻译文章。

    前一阵子给项目增加了翻译的功能,用的是Bing Translator Widget,今天看见有个兄弟写自定义自己的博客,我就尝试着把这个插件加到了自己的博客中.还真的好用.大家先看下效果,觉得好的请继 ...

  3. Python中按值来获取指定的键

    转自: https://blog.csdn.net/Jerry_1126/article/details/87907162 Python字典中的键是唯一的,但不同的键可以对应同样的值,比如说uid,可 ...

  4. BZOJ.4031.[HEOI2015]小Z的房间(Matrix Tree定理 辗转相除)

    题目链接 辗转相除解行列式的具体实现? 行列式的基本性质. //864kb 64ms //裸的Matrix Tree定理.练习一下用辗转相除解行列式.(因为模数不是质数,所以不能直接乘逆元来高斯消元. ...

  5. BZOJ.3884.上帝与集合的正确用法(扩展欧拉定理)

    \(Description\) 给定p, \(Solution\) 欧拉定理:\(若(a,p)=1\),则\(a^b\equiv a^{b\%\varphi(p)}(mod\ p)\). 扩展欧拉定理 ...

  6. [NOIp2012提高组]借教室

    OJ题号:洛谷1083 思路:ZKW线段树 #include<cstdio> #include<cctype> #include<algorithm> inline ...

  7. Centos7安装Redis 3.2.8

    关闭防火墙和SELinx 关闭防火墙 [root@node1 ~]# systemctl stop firewalld 开启防火墙 [root@node1 ~]# systemctl enable f ...

  8. Asp.net 子域共享cookie

    最近项目遇到要共享cookie的问题,本来后台保存session用的是Redis来保存数据的.所以只需要2个站点发的ASP.NET_SessionId是相同的就可以,并且它的Domain 是父级域名. ...

  9. 05-树9 Huffman Codes及基本操作

    哈夫曼树与哈弗曼编码 哈夫曼树 带权路径长度(WPL):设二叉树有n个叶子结点,每个叶子结点带有权值 Wk,从根结点到每个叶子结点的长度为 Lk,则每个叶子结点的带权路径长度之和就是: WPL = 最 ...

  10. MySQL在默认事务下各SQL语句使用的锁分析

    数据库使用锁是为了支持更好的并发,提供数据的完整性和一致性.InnoDB是一个支持行锁的存储引擎,锁的类型有:共享锁(S).排他锁(X).意向共享(IS).意向排他(IX).为了提供更好的并发,Inn ...