<!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. Quartz配置

    1. Quartz主要配置 属性名称 是否必选 类型 默认值 说明 org.quartz.scheduler.instanceName 否 String QuartzScheduler Schedul ...

  2. gbdt xgboost 贼难理解！

    https://www.zybuluo.com/yxd/note/611571 https://zhuanlan.zhihu.com/p/29765582 gbdt 在看统计学习方法的时候 理解很吃力 ...

  3. BZOJ.3262.陌上花开([模板]CDQ分治 三维偏序)

    题目链接 BZOJ3262 洛谷P3810 /* 5904kb 872ms 对于相邻x,y,z相同的元素要进行去重,并记录次数算入贡献(它们之间产生的答案是一样的,但不去重会..) */ #inclu ...

  4. 关于Random.Range 范围界定

    1. 当Range的参数是float时 Random.Range 范围 static function Range (min : float, max : float) : float :返回一个随机 ...

  5. 数据结构笔记1_求第k个最大者

    参考的文章有: http://www.cnblogs.com/CCBB/archive/2009/06/01/1493971.html http://www.cnblogs.com/zhangchao ...

  6. composer命令中 --prefer-dist 和 --prefer-source 的区别

    --prefer-dist 会从github上下载.zip压缩包,并缓存到本地.下次再安装就会从本地加载,大大加速安装速度.但她没有保留.git文件夹,没有版本信息.适合基于这个包进行开发. --pr ...

  7. Delphi 开发ActiveX控件(非ActiveForm)

    Delphi 开发ActiveX控件(非ActiveForm) Q:为什么不采用ActiveForm工程?通过它可以快速开发带窗体控件,创建过程也非常简单(都不用考虑安全接口问题),很省事! A:如果 ...

  8. Knockout.Js官网学习（Mapping高级用法一）

    前言 有时候,在使用ko.mapping.fromJS的时候,可能有必要去使用mapping的高级用法来定义mapping的详细过程,以后定义了,以后再调用的时候就不必再定义了.这里有一些情形,你可能 ...

  9. Geek地生活，文艺地思考

    本文纯属整理自己零碎杂乱的思绪,和题目无关.           不知觉间,大学已经两年过去了,忙忙碌碌了两年,大一那年參加了学生会编 辑部和艺术团舞蹈队,课余时间的生活总是被舞蹈队排练.參演和编辑部 ...

  10. linux C++ 获取服务器外网IP地址(使用系统调用system)

    废话不多说,直接贴代码: #include<string.h> #include<stdlib.h> #include<stdio.h> #include<s ...