用jquery-easyui中的combotree实现树形结构的选择
需求：实现一个树形节点的选择，要求默认父节点都折叠，父节点前的checkbox不显示，子节点显示checkbox，且父节点不可选择。
1.前台先引入相应的js
<link href="../css/themes/icon.css" rel="stylesheet" /> <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <link href="../css/themes/default/easyui.css" rel="stylesheet" /> <script src="../js/jquery.easyui.min.js" type="text/javascript"></script>
2.前台html只需要用到一个select控件
<select id="txtNewsTypes" multiple="true" style="width: 200px; height: 20px;"></select>
3.完成该需求的主要的js代码如下：
var newsTypeJson = <%=GetNewsType()%>; $("#txtNewsTypes").combotree({ data:newsTypeJson, cascadeCheck: $(this).is(‘:checked‘), setValue:1, onCheck:function(node){ // 返回树对象 //var tree = $(this).tree; // 选中的节点是否为叶子节点,如果不是叶子节点,清除选中$("#txtNewsTypes").combotree(‘clear‘); //var isLeaf = tree(‘isLeaf‘, node.target);
//修改jquery-easyui产生的html样式的父节点的样式，移除tree-checkbox tree-checkbox0样式即可 var $titles=$(this).find("span.tree-hit"); $titles.each(function(index,value){ $(this).siblings().eq(1).removeClass("tree-checkbox tree-checkbox0"); }) }, onLoadSuccess:function(node,data){ //折叠节点 $("#txtNewsTypes").combotree("tree").tree("collapseAll"); } });
4.后台生成json数据的方法代码如下：
public string GetNewsType() { StringBuilder s = new StringBuilder(); List<NewsType> data = NewsTypeManager.GetAllNewsList(); List<NewsType> p_data = data.Where(d => d.FTypeId == 0).ToList(); int i = 0, j = 0; s.Append("["); foreach (NewsType p_item in p_data) { if (j != 0) s.Append(","); j++; s.Append("{"); s.Append("\"id\":\"" + p_item.TypeId + "\","); //设置父节点默认不展开 //s.Append("\"state\":\"closed\","); s.Append("\"text\":\"" + p_item.TypeName + "\""); List<NewsType> c_data = data.Where(d => d.FTypeId == p_item.TypeId).ToList(); if (c_data != null && c_data.Count != 0) { s.Append(","); s.Append("\"children\":"); s.Append("["); for (i = 0; i < c_data.Count; i++) { if (i != 0) s.Append(","); s.Append("{"); s.Append("\"id\":\"" + c_data[i].TypeId + "\","); s.Append("\"text\":\"" + c_data[i].TypeName + "\""); s.Append("}"); } s.Append("]"); } s.Append("}"); } s.Append("]"); return s.ToString(); }
5.至此，该功能完成了，由于jquery-easyui没有提供方法来只隐藏父节点的checkbox，在不改变源代码的情况下，想了这个笨办法来修改样式达到实现需求的目的。