syncfusion-javascript-common

Syncfusion JavaScript 控件的常见功能

Syncfusion JavaScript 控件包含全面的通用实用工具和功能，可提升用户体验、确保跨文化支持，并为所有控件提供基础能力。本技能涵盖安装设置、动画、全球化、状态管理和安全注意事项，帮助构建稳健的 JavaScript 应用程序。

目录

• 文档与导航指南
• 快速入门
• 常见功能

文档与导航指南

开始使用与安装

📄 阅读： references/getting-started.md

• Webpack 设置 - 使用 Webpack 打包工具集成 Syncfusion 控件
• Electron 设置 - 在 Electron 桌面应用程序中使用 Syncfusion 控件
• Cordova 设置 - 在 Apache Cordova 移动应用中集成控件
• Ionic 设置 - 为 Ionic 框架配置 Syncfusion 控件
• Meteor 设置 - 在 Meteor.js 应用程序中设置控件
• SharePoint 设置 - 在 SharePoint 环境中部署 Syncfusion 控件

---

全球化

📄 阅读： references/globalization.md

• 支持阿拉伯语、希伯来语和波斯语的从右向左（RTL）布局
• 多语言本地化（l10n）
• 基于 CLDR 数据的国际化（i18n）
• 数字和货币格式设置
• 日期和时间格式设置

---

高级功能

📄 阅读： references/advanced-features.md)

• 动画效果（FadeIn、ZoomOut、SlideUp 等）
• 动画时序（持续时间、延迟、全局设置）
• 拖放交互（Draggable、Droppable）
• 模板自定义与优化
• 使用 enablePersistence 持久化状态
• 安全最佳实践与 HTML 清理

---

快速入门

安装 Syncfusion JavaScript 控件包和主题包

npm install @syncfusion/ej2-grids@latest @syncfusion/ej2-tailwind3-theme@latest --save

注意： @syncfusion/ej2-base 包是所有 Syncfusion 控件的依赖项，安装任意 Syncfusion JavaScript 包时都会自动安装。无需将其显式添加到 package.json 文件中。

导入样式

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

注册许可证密钥

步骤 1： 设置环境变量：

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

步骤 2： 使用 NPX 命令激活许可证：

npx syncfusion-license activate

注意： 有关其他许可证注册方式，请参阅 Syncfusion 许可证密钥注册文档。

基本控件设置

import { Grid, Page } from '@syncfusion/ej2-grids';

const data: Object[] = [
  { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
  { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
];

const grid: Grid = new Grid({
  dataSource: data,
  allowPaging: true,
  columns: [
    { field: 'OrderID', width: 100 },
    { field: 'CustomerID', width: 100 },
    { field: 'Freight', width: 100, format: 'C2' }
  ]
});

// Inject required services
Grid.Inject(Page);

grid.appendTo('#grid');

<div id="grid"></div>

常见功能

启用状态持久化

import { Grid } from '@syncfusion/ej2-grids';

const grid: Grid = new Grid({
  dataSource: data,
  enablePersistence: true
});

grid.appendTo('#grid');

启用 RTL 支持

import { enableRtl } from '@syncfusion/ej2-base';
import { ListView } from '@syncfusion/ej2-lists';

// Global RTL enablement
enableRtl(true);

// OR per-control
const listView: ListView = new ListView({
  enableRtl: true
});
listView.appendTo('#listview');

添加动画效果

import { Animation } from '@syncfusion/ej2-base';

const element: HTMLElement | null = document.getElementById('element');

if (element) {
  const animation: Animation = new Animation({ 
    duration: 5000, 
    delay: 2000 
  });
  animation.animate(element, { name: 'FadeOut' });
}

实现拖放

import { Draggable, Droppable } from '@syncfusion/ej2-base';

const draggableElement: HTMLElement | null = document.getElementById('draggable');
const droppableElement: HTMLElement | null = document.getElementById('droppable');

if (draggableElement && droppableElement) {
  const draggable: Draggable = new Draggable(draggableElement, { 
    clone: false 
  });
  
  const droppable: Droppable = new Droppable(droppableElement, {
    drop: (e: DropEventArgs) => {
      if (e.droppedElement) {
        e.droppedElement.textContent = 'Dropped!';
      }
    }
  });
}

<div id="draggable">Drag me</div>
<div id="droppable">Drop here</div>