需要实现以下需求： 数据分组，要么可以单独选择几个；要么直接选中一组。 查阅相关资料，知道有插件叫tree view，然后在网上找到个bonsai插件，可以达到预期效果。 下面是我使用这个bonsai插件时候的一些经验总结。 使用到工具包有以下三个包： jquery.bonsai.js jquery.qubit.js jquery.bonsai.css 放心以本大师兄的尿性，肯定会提供某度的云盘的，表怕。 链接：http://pan.baidu.com/s/1o7KLVF8 密码：ncrh 然后就是云盘 的概览图：
js代码相关
//初始化bonsai插件 $('#shareSetting').bonsai({ expandAll: false, // 默认是否展开全部 checkboxes: true, // 联动选择效果 depends on jquery.qubit plugin createInputs: 'checkbox' // takes values from data-name and data-value, and data-name is inherited }); //ajax获得 tree view data 数据 var targetTreeView = $("#shareSetting"); $.ajax({ url: SUBSYSTEM_APP_NAME + "streams/getTreeViewData", data: {streamId: streamId}, dataType: "json", success: function (data) { if (data.success) { initTreeViewDom(data.obj, targetTreeView);//根据数据完成tree view dom 的拼接 //刷新bonsai插件(每次重新获得数据之后，再次刷新一下tree view 插件) targetTreeView.bonsai('update'); //全部加载完成，再show dialog dialogModel.modal("show");//显示tree view的载体弹窗，可以无视，此处不是重点逻辑。 } else { GMS.error(data.msg, 3000); } } }); /** * 初始化 tree view dom */ function initTreeViewDom(data, targetTreeView) { targetTreeView.empty(); for (var i = 0; i < data.length; i++) { var temp = data[i]; var liParent = $("<li></li>"); liParent.html(temp.groupType); var streams = temp.groupContent; var ol = $("<ol></ol>"); for (var j = 0; j < streams.length; j++) { var li = $("<li></li>"); li.attr("data-value", streams[j].optionValue); li.html(streams[j].optionText); ol.append(li); } liParent.append(ol); targetTreeView.append(liParent); } } /** * 获得tree view 选中的值 * var target = $('#shareSetting'); */ function getTreeViewCheckedData(target) { var checkedData = []; target.find('ol.bonsai input:checkbox:checked').each(function () { checkedData.push($(this).val()) } ); return checkedData; } jsp页面的dom结构 <div style="margin-left: 10px;"> <ol id="shareSetting" class="js-treeView"> </ol> </div>
引入一个js库文件和css文件以及简单的样式文件内容如下，具体怎么引入，自己看着办。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <link href="<c:url value='/resources/stylesheets/${theme}/jquery/jquery.bonsai.css${appversion }'/>" rel="stylesheet" type="text/css"/> <script src="<c:url value='/resources/javascripts/modules/bonsai/jquery.bonsai.js${appversion }'/>"></script> <script src="<c:url value='/resources/javascripts/modules/bonsai/jquery.qubit.js${appversion }'/>"></script> <%-- 为了复用，单独存放一个文件 --%> <%--记得给此插件的容器添加 js-treeView 类--%> <style> .js-treeView label{ display: inline-block; margin-left: 10px; height: 15px; font-size: 13px; } .js-treeView input{ margin-top: 0; } .js-treeView ol li{ height: 20px; } .js-treeView .thumb{ font-size: 20px; padding-top: 4px; } </style> 所获得的json数据 { "success": true, "msg": "查询成功", "obj": [ { "groupType": "cmshome", "groupContent": [ { "optionValue": "56fa446f14674e537948ebaa", "optionText": "aaaacms" }, { "optionValue": "56fdea09684f8de1f35e47c3", "optionText": "aaaacms2" }, { "optionValue": "56fdeef6684f8de1f35e47c4", "optionText": "aaaasscms" }, { "optionValue": "5703700b743dd41143d1de81", "optionText": "aaacms" }, { "optionValue": "570b5838684f4f4e21bb51e0", "optionText": "adssd" }, { "optionValue": "5809e39be4b0ccb0b9c2e279", "optionText": "adssd_copy" }, { "optionValue": "570b16c6684f4f4e21bb51d5", "optionText": "cmsaa" }, { "optionValue": "570b2fc1684f4f4e21bb51d6", "optionText": "cmsabcde" } ] } ] } 具体的效果图：
