easyui-combox(tagbox) 多选操作 显示为tagbox

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!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>

  

 

posted @   GordonDicaprio  阅读(1269)  评论(1编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决
历史上的今天:
2017-11-01 详解spring 每个jar的作用
点击右上角即可分享
微信分享提示