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> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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的作用