FineUI 官方论坛

标题: FineUI Tree 插件 [打印本页]
作者: 棕榈    时间: 2020-1-17 14:40
标题: FineUI Tree 插件
本帖最后由 棕榈 于 2020-1-17 14:40 编辑

FineUI Tree 插件

[attach]12201[/attach]


[attach]12202[/attach]


这是对之前发布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. }

  8. @section body {

  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>

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

  39. @section script {
  40.     <script src="~/res/js/fineui-tree-plugin.js"></script>
  41.     <script>
  42.         var tree = null;

  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.             }

  53.             return true;
  54.         };

  56.         const afterDrop = function (droppedData) {
  57.             console.log(droppedData.dragNodeId + "," + droppedData.targetNodeId + "," + droppedData.position);
  58.         }

  60.         const beforeEdit = function (nodeId) {
  61.             if (nodeId === 'ustc') {
  62.                 alert('不允许编辑 ' + F.ui.Tree1.getNodeData(nodeId).text);
  63.                 return false; // 返回 false 表示不允许编辑
  64.             }

  66.             return true;
  67.         }

  69.         const afterEdit = function (nodeId, nodeText, oldNodeText) {
  70.             if (nodeId === 'golden') {
  71.                 if (nodeText.indexOf('小区') === -1) {
  72.                     return '必须包含 小区'; // 返回文本表示编辑不成功，同时会显示错误提示
  73.                 }
  74.             }

  76.             if (nodeId === 'luohe') {
  77.                 if (nodeText.indexOf('漯河') === -1) {
  78.                     return false; // 返回 false 表示编辑不成功，不会显示错误提示
  79.                 }
  80.             }

  82.             if (nodeText === oldNodeText) {
  83.                 console.log('节点文本未被更改');
  84.             }

  86.             return true;
  87.         }

  89.         const editSelectedNode = function () {
  90.             if (tree) {
  91.                 tree.editNode(F.ui.Tree1.getSelectedNode());
  92.             }
  93.         }

  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. }
复制代码






欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/) Powered by Discuz! X3.4