<!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. serialVersionUID 序列化

    http://www.mkyong.com/java-best-practices/understand-the-serialversionuid/ 简单来说,Java的序列化机制是通过在运行时判断类 ...

  2. RBF（径向基）神经网络

    只要模型是一层一层的,并使用AD/BP算法,就能称作 BP神经网络.RBF 神经网络是其中一个特例.本文主要包括以下内容: 什么是径向基函数 RBF神经网络 RBF神经网络的学习问题 RBF神经网络与 ...

  3. 你还在为无法完美卸载SQL Server 2008 R2而烦恼吗？

    你还在为无法完美卸载SQL Server 2008 R2而烦恼吗? 本文摘抄来自:http://blog.csdn.net/u013058618/article/details/50265961  小 ...

  4. win10 图标异常 ，重命名后，图标不显示，名字错乱。

    win10 图标异常 ,重命名后,图标不显示,名字错乱. 按下快捷键 Win+R,在打开的运行窗口中输入 %localappdata%,回车. 在打开的文件夹中,找到 IconCache.db,将其删 ...

  5. POJ.1769.Minimizing maximizer(线段树 DP)

    题目链接 /* 题意:有m个区间,问最少要多少个区间能覆盖[1,n] 注:区间要按原区间的顺序,不能用排序贪心做 设dp[i]表示最右端端点为i时的最小值 dp[e[i]]=min{dp[s[i]]~ ...

  6. db2执行计划介绍

    在数据库调优过程中,SQL语句往往是导致性能问题的主要原因,而执行计划则是解释SQL语句执行过程的语言,只有充分读懂执行计划才能在数据库性能优化中做到游刃有余. 常见的关系型数据库中,虽然执行计划的表 ...

  7. Qt 4.8.2.+VS2008静态编译

    一.下载Qt 4.8.2-opensource. 二.解压到C:\Qt\4.8.2_static 修改C:\Qt\4.8.2_static\projects.pro文件,删除demos,doc,exa ...

  8. 小度WiFi

    这个东西真不错,详情查看: http://wifi.baidu.com 是在京东上抢购的,但是那次抢购体验做得很次:首先,只能预约一种颜色;其次,第一天抢购了,第2天就不能抢购了;第三,等抢购完了,如 ...

  9. 从YOLOv1到YOLOv3，目标检测的进化之路

    https://blog.csdn.net/guleileo/article/details/80581858 本文来自 CSDN 网站,作者 EasonApp. 作者专栏: http://dwz.c ...

  10. 谷歌、亚马逊相继宣布屏蔽 Flash 广告，又一个时代行将结束？【转载+整理】

    原文地址 其实,如果你看一下乔布斯的传记,早在十几年以前,乔布斯就说过类似的话,他狠透了 Flash~ 据 InfoWorld 报道,谷歌已经正式宣布,在默认情况下,Chrome将不再自动播放Web页 ...