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

最新推荐文章于 2021-08-12 14:11:33 发布

会是什么问题呢

最新推荐文章于 2021-08-12 14:11:33 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/qq_43724942/article/details/84315938

版权

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

摘要由CSDN通过智能技术生成

使用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>