菜单管理功能实现-treegrid行编辑以及拖拽效果

最新推荐文章于 2021-03-10 17:06:22 发布

会是什么问题呢

最新推荐文章于 2021-03-10 17:06:22 发布

阅读量331

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43724942/article/details/84315938

本文介绍了如何使用EasyUI的TreeGrid实现菜单管理功能，包括行编辑和拖拽效果。通过示例代码展示了节点的新增、删除、修改，以及解决拖拽操作与编辑器冲突的方法。同时分享了一个人工智能教程链接，帮助初学者入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用easyui的treegrid实现行编辑和拖拽效果。

下面是demo界面。可以拖拽菜单（放在tr上，则拖拽到目标的子目录，放在边框上则是拖拽到同级目录）

具体实现代码：

menuList.jsp

<html><head> <title>菜单列表</title> <base href="http://localhost:8080/mysys/"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><script src="easyui/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript" src="js/js.js"></script><link rel="stylesheet" type="text/css" href="css/icon.css"> <script type="text/javascript" src="ms/menuList.js?d=4"></script> <style type="text/css"> .fitem{  margin: 5px; } .fitem label{  display:inline-block;  width: 70px;   text-align: right;  } .panel.datagrid{  margin: 0 auto; }/*  修改表格表头里面字体大小  */ .datagrid-header .datagrid-cell span{  font-size: 18px; }/*  修改表格里面字体大小 */ .datagrid-cell{  font-size: 16px; }/*  修改表格行高 */ .datagrid-row {        height: 40px;    }    td[field="enable"] td{      text-align: center;    } </style> <style type="text/css">/*   treegrid拖动效果 */  .row-top td{   border-top:1px solid red;   background:#fff;  }  .row-bottom td{   border-bottom:1px solid red;   background:#fff;  }  .row-append td{   border:0;   background:#FBEC88;  } </style></head><body> <!--  数据网格 --> <table id="tg" title="菜单列表"   style="width:100%;height:auto;margin:0 auto;"> </table></body></html>

menuList.js

$(function() { query();})function query() {
   
   // $('#tg').treegrid("options") $('#tg').treegrid({     url:'menu/list',     idField:'id',     treeField:'name',     rownumbers:true,//第一列显示序号     fitColumns:true,//列宽按比例扩展到最大     onDblClickRow:function(row){edit()},

最低0.47元/天解锁文章

200万优质内容无限畅学