FineUI Tree 插件

棕榈

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. 
   
8. @section body {
   
9. 
   
10.     <f:Tree ID="Tree1" IsFluid="true" CssClass="blockpanel" ShowHeader="true" Title="树控件（内联）" EnableCollapse="false" SelectedNodeID="zhumadian">
    
11.         <Nodes>
    
12.             <f:TreeNode Text="中国" Expanded="true" NodeID="china">
    
13.                 <f:TreeNode Text="河南省" Expanded="true" NodeID="henan">
    
14.                     <f:TreeNode Text="驻马店市" NodeID="zhumadian">
    
15.                         <f:TreeNode Text="遂平县" Leaf="false" NodeID="suiping">
    
16.                             <f:TreeNode Text="槐树乡" Leaf="false" NodeID="huaishu">
    
17.                                 <f:TreeNode Text="陈庄村" NodeID="chenzhuang">
    
18.                                 </f:TreeNode>
    
19.                             </f:TreeNode>
    
20.                         </f:TreeNode>
    
21.                     </f:TreeNode>
    
22.                     <f:TreeNode Text="漯河市" NodeID="luohe" />
    
23.                 </f:TreeNode>
    
24.                 <f:TreeNode Text="安徽省" Expanded="true" NodeID="anhui">
    
25.                     <f:TreeNode Text="合肥市" Expanded="true" NodeID="hefei">
    
26.                         <f:TreeNode Text="金色池塘小区" NodeID="golden">
    
27.                         </f:TreeNode>
    
28.                         <f:TreeNode Text="中国科学技术大学" NodeID="ustc">
    
29.                         </f:TreeNode>
    
30.                     </f:TreeNode>
    
31.                 </f:TreeNode>
    
32.             </f:TreeNode>
    
33.         </Nodes>
    
34.     </f:Tree>
    
35. 
    
36.     <f:Button Text="编辑选择中的节点" ID="btnHello" OnClientClick="editSelectedNode()"></f:Button>
    
37. }
    
38. 
    
39. @section script {
    
40.     <script src="~/res/js/fineui-tree-plugin.js"></script>
    
41.     <script>
    
42.         var tree = null;
    
43. 
    
44.         const beforeDrop = function (droppedData) {
    
45.             if (droppedData.dragNodeId === 'zhumadian' && droppedData.targetNodeId === 'hefei') {
    
46.                 if (droppedData.position === 'before') {
    
47.                     return true;
    
48.                 } else {
    
49.                     return false; // 返回 false 表示不允许放置
    
50.                 }
    
51.             }
    
52. 
    
53.             return true;
    
54.         };
    
55. 
    
56.         const afterDrop = function (droppedData) {
    
57.             console.log(droppedData.dragNodeId + "," + droppedData.targetNodeId + "," + droppedData.position);
    
58.         }
    
59. 
    
60.         const beforeEdit = function (nodeId) {
    
61.             if (nodeId === 'ustc') {
    
62.                 alert('不允许编辑 ' + F.ui.Tree1.getNodeData(nodeId).text);
    
63.                 return false; // 返回 false 表示不允许编辑
    
64.             }
    
65. 
    
66.             return true;
    
67.         }
    
68. 
    
69.         const afterEdit = function (nodeId, nodeText, oldNodeText) {
    
70.             if (nodeId === 'golden') {
    
71.                 if (nodeText.indexOf('小区') === -1) {
    
72.                     return '必须包含 小区'; // 返回文本表示编辑不成功，同时会显示错误提示
    
73.                 }
    
74.             }
    
75. 
    
76.             if (nodeId === 'luohe') {
    
77.                 if (nodeText.indexOf('漯河') === -1) {
    
78.                     return false; // 返回 false 表示编辑不成功，不会显示错误提示
    
79.                 }
    
80.             }
    
81. 
    
82.             if (nodeText === oldNodeText) {
    
83.                 console.log('节点文本未被更改');
    
84.             }
    
85. 
    
86.             return true;
    
87.         }
    
88. 
    
89.         const editSelectedNode = function () {
    
90.             if (tree) {
    
91.                 tree.editNode(F.ui.Tree1.getSelectedNode());
    
92.             }
    
93.         }
    
94. 
    
95.         F.ready(function () {
    
96.             tree = F.ext.treePlugin({
    
97.                 treeId: 'Tree1',
    
98.                 enableDragDrop: true,
    
99.                 beforeDrop: beforeDrop,
    
100.                 afterDrop: afterDrop,
     
101.                 beforeEdit: beforeEdit,
     
102.                 afterEdit: afterEdit
     
103.             });
     
104.         });
     
105.     </script>
     
106. }
     

复制代码