- 浏览: 212186 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
henchong:
如果提示信息全是数字的话,是不会自动换行的,不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻:
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen:
楼主能解释下为啥要用air技术呢,是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren:
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子:
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
其实代码并不是很复杂,只是在原有的树形添加一个TreeEditor就可以了。代码如下
由于我一向热衷于面向对象的编程方式,所以我提供的代码也是面向对象型的编程,如有不明白可以发问。
先贴js文件:上面有代码提示
//节点可以编辑的树
Ext.namespace('demo');
demo = function(){
this.init();//初始化函数
};
Ext.extend(demo,Ext.util.Observable,{
init:function(){
//创建一个简写
var Tree = Ext.tree;
//添加一个树形面板
this.tree = new Tree.TreePanel({
el:'tree-panel',//将树形添加到一个指定的div中
title:'可编辑的树',
autoScroll:true,
enableDD:false,//是否支持拖拽效果
containerScroll: true,//是否支持滚动条
loader:new Ext.tree.TreeLoader({
dataUrl:'tree-edit-test.json'
})
});
this.treeEditer = new Tree.TreeEditor(
this.tree,
{allowBlank: false}
);
//创建一个根节点
this.root = new Tree.AsyncTreeNode({
text: 'root',
draggable:false,
id:'source'
});
//为tree设置根节点
this.tree.setRootNode(this.root);
//渲染树形
this.tree.render();
this.root.expand(true);
/*
为创建的treeEditer添加事件
有两个事件最为常用,一个为beforestartedit另一个为complete
从名字就可以看出,beforestartedit事件是在编辑前的事件,因此可以通过它来判断那些节点可以编辑那些不可以。
complete为编辑之后的事件,在这里面可以添加很多事件,比如添加一个Ext.Ajax向后台传送修改的值等等。
*/
this.treeEditer.on("beforestartedit", function(treeEditer){
var tempNode = treeEditer.editNode;//将要编辑的节点
if(tempNode.isLeaf()){
return true;
}else{
return false;
}
});
this.treeEditer.on("complete", function(treeEditer){
alert(treeEditer.editNode.text);
});
}
});
//实例化主程序类
Ext.BLANK_IMAGE_URL = 'images/public/s.gif"';
Ext.onReady(function(){
var myDemo = new demo(); //实例化
});
html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点可以编辑的树</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="Bookmark" href="favicon.ico" />
<link href="css/default.css" rel="stylesheet" type="text/css">
<!--导入prototype文件 -->
<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
</head>
<body>
<!--loading加载 -->
<div id="loadingTab">
<div class="loading-indicator">
<img src="images/public/loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
<a href="index.html">可编辑的树练习</a> -
<span id="loading-yfo"><a href="http://yfoffice.net.cn" target="_blank">忆凡工作室</a></span><br />
<span id="loading-msg">加载样式表和图片...</span>
</div>
</div>
<br>
<h1>动态-异步tree的综合练习</h1>
<div id="tree-panel" style=" margin:30px; width:300px; height:400px"></div>
<link href="js/ext-2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript">$('loading-msg').innerHTML = '正在加载JSUI组建...';</script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script>
<script type="text/javascript" src="js/tree-edit-test.js"></script>
<script type="text/javascript">
$('loading-msg').innerHTML = '初始化完毕!!';
Ext.get('loadingTab').fadeOut({remove: true});//让加载标签消失
</script>
</body>
</html>
发表评论
-
extjs+air开发
2009-06-24 21:41 2992一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1834该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 752当使用了ExtJs后,脚本documentElement.cl ... -
Ext中的动画处理
2009-02-27 22:13 1153CartoonExt.js //图片宽 var WIDTH=3 ... -
Ext.Ajax
2009-02-27 22:12 1164其实Ext.Ajax的使用并不 ... -
使用百分比设置GridPannel宽度的方法
2009-01-14 15:03 1613使用过Ext的Gird(网格)功 ... -
巧妙运用NumberField
2009-01-14 15:02 4559巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1543tab在ext里很常用,在点开N个tab后,是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3251<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1176ext树形菜单加上右键菜单是不是很酷,ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2553page.html代码如下 <!DOCTYPE HTM ... -
带搜索功能的grid分页实例
2009-01-09 13:43 1548本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例 ... -
带分页的表格
2009-01-09 13:43 1011主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了 ... -
树形下拉框
2009-01-09 13:43 2542<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2853<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 808对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类,构建方便的grid操作
2009-01-09 13:13 1410在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1944<script> Ext.o ... -
可拖拽的tree实际应用
2009-01-09 12:54 1778ext提供的树本身就有拖 ... -
Checkbox与RadioGroup的使用方法
2009-01-09 12:03 7053Ext提供的Checkbox与Radio, ...
相关推荐
将文件直接复制到layui/lay/modules目录下,会覆盖layui原有的tree.js,调用方法与layui树形组件的适应方式一致,新增的方法可在文件中查看
2、然后修改所有与dhtmlXTreeItemObject有关(直接或者间接相关)的方法: _attachChildNode,insertNewItem,insertNewChild,insertNewNext,_recreateBranch,_parseXMLTree 注:_parseXMLTree方法是与loadXML,...
有关更多信息,示例和API文档可直接和 。 随时在提问。 PHP演示现在位于。 许可和贡献 请不要编辑“ dist”子目录中的文件,因为它们是通过grunt生成的。 您将在“ src”子目录中找到源代码! 如果愿意,您可以随时...
Ajax应用程式中经常操作DOM Tree,您可以直接使用DOM Inspector来观察DOM Tree中对应於网页画面的哪个元件,执行Mozilla Firefox官方中文版的「工具/DOM观察器」,可以显示DOM Inspector视窗,在网址列输入网址,并...
它以某种方式受到启发,它支持诸如装饰器和服务之类的特殊节点项。 这使树更小,更易读。为什么之所以创建owl-bt,是因为我们需要为游戏创建行为树编辑器,我们将重点关注实时npc行为。 我们已经尝试了一些现有的...
3、支持对某个结点内容进行实时编辑(结点内容所在SPAN直接变为INPUT文本框,用户修改完后回车可以完成实时修改,并通过触发事件并不返回FALSE的方式使之生效) 4、可以让结点显示单选框、复选框,并都可触发相应...
Forge是一个基于配置驱动的Tree Walker的通用低代码框架。 对于想要从应用程序内部构建和运行自己的低代码工作流引擎的开发人员来说,Forge是一个不错的库。 与其他低码解决方案的相似之处: 遍历由应用程序提供...
-增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...
最近因为业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑,很多功能antd只写...下面直接上一下代码及代码效果,这是一个三级的树形表格,且其中包含二级标题。 最终效果 colu
- Remembers the state of the tree between pages(在不同页面之间可记住当前状态) - Possible to have as many trees as you like on a page(可以得到你想要数量的树型) - All major browsers suported(支持...
:evergreen_tree:Redwood Redwood是一个高度可配置的分布式实时数据库,用于管理许多对等节点之间共享的状态树。 想象一下Redux存储之类的东西,但分布在应用程序的所有用户中,:evergreen_tree:Redwood Redwood是一...
jqgrid通用编辑规则 使用 editoptions ,主要用于定义勾选或者未勾选时的值,例如editoptions: { value:"Yes:No" } <input type="checkbox" value="Yes" offval="No".../> 当value为yes,checkbox被勾选,...
Redwood是一个高度可配置的分布式实时数据库,用于管理许多对等节点之间共享的状态树。 想象一下像Redux存储之类的东西,但是分布在应用程序的所有用户中,它提供了脱机编辑功能,并且可以抵抗不良的连接。 Redwood...
做项目的时候要使用到一个自定义的树形控件来构建表格树,在github上搜了一下没有搜索到合适的(好看的)可以直接用的,查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式,于是基于它封装了...
[修复]修改可编辑grid中DateEditor编辑错误的问题 下拉框 [需求]支持动态改变值 [需求]增加打开下拉框前事件,利用这个参数可以用来调用其他函数,比如打开一个新窗口来选择值 表单 [需求]spinner支持最大最小值 ...
让我直接修改树节点的名称吧! 3.9. 我拖,我拖,我拖拖拖。 3.9.1. 树形节点的拖拽有三种形式 3.9.2. 用事件控制拖拽 3.9.2.1. 叶子不能append 3.9.2.2. 把节点扔到哪里啦 3.9.2.3. 裟椤双树,常与无常 3.10. 树形...
这个想法比基于svg的同行更简单,直接。不幸的是,很久没有看到jOrgChart的更新了。 另一方面,我要添加一些有趣的想法,因此我选择创建一个新的仓库。 从3.0版开始,我们使用嵌套ul来构建树状图表,而不是嵌套表。...
-优化Tree节点的NodeId自动生成,减少ViewState占用。 +2009-08-09 v2.0 beta5 +ExtAspNet和Asp.net的提交按钮兼容问题(feedback:千帆)。 -在2009-03-03 v1.3.0曾经提到这个兼容问题,并有这样的规则,如果...
这个想法比基于svg的同行更简单直接。不幸的是,很久以来没有看到jOrgChart的更新。 另一方面,我要添加一些有趣的想法,因此我选择创建一个新的仓库。产品特点同时支持本地数据和远程数据(JSON)。 根据CSS3过渡...
10.11 树形节点视图——Ext.tree.TreeNodeUI 10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout...