JQuery EasyUI TreeGrid控件的使用——支持拖拽与禁止拖拽

最新推荐文章于 2024-04-19 15:58:03 发布
最新推荐文章于 2024-04-19 15:58:03 发布
阅读量2k 收藏
点赞数
分类专栏： Html+JS JQuery 文章标签： 前端 javascript easyui json html

 最近在做一些前端的工作，很多用户要求的复杂前端可以使用jq easyui实现，开源且功能强大，相信很多人早就尝到甜头了。

下面进入正题，本篇博文主要介绍treegrid控件。官网DEMO有很多，可以借鉴。想看拖拽相关介绍的直接跳到第三步……

treegrid效果图：



第一步：数据

看到这样的前端控件，我最先关心的是数据是如何存储的。这里以json为例，贴一个来自官网的样例json文件：

[css] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. [{  
  2.     "id":1,  
  3.     "name":"C",  
  4.     "size":"",  
  5.     "date":"02/19/2010",  
  6.     "type":"folder",  
  7.     "children":[{  
  8.         "id":2,  
  9.         "name":"Program Files",  
  10.         "size":"120 MB",  
  11.         "date":"03/20/2010",  
  12.         "type":"folder",  
  13.         "children":[{  
  14.             "id":21,  
  15.             "name":"Java",  
  16.             "size":"",  
  17.             "date":"01/13/2010",  
  18.             "state":"closed",  
  19.             "type":"folder",  
  20.             "children":[{  
  21.                 "id":211,  
  22.                 "name":"java.exe",  
  23.                 "size":"142 KB",  
  24.                 "date":"01/13/2010",  
  25.                 "type":"pack"  
  26.             },{  
  27.                 "id":212,  
  28.                 "name":"jawt.dll",  
  29.                 "size":"5 KB",  
  30.                 "date":"01/13/2010",  
  31.                 "type":"pack"  
  32.             }]  
  33.         },{  
  34.             "id":22,  
  35.             "name":"MySQL",  
  36.             "size":"",  
  37.             "date":"01/13/2010",  
  38.             "state":"closed",  
  39.             "type":"folder",  
  40.             "children":[{  
  41.                 "id":221,  
  42.                 "name":"my.ini",  
  43.                 "size":"10 KB",  
  44.                 "date":"02/26/2009",  
  45.                 "type":"pack"  
  46.             },{  
  47.                 "id":222,  
  48.                 "name":"my-huge.ini",  
  49.                 "size":"5 KB",  
  50.                 "date":"02/26/2009",  
  51.                 "type":"pack"  
  52.             },{  
  53.                 "id":223,  
  54.                 "name":"my-large.ini",  
  55.                 "size":"5 KB",  
  56.                 "date":"02/26/2009",  
  57.                 "type":"pack"  
  58.             }]  
  59.         }]  
  60.     },{  
  61.         "id":3,  
  62.         "name":"eclipse",  
  63.         "size":"",  
  64.         "date":"01/20/2010",  
  65.         "type":"folder",  
  66.         "children":[{  
  67.             "id":31,  
  68.             "name":"eclipse.exe",  
  69.             "size":"56 KB",  
  70.             "date":"05/19/2009",  
  71.             "type":"pack"  
  72.         },{  
  73.             "id":32,  
  74.             "name":"eclipse.ini",  
  75.             "size":"1 KB",  
  76.             "date":"04/20/2010",  
  77.             "type":"pack"  
  78.         },{  
  79.             "id":33,  
  80.             "name":"notice.html",  
  81.             "size":"7 KB",  
  82.             "date":"03/17/2005",  
  83.             "type":"pack"  
  84.         }]  
  85.     }]  
  86. }]  
[{
	"id":1,
	"name":"C",
	"size":"",
	"date":"02/19/2010",
	"type":"folder",
	"children":[{
		"id":2,
		"name":"Program Files",
		"size":"120 MB",
		"date":"03/20/2010",
		"type":"folder",
		"children":[{
			"id":21,
			"name":"Java",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"type":"folder",
			"children":[{
				"id":211,
				"name":"java.exe",
				"size":"142 KB",
				"date":"01/13/2010",
				"type":"pack"
			},{
				"id":212,
				"name":"jawt.dll",
				"size":"5 KB",
				"date":"01/13/2010",
				"type":"pack"
			}]
		},{
			"id":22,
			"name":"MySQL",
			"size":"",
			"date":"01/13/2010",
			"state":"closed",
			"type":"folder",
			"children":[{
				"id":221,
				"name":"my.ini",
				"size":"10 KB",
				"date":"02/26/2009",
				"type":"pack"
			},{
				"id":222,
				"name":"my-huge.ini",
				"size":"5 KB",
				"date":"02/26/2009",
				"type":"pack"
			},{
				"id":223,
				"name":"my-large.ini",
				"size":"5 KB",
				"date":"02/26/2009",
				"type":"pack"
			}]
		}]
	},{
		"id":3,
		"name":"eclipse",
		"size":"",
		"date":"01/20/2010",
		"type":"folder",
		"children":[{
			"id":31,
			"name":"eclipse.exe",
			"size":"56 KB",
			"date":"05/19/2009",
			"type":"pack"
		},{
			"id":32,
			"name":"eclipse.ini",
			"size":"1 KB",
			"date":"04/20/2010",
			"type":"pack"
		},{
			"id":33,
			"name":"notice.html",
			"size":"7 KB",
			"date":"03/17/2005",
			"type":"pack"
		}]
	}]
}]
JSON格式的文件看起来还是很容易看的，子节点就是children。


第二步：使用

调用treegrid有两种方式，第一种直接使用HTML配置，第二种用JS配置。

官网上也有，这里再贴一下，第一种：

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <table id="tt" class="easyui-treegrid" style="width:600px;height:400px"  
  2.         data-options="url:'get_data.php',idField:'id',treeField:'name'">  
  3.     <thead>  
  4.         <tr>  
  5.             <th data-options="field:'name',width:180">Task Name</th>  
  6.             <th data-options="field:'persons',width:60,align:'right'">Persons</th>  
  7.             <th data-options="field:'begin',width:80">Begin Date</th>  
  8.             <th data-options="field:'end',width:80">End Date</th>  
  9.         </tr>  
  10.     </thead>  
  11. </table>  
<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
        data-options="url:'get_data.php',idField:'id',treeField:'name'">
    <thead>
        <tr>
            <th data-options="field:'name',width:180">Task Name</th>
            <th data-options="field:'persons',width:60,align:'right'">Persons</th>
            <th data-options="field:'begin',width:80">Begin Date</th>
            <th data-options="field:'end',width:80">End Date</th>
        </tr>
    </thead>
</table>

第二种：

HTML中：

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <table id="tt" style="width:600px;height:400px"></table>  
<table id="tt" style="width:600px;height:400px"></table>
JS中：

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. $('#tt').treegrid({  
  2.     url:'get_data.php',  
  3.     idField:'id',  
  4.     treeField:'name',  
  5.     columns:[[  
  6.         {title:'Task Name',field:'name',width:180},  
  7.         {field:'persons',title:'Persons',width:60,align:'right'},  
  8.         {field:'begin',title:'Begin Date',width:80},  
  9.         {field:'end',title:'End Date',width:80}  
  10.     ]]  
  11. });  
$('#tt').treegrid({
    url:'get_data.php',
    idField:'id',
    treeField:'name',
    columns:[[
        {title:'Task Name',field:'name',width:180},
        {field:'persons',title:'Persons',width:60,align:'right'},
        {field:'begin',title:'Begin Date',width:80},
        {field:'end',title:'End Date',width:80}
    ]]
});

注意：我在使用的时候发现了一些问题，情况可能比较特殊。最好使用最新的easyui文件，我用旧版本的文件，结果不认table标签中的data-option属性。对于使用第一种配置方法的童鞋，如果没有加载进入数据的话，可尝试手动加载：

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. $.post('treegrid.json',function(data){  
  2.                 $('#test2').treegrid('loadData',data);  
  3.                 },'json');  
$.post('treegrid.json',function(data){
                $('#test2').treegrid('loadData',data);
                },'json');
treegrid.json是你的json数据文件，相对地址。


第三步：扩展

treegrid支持很多功能可以自己定义，使用方法官网上都有（发现我很爱说这句话……）官网DEMO
下边记录一下我在使用拖拽功能时候遇到的问题：

treegrid支持拖拽的官方DEMO

让treegrid支持拖拽还需要treegrid-dnd.js  。这个文件中定义了拖拽相关的接口函数，文件不大，读起来应该问题不大。

1. 禁止drop

在我的需求中，叶子节点是不可以拖到叶子节点上的，demo中，如果把叶子节点放在叶子节点上的话，目标节点就会自动变为被拖动节点的父节点，与我的需求不符合。修改treegrid-dnd.js中的onDrop函数，在onDrop的时候判断是否叶子节点，是的话就返回：

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. var dest = this;  
  2.                         var action, point;  
  3.                         var tr = opts.finder.getTr(target, $(this).attr('node-id'));  
  4.                         var dRow = getRow(this);  
  5.                         var sRow = getRow(source);  
  6.                         //alert("destination:"+dRow.type+",source:"+sRow.type)  
  7.                         if(dRow.type=="pack")  
  8.                         {  
  9.                             tr.removeClass('treegrid-row-append treegrid-row-top treegrid-row-bottom');  
  10.                             return;  
  11.                         }  
var dest = this;
						var action, point;
						var tr = opts.finder.getTr(target, $(this).attr('node-id'));
						var dRow = getRow(this);
						var sRow = getRow(source);
						//alert("destination:"+dRow.type+",source:"+sRow.type)
						if(dRow.type=="pack")
						{
							tr.removeClass('treegrid-row-append treegrid-row-top treegrid-row-bottom');
							return;
						}

上边代码中，dRow.type是自定义的，type是我的json数据中的一个属性，来标识是否是叶子节点。

2. 节点处于编辑状态下禁止拖拽

需求中有要求可以修改节点的名字，编辑列中editor="text"，进入编辑状态后变为textbox，如果想使用鼠标选中内容的话就会触发拖动事件，因此在编辑的时候要禁止拖拽。

但是treegrid-dnd.js 中没有禁止拖拽的接口，只有enableDnd。查了好多没有查到禁止的用法，而且官网上提供的方法也只有enableDnd。那么就参考enableDnd的写法，自已写一个disableDnd好了：

[javascript] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. $.extend($.fn.treegrid.methods, {  
  2.         disableDnd:function(jq,id){  
  3.             return jq.each(function() {  
  4.                 var target = this;  
  5.                 var state = $.data(this, 'treegrid');  
  6.                 state.disabledNodes = [];  
  7.                 var t = $(this);  
  8.                 var opts = state.options;  
  9.                 if (id) {  
  10.                     var nodes = opts.finder.getTr(target, id);  
  11.                     var rows = t.treegrid('getChildren', id);  
  12.                     for (var i = 0; i < rows.length; i++) {  
  13.                         nodes = nodes.add(opts.finder.getTr(target, rows[i][opts.idField]));  
  14.                     }  
  15.                 } else {  
  16.                     var nodes = t.treegrid('getPanel').find('tr[node-id]');  
  17.                 }  
  18.                 nodes.draggable({  
  19.                     disabled: true,  
  20.                     revert: true,  
  21.                     cursor: 'pointer'});  
  22.             });  
  23.         }  
  24.     });  
$.extend($.fn.treegrid.methods, {
		disableDnd:function(jq,id){
			return jq.each(function() {
				var target = this;
				var state = $.data(this, 'treegrid');
				state.disabledNodes = [];
				var t = $(this);
				var opts = state.options;
				if (id) {
					var nodes = opts.finder.getTr(target, id);
					var rows = t.treegrid('getChildren', id);
					for (var i = 0; i < rows.length; i++) {
						nodes = nodes.add(opts.finder.getTr(target, rows[i][opts.idField]));
					}
				} else {
					var nodes = t.treegrid('getPanel').find('tr[node-id]');
				}
				nodes.draggable({
					disabled: true,
					revert: true,
					cursor: 'pointer'});
			});
		}
	});
我在调用拖拽的时候是配置的table的data-option，这里也要修改：

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <table id="dndtree" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"  
  2.             data-options="  
  3.                 url:'treegrid.json',  
  4.                 rownumbers: false,  
  5.                 idField: 'id',  
  6.                 treeField: 'name',  
  7.                 onContextMenu:onContextMenu,  
  8.                 onLoadSuccess: function(row){  
  9.                     $(this).treegrid('enableDnd', row?row.id:null);  
  10.                 },  
  11.                 onBeforeEdit: function(row){  
  12.                     $(this).treegrid('disableDnd');  
  13.                 },  
  14.                 onAfterEdit: function(row){  
  15.                     $(this).treegrid('enableDnd');  
  16.                 },  
  17.                 onCancelEdit: function(row){  
  18.                     $(this).treegrid('enableDnd');  
  19.                 }  
  20.             ">  
  21.         <thead>  
  22.             <tr>  
  23.                 <th data-options="field:'name',formatter:formatName" width="220" editor="text">Name</th>  
  24.                 <th data-options="field:'size'" width="150" align="right">Size</th>  
  25.                 <th data-options="field:'date'" width="200">Modified Date</th>  
  26.             </tr>  
  27.         </thead>  
  28.     </table>  
<table id="dndtree" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"
			data-options="
				url:'treegrid.json',
				rownumbers: false,
				idField: 'id',
				treeField: 'name',
				onContextMenu:onContextMenu,
				onLoadSuccess: function(row){
					$(this).treegrid('enableDnd', row?row.id:null);
				},
                onBeforeEdit: function(row){
                    $(this).treegrid('disableDnd');
                },
                onAfterEdit: function(row){
                    $(this).treegrid('enableDnd');
                },
                onCancelEdit: function(row){
                    $(this).treegrid('enableDnd');
                }
			">
		<thead>
			<tr>
				<th data-options="field:'name',formatter:formatName" width="220" editor="text">Name</th>
				<th data-options="field:'size'" width="150" align="right">Size</th>
				<th data-options="field:'date'" width="200">Modified Date</th>
			</tr>
		</thead>
	</table>
onBeforeEdit时禁止拖拽，结束编辑或者取消编辑的时候再启用拖拽。
yx9o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI实现两个treegrid互相拖放
11-19
本代码在EasyUI官网原treegrid拖放demo的基础上进行详尽的注释，并加以改动，如今可以实现两个treegrid之间互相拖放，本代码分别可以进行“剪切”和“复制”的功能，当前使用的是“剪切”功能，可通过改变treegrid-dnd2.js中的代码转换为“复制”功能。
jQuery Easyui Treegrid实现显示checkbox功能
01-19
下面通过本文给大家介绍下图中的treegrid如何实现？ 要求：动态加载；级联勾选；通关类型判断显示包库/还是镜像（列有所不同，镜像共4列），勾选一个复选框，后面的复选框变为不可勾选状态。 下面是具体代码： 1，初始化treegrid，（其中有几个type列，是由后台人员提供的字段名，虽然我也不想弄一堆type…汗） var root = 20543; //初始化产品树 function InitProductTreeGrid(rootid) { var type = '<%=Controler.ProductType%>'; var ishowPack = tr
easyui treegrid/datagrid 冻结右侧列实现（超简单实现，效果超级好）
Kai辉的专栏
06-19 5855
easyui treegrid 冻结右侧列实现，并且treegrid列表宽度自适应 直入主题： 一、下载已封装好的js和css文件：（放心，代码量超级少，只是为了方便大家拿来即用而已） 1.kvf-treegrid.js 2.kvf-treegrid.css 二、页面引入上面两个资源文件： 注意：kvf-treegrid.css这个文件要在easyui.css文件之后引入，否则无法生效。 例如： ...
JQueryEasyUI学习笔记（十一）datagrid 右键菜单，冻结列
weixin_30432579的博客
04-09 189
欢迎大家转载，转载请注明出处！ 希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！ 今天是datagrid框架的冻结列和右键菜单： 废话就不多说了，直接上代码，上面的注释写的挺多的： 先是冻结列代码： frozenColumns: [[ //冻结列 就是指定显示参照列 使其不会出现滚动条 ...
easyui datagrid 表头拖拽，下方列不随着拖拽移动
雨中深巷的油纸伞
07-18 1309
遇到这个问题后查了不少文章，但大都是添加fit=true，然而并没有什么用，还有说改变width的，或者因为width定义的值是百分比的，但经过验证，这些都不影响； 解决办法1： 引入js文件： <script type="text/javascript" src="datagrid-dnd.js"></script> <table id="dgDeta...
可折叠table框treegrid插件固定左边，右边可滑动
qq_35181466的博客
06-28 510
效果如图所示： 代码如下： <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/e...
jquery easyui treegrid demo 详解
10-03
jquery easyui treegrid demo 详解 增删改查 用IE打开,并选择允许 jquery easyui treegrid demo 详解 增删改查 用IE打开,并选择允许
jQuery EasyUI的TreeGrid查询功能实现方法
10-19
主要介绍了jQuery EasyUI的TreeGrid查询功能实现方法,需要的朋友可以参考下
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
10-22
主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 154
官网代码（在取消选中状态的时候不生效）
SCADA系统通过巨控GRM模块实现OPC协议远程监控PLC
csjukong的博客
04-17 508
SCADA系统和PLC不在同一个地方，需要远程监控和控制PLC，可以通过巨控GRM模块来实现，通过OPC协议转巨控服务器远程读写PLC寄存器，从而完成远程监控PLC
#是啥，v-slot插槽的区别
思索的涟漪，突破自我
04-15 308
来定义具名插槽，以便更清晰地表达代码意图，并且能够充分利用 Vue 3.x 提供的新特性。是 Vue 2.x 中的插槽语法，在 Vue 3.x 中仍然兼容，但已经被废弃。用于具名插槽，它允许您为插槽指定名称，并允许您传递具名插槽的内容。是 Vue 2.6+ 和 Vue 3.x 推荐的新的插槽语法。在 Vue 3.x 中，您还可以使用。在 Vue 3.x 中，可以使用。都是用于定义插槽，但是推荐使用。
用 Java 写一个web教学管理系统
余璜的技术博客
04-15 488
从来没有用 Java 写过 web，给朋友帮忙，现学。记录下过程。
后台管理系统加水印（react）
最新发布
m0_63788547的博客
04-19 170
后台管理系统加水印（react）
【Web】HTML基础
享你所想
04-18 526
HTML超文本标记语言— —HyperTextMarkupLanguage。超文本是什么？链接·标记是什么？标记也叫标签，带尖括号的文本。
easyui treegrid 使用分页
06-03
easyui treegrid 提供了分页功能，可以将大量数据分成多个页面进行加载，从而提高页面响应速度。下面是使用分页的示例代码： 1. 首先，需要在 easyui treegrid 的属性中添加 "pagination" 属性，该属性的值为 true...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值