用jquery-easyui中的combotree实现树形结构的选择-创新互联
用jquery-easyui中的combotree实现树形结构的选择
网站题目:用jquery-easyui中的combotree实现树形结构的选择-创新互联
转载注明:http://azwzsj.com/article/cdpggs.html
需求:实现一个树形节点的选择,要求默认父节点都折叠,父节点前的checkbox不显示,子节点显示checkbox,且父节点不可选择。
成都创新互联公司是专业的什邡网站建设公司,什邡接单;提供成都网站制作、网站设计、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行什邡网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!1.前台先引入相应的js
2.前台html只需要用到一个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 data = NewsTypeManager.GetAllNewsList();
List 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 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,在不改变源代码的情况下,想了这个笨办法来修改样式达到实现需求的目的。
网站题目:用jquery-easyui中的combotree实现树形结构的选择-创新互联
转载注明:http://azwzsj.com/article/cdpggs.html