FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 1904|回复: 0

FineUI Tree 插件

[复制链接]
发表于 2020-1-17 14:40:09 | 显示全部楼层 |阅读模式
本帖最后由 棕榈 于 2020-1-17 14:40 编辑

FineUI Tree 插件







这是对之前发布Tree插件的一次重构,同时修复了一些错误,如父节点可以拖动到子节点,虽然FineUI给阻止了,但 afterDrop 被执行了。这次增加了编辑功能,文本框的大小会根据内容的变化而改变,回车键确认编辑,ESC键取消编辑,节点的文本为空时或在 afterEdit 返回不允许编辑时会弹出错误提示。


具体使用细节,可以参考示例代码


代码:


  1. @page
  2. @model FineUICore.EmptyProject.RazorPages.Pages.HelloModel
  3. @{
  4.     ViewBag.Title = "Hello";
  5.     var F = @Html.F();
  6. }

  7. @section body {

  8.     <f:Tree ID="Tree1" IsFluid="true" CssClass="blockpanel" ShowHeader="true" Title="树控件(内联)" EnableCollapse="false" SelectedNodeID="zhumadian">
  9.         <Nodes>
  10.             <f:TreeNode Text="中国" Expanded="true" NodeID="china">
  11.                 <f:TreeNode Text="河南省" Expanded="true" NodeID="henan">
  12.                     <f:TreeNode Text="驻马店市" NodeID="zhumadian">
  13.                         <f:TreeNode Text="遂平县" Leaf="false" NodeID="suiping">
  14.                             <f:TreeNode Text="槐树乡" Leaf="false" NodeID="huaishu">
  15.                                 <f:TreeNode Text="陈庄村" NodeID="chenzhuang">
  16.                                 </f:TreeNode>
  17.                             </f:TreeNode>
  18.                         </f:TreeNode>
  19.                     </f:TreeNode>
  20.                     <f:TreeNode Text="漯河市" NodeID="luohe" />
  21.                 </f:TreeNode>
  22.                 <f:TreeNode Text="安徽省" Expanded="true" NodeID="anhui">
  23.                     <f:TreeNode Text="合肥市" Expanded="true" NodeID="hefei">
  24.                         <f:TreeNode Text="金色池塘小区" NodeID="golden">
  25.                         </f:TreeNode>
  26.                         <f:TreeNode Text="中国科学技术大学" NodeID="ustc">
  27.                         </f:TreeNode>
  28.                     </f:TreeNode>
  29.                 </f:TreeNode>
  30.             </f:TreeNode>
  31.         </Nodes>
  32.     </f:Tree>

  33.     <f:Button Text="编辑选择中的节点" ID="btnHello" OnClientClick="editSelectedNode()"></f:Button>
  34. }

  35. @section script {
  36.     <script src="~/res/js/fineui-tree-plugin.js"></script>
  37.     <script>
  38.         var tree = null;

  39.         const beforeDrop = function (droppedData) {
  40.             if (droppedData.dragNodeId === 'zhumadian' && droppedData.targetNodeId === 'hefei') {
  41.                 if (droppedData.position === 'before') {
  42.                     return true;
  43.                 } else {
  44.                     return false; // 返回 false 表示不允许放置
  45.                 }
  46.             }

  47.             return true;
  48.         };

  49.         const afterDrop = function (droppedData) {
  50.             console.log(droppedData.dragNodeId + "," + droppedData.targetNodeId + "," + droppedData.position);
  51.         }

  52.         const beforeEdit = function (nodeId) {
  53.             if (nodeId === 'ustc') {
  54.                 alert('不允许编辑 ' + F.ui.Tree1.getNodeData(nodeId).text);
  55.                 return false; // 返回 false 表示不允许编辑
  56.             }

  57.             return true;
  58.         }

  59.         const afterEdit = function (nodeId, nodeText, oldNodeText) {
  60.             if (nodeId === 'golden') {
  61.                 if (nodeText.indexOf('小区') === -1) {
  62.                     return '必须包含 小区'; // 返回文本表示编辑不成功,同时会显示错误提示
  63.                 }
  64.             }

  65.             if (nodeId === 'luohe') {
  66.                 if (nodeText.indexOf('漯河') === -1) {
  67.                     return false; // 返回 false 表示编辑不成功,不会显示错误提示
  68.                 }
  69.             }

  70.             if (nodeText === oldNodeText) {
  71.                 console.log('节点文本未被更改');
  72.             }

  73.             return true;
  74.         }

  75.         const editSelectedNode = function () {
  76.             if (tree) {
  77.                 tree.editNode(F.ui.Tree1.getSelectedNode());
  78.             }
  79.         }

  80.         F.ready(function () {
  81.             tree = F.ext.treePlugin({
  82.                 treeId: 'Tree1',
  83.                 enableDragDrop: true,
  84.                 beforeDrop: beforeDrop,
  85.                 afterDrop: afterDrop,
  86.                 beforeEdit: beforeEdit,
  87.                 afterEdit: afterEdit
  88.             });
  89.         });
  90.     </script>
  91. }
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-3-29 01:41 , Processed in 0.046089 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表