bootstrap treeview 下拉树 (二) checkBox多选
来源:互联网 发布:mac系统安装软件 编辑:程序博客网 时间:2024/05/17 22:46
继上一篇文章,下拉树中往往要求可以多选,返回input中的字符串,以“,”分割,选择完毕以后点击确定隐藏Tree,废话不多刷,上干货:
界面效果:
JS部分:
<script type="text/javascript"> $(function () { getTree('1'); }) function buildTree(parentNode, datas) { for (var key in datas) { var data = datas[key]; if (data.parentid == parentNode.id) { var node = {text: data.knowledgeText, id: data.id, nodes: [], selectable: true}; parentNode.nodes.push(node); buildTree(node, datas); } } if (parentNode.nodes.length == 0) { delete parentNode.nodes; } } function getTree(strid) { var params = {}; params.id = 'a696ee80-5b26-4a99-b013-ba22bec4d3bb'; $.ajax({ url: "/knowledge/getTree", // 请求的URL dataType: 'json', type: "get", data: params, success: function (data) { var tree = {text: '复读语文', id: 'a696ee80-5b26-4a99-b013-ba22bec4d3bb', nodes: []}; buildTree(tree, data.data); $('#knowledgeTree').treeview({ color: "#428bca", data: [tree], showCheckbox: true, multiSelect: true, onNodeChecked: function (event, data) { console.log('dddd', data); var str = $("#knowledgeText").val(); console.log('1', data.knowledgeText); if (str.length > 0) { $("#knowledgeText").val(str + data.text + ','); } else { $("#knowledgeText").val(data.text + ','); } console.log('2', str); }, onNodeUnchecked: function (event, data) { var str = $("#knowledgeText").val(); $("#knowledgeText").val(str.replace(data.text + ",", ""));// console.log('content', str.substring(0, str.indexOf(data.text))); console.log('content', str.replace(data.text + ",", "")); } }); } }); } function hideDIV() {// $("#knowledgeText").val(mdata.text); $("#hideDiv").hide(); }HTML:
<body><input type="text" id="knowledgeText" name="knowledgeText" class="form-control" value="" onclick="$('#hideDiv').show()" placeholder="分类名称"/><div id="hideDiv" style="display: none;"> <div id="knowledgeTree"></div> <button class="btn btn-danger" type="button" onclick="hideDIV()"> <span class="glyphicon glyphicon-eye-open"></span> 确定 </button></div></body>
阅读全文
1 0
- bootstrap treeview 下拉树 (二) checkBox多选
- bootstrap treeview 下拉树
- 树控件--bootstrap treeview
- bootstrap-treeview
- bootstrap-treeview
- bootstrap-treeview
- bootstrap-treeview
- bootstrap checkbox
- bootstrap-treeview 树列表 总结整理
- 基于bootstrap的jQuery bootstrap-treeview 多级列表树插件
- bootstrap input 下拉树 下拉菜单 下拉列表
- bootstrap下拉
- 让TreeView带上CheckBox
- TreeView&CheckBox(ASP.NET)
- Add CheckBox to TreeView
- TreeView with CheckBox
- 带Checkbox的TreeView
- 带Checkbox的TreeView
- 在Action中以Struts2的方式输出JSON数据
- Mybatis中模糊查询时相关的参数传递及xml配置
- 最近出现Matlab2010b点击matlab.exe运行时,不断提示Activate MathWorks Software,无法正常使用
- 从0开始学习SpringCould(8)--SpringBoot 分环境读取配置文件
- dubbo服务启动注册报 java.net.UnknownHostException 未知的名称或服务解决办法
- bootstrap treeview 下拉树 (二) checkBox多选
- Android Studio3.0.0之前首次安装通用配置
- Ubuntu下Lenovo笔记本无法使用无线网卡上网的问题
- 自定义Tabbar
- 浅谈 IIC I2C 总线协议
- hdu 4135 Co-prime(容互原理 DFS+位运算求解)
- 梯度下降算法中的Adagrad和Adadelta
- DeepNet深度学习框架的使用
- 数据结构_序列_字符串