用jquery-easyui中的combotree实现树形结构的选择
用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 == ).ToList(); int i = , j = ;
s.Append("["); foreach (NewsType p_item in p_data)
{
if (j != )
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 != )
{
s.Append(",");
s.Append("\"children\":");
s.Append("[");
for (i = ; i < c_data.Count; i++)
{
if (i != )
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实现树形结构的选择的更多相关文章
- Jquery EasyUI中treegrid
Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲 最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...
- jquery easyUI中combobox的使用总结
jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- 求助关于jquery easyUI中的treegrid组件,请各位帮忙给个思路,谢谢啦
现在项目中用到jquery easyUI中的treegrid组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?
- easyUI中treegrid组件构造树形表格(简单数据类型)+ssm后台
这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查 ...
- Jquery easyui中的有效性检查
使用过程中的一积累,备查. EasyUI 验证框使用方法: //*************************** missingMessage:未填写时显示的信息 validType:验证类型见 ...
- Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件
做个项目使用jquery easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...
- 在jQuery EasyUI中实现对DataGrid进行编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍Eas ...
随机推荐
- Unity3D实现简单的抽奖程序
下面是具体的代码,注意,我这里用到了NGUI这个插件.大概的原理很简单,就用了2张图片Sprite,同时向下移动,当上面一张图片移动到下面一张图片原来的位置时,就把这2张图片向上移到初始的位置.这时, ...
- 问题-WIN7 ..\Bin\InitCC32.exe".进程无法访问(拒绝访问)
问题现象: 问题原因:是InitCC32.exe没有权限. 问题处理:在DELPHI7的安装目录里设置用户权限,加入EVE... 这个用户.
- [Objective-c 基础 - 2.7] 构造方法、重写init方法
A.id 万能指针,可以指向任何对象,实质是NSObject的指针,使用的时候不用加上* B.NSObject中得类方法new 1.完整地创建一个可用对象步骤 (1)分配存储空间 + alloc ...
- emWin -- 模拟器系列1 - 如何建立模拟器开发环境
面对如此强大的emWin,大家是否都有跃跃欲试的冲动呢?但是没有硬件可以调试的童鞋,难道只能望洋兴叹?非也.非也.Segger公司早就考虑到了.Segger推出模拟器的目的不仅仅是为了解决没有硬件的烦 ...
- CocoaPods容易出现的问题;
一.初次安装cocoapods打开项目遇:Pods-resources.sh: Permission denied报错. 此类报错是指编译器在打开Pods-resources.sh文件的时候遭遇权限问 ...
- 实例:ABAP Tree Control 使用与ALV Grid对象关联
Tree Control 是最常用的Windows控件之一,在其他语言中成为"Tree View"等,ABAP的 Tree Contiol 能实现类似的功能. 本文主要介绍一下内容 ...
- Linux下嗅探密码拿下服务器(转自MSX)
目标:www.xxx.com 0x01 主站踩点 下载 (57.45 KB) 前天 14:28 主站dedecms 目前公布的0day没有一个能用的,并且后台不是默认的,google hack无果. ...
- gradle编译出错:Execution failed for task ':app:compileTestDebugJava'.
今天更新了android studio,从0.5.3升级到0.6.1版本号,结果在IDE中编译时没有问题.可是在命令行时编译就会出现下面错误: :app:compileTestDebugJava FA ...
- Tomcat启用HTTPS(生成证书、配置Tomcatserver)
Windows下的配置: 第一步:为server生成证书 使用keytool 为 Tomcat 生成证书.假定目标机器的域名是" localhost ". keystore 文件存 ...
- Linux开发环境搭建与使用——ubuntu更新设置
ubuntu操作系统公布时,为了减小操作系统的体积,只配备了主要的系统软件.应用软件.我们开发中须要用到的大部分软件都须要在使用中从网上自行更新. 假设ubuntu没有网络,能够说寸步难行. 以下教大 ...