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

最新推荐文章于 2021-02-27 09:08:32 发布

原创

最新推荐文章于 2021-02-27 09:08:32 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #easyui #前端 #treegrid #拖拽

本文介绍了如何使用JQuery EasyUI的TreeGrid控件，包括数据存储、HTML与JS配置方法，以及如何扩展其拖拽功能。重点讨论了如何禁止叶子节点之间的拖放操作和在编辑状态下禁用拖拽。

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

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

treegrid效果图：

第一步：数据

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

[{
	"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",
				"d

最低0.47元/天解锁文章