`
aokunsang
  • 浏览: 816896 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

easyui tree默认点击第一个节点

 
阅读更多

 

 

 提供一个JqueryUI api网站供学习。地址:http://www.jeasyui.com/

 

1、html中设置<ul id="unitlist" animate="true"></ul>显示tree。

2、在加载js时候先注册tree。

 

$(function(){
	var addr_tree = $("#unitlist").tree({
	    url:'',
	    method:"post",
	    onSelect:function(node){}
	});
})

 3、通过查看jqueryUI api,没有发现一个有效的能使tree选中第一个节点的方法。


 4、然后查看jqueryUI生成的html源文件,发现只要选中一个节点,就会在class中添加tree-node-selected属性。于是通过源文件根据id="unitlist"往下查找第一个节点的div,手动给他添加class="tree-node-selected";


 5、此时,就可以通过getSelected方法获取Node对象,同时就可以获取选中行的相关信息了。但是发现$("#unitlist").tree()是异步执行的,放在声明变量后面不起作用。于是代码改成:

 

$(function(){
	var addr_tree = $("#unitlist").tree({
	    url:'',
	    method:"post",
	    onSelect:function(node){},
	    onLoadSuccess:function(node,data){
		   $("#unitlist li:eq(0)").find("div").addClass("tree-node-selected");   //设置第一个节点高亮
		   var n = $("#unitlist").tree("getSelected");
		   if(n!=null){
		        $("#unitlist").tree("select",n.target);    //相当于默认点击了一下第一个节点,执行onSelect方法
		   }
	    }
	});
})

 PS:服务端需要提供的json数据格式可参考http://www.jeasyui.com/documentation/tree.php。

 

------------------------------------------------------------------------------------------------------------------------------------------------------------

 

再说一下DateBox插件,怎么获取它的值呢?

 

  发现API中没有提供这个方法,试了一下$("#a").datebox("getValue")方法即可得到。

 

  • 大小: 42.3 KB
  • 大小: 182.3 KB
分享到:
评论
2 楼 seeYourEye 2014-11-14  
为什么不 $("#unitlist li:eq(0)").find("div:eq(0)").click();呢
1 楼 158327 2014-07-18  
jquery ui 和jquery easyui 是不同的

相关推荐

    EasyUI 中combotree 默认不能选择父节点的实现方法

    这需要添加如下字段就行,搜了半天,说什么判断是不是子节点什么的,都是胡扯! onlyLeafCheck:true, //病因分类 $('#artReason').combotree({ width:200, method:'GET', //url: '${ctx}/business/dict/json/...

    easyui java系统

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件和易于使用的 API,使得开发者能够快速构建具有专业外观的 Web 应用程序。在Java环境中,EasyUI 被广泛用于后端数据的展示和交互,尤其适用于构建管理系统...

    超级好用的easyui文档20180605

    EasyUI 是一个基于 jQuery 的轻量级前端框架,主要用于构建用户界面。20180605 版本的文档可能包含了 EasyUI 的最新更新和改进,使得开发者能够更高效地利用其功能来设计和开发网页应用。下面将详细阐述 EasyUI 的...

    jQuery EasyUI 1.5API 中文版

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和交互功能。1.5 API 中文版文档是这个框架的一个关键资源,为开发者提供了详尽的指南,帮助他们理解和应用这个强大的工具...

    第36章 Tree(树)组件[2]1

    在EasyUI的Tree组件中,我们可以配置`url`属性来指定一个服务端接口,当用户展开某个节点时,会自动发送请求到这个接口,获取相应的子节点数据。 示例代码中,`#box`是Tree组件的选择器,`url : 'tree.php'`指定了...

    Easyui 之 Treegrid 笔记

    2. 根节点的层级:根节点位于树形结构的第一层,是整个Treegrid的起点。它无需有父节点标识,或者可以明确设置父节点标识为0。 3. 子节点的定义:Treegrid中各级子节点需要有一个专门的属性来标识其父节点,这个...

    easyui用户手册

    ##### 我的第一个窗口 窗口是easyUI中最基础的组件之一,可以用来展示弹窗、对话框等。 ```javascript $('#win').window({ title: 'My First Window', width: 400, height: 300 }); ``` ##### 自定义窗口工具 ...

    jQuery EasyUI 1.4.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    messager:当敲击回车键时将默认触发消息框的第一个按钮; validatebox:新增“editable”、“disabled”、“readonly”、“validateOnCreate”和“validateOnBlur”属性; validatebox:新增“enable”、...

    jQuery EasyUI 官方API文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和易于使用的API。这个官方API文档适用于1.3.5版本,是中文版,适合初学者和有经验的开发者作为日常参考。以下是jQuery ...

    jquery easyui 例子

    jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一系列的UI组件,使得开发者可以快速构建出美观且功能丰富的Web应用。EasyUI 的核心理念是通过简单的HTML标记和JavaScript API,实现复杂的界面效果和...

    jquery+easyui培训文档 (20111111整理完善)

    ### jQuery EasyUI 培训文档 #### 一、简介 ...对于初学者来说,熟悉这些组件的基本使用方法是非常重要的第一步。随着经验的积累,可以进一步探索更多高级特性和自定义选项,从而满足更为复杂的应用需求。

    轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器

    最后,为了初始化应用,我们需要确保树形菜单的第一个叶子节点被选中,并加载相应的RSS Feed。这可以通过在`onLoadSuccess`事件中进行处理: ```javascript onLoadSuccess: function(node, data) { if (data....

    jquery easyui combox一些实用的小方法

    5. **jQuery EasyUI combobox 默认选中第一个** 对于 combobox 组件,如果你想设置默认选中第一个选项,首先获取所有数据,然后使用 `combobox('setValue', id)` 方法: ```javascript var data = $("#cc")....

    JQUERY不错的树状控件

    3. **jQuery EasyUI**:EasyUI是一个基于jQuery的前端框架,包含了一些内置的树形控件,可以快速构建UI界面。 4. **其他插件**:还有一些其他的jQuery树插件,如jQuery Tree Plugin、treeview.js等,它们各有特色,...

    jt04日常笔记

    - **使用方式**:通过`PageHelper.startPage`启动分页,后续的第一条查询语句会被自动处理。 - **注意事项**:避免多次使用`PageHelper`实例导致的线程安全问题。 #### 商品新增与修改 **商品新增**涉及到表单验证...

Global site tag (gtag.js) - Google Analytics