diff --git a/types/zui/datatable.d.ts b/types/zui/datatable.d.ts
new file mode 100644
index 0000000000..15734e1e48
--- /dev/null
+++ b/types/zui/datatable.d.ts
@@ -0,0 +1,80 @@
+interface Col {
+    width?: number,
+    text?: string,
+    type?: string,
+    flex?: boolean,
+    colClass?: string,
+    sort?: string,
+    ignore?: boolean
+}
+interface Row {
+    id?: string,
+    checked?: boolean,
+    cssClass?: string,
+    css?: string,
+    data?: Array<any>
+}
+interface DataTableData {
+    rows: Array<Row>,
+    cols: Array<Col>
+}
+interface AfterLoadEvent {
+    data: DataTableData;
+}
+interface SortEvent {
+    sorter: {
+        index: number,
+        sortUp: boolean,
+    }
+}
+interface SizeChangeEvent {
+    changes: {
+        change: string,
+        oldWidth: number,
+        newWidth: number,
+        colIndex: number,
+    }
+}
+interface ChecksChangeEvent {
+    checks: {
+        checkedAll: boolean,
+        checks: Array<number>
+    }
+}
+interface DataTableOption {
+    checkable?: boolean,
+    checkByClickRow?: boolean,
+    checkedClass?: string,
+    storage?: boolean,
+    sortable?: boolean,
+    fixedHeader?: boolean,
+    fixedHeaderOffset?: number,
+    fixedLeftWidth?: string,
+    fixedRightWidth?: string,
+    flexHeadDrag?: boolean,
+    scrollPos?: string,
+    rowHover?: boolean,
+    colHover?: boolean,
+    fixCellHeight?: boolean,
+    minColWidth?: number,
+    minFixedLeftWidth?: number,
+    minFixedRightWidth?: number,
+    minFlexAreaWidth?: number
+    selectable?: boolean | object,
+
+    afterLoad?(event: AfterLoadEvent): void;
+    ready?(): void;
+    sort?(event: SortEvent): void;
+    sizeChanged?(event: SizeChangeEvent): void;
+    checksChanged?(event: ChecksChangeEvent): void;
+}
+
+interface DataTable {
+    checks: { checkedAll: boolean, checks: Array<number> }
+}
+
+interface JQuery {
+    datatable(option?: DataTableOption): JQuery;
+    datatable(command: string, option?: DataTableOption): JQuery;
+    datatable(command: string, data: DataTableData): JQuery;
+}
\ No newline at end of file
diff --git a/types/zui/index.d.ts b/types/zui/index.d.ts
index a9da140191..2bd66ea5e1 100644
--- a/types/zui/index.d.ts
+++ b/types/zui/index.d.ts
@@ -18,6 +18,8 @@
 ///<reference path="sortable.d.ts" />
 ///<reference path="selectable.d.ts" />
 ///<reference path="imagecutter.d.ts" />
+///<reference path="treemenu.d.ts" />
+///<reference path="datatable.d.ts" />
 
 /*~ If this module is a UMD module that exposes a global variable 'myLib' when
  *~ loaded outside a module loader environment, declare that global here.
diff --git a/types/zui/treemenu.d.ts b/types/zui/treemenu.d.ts
new file mode 100644
index 0000000000..3512efe8ae
--- /dev/null
+++ b/types/zui/treemenu.d.ts
@@ -0,0 +1,43 @@
+interface TreeNode {
+    title?: string,
+    url?: string,
+    html?: string,
+    children?: Array<TreeNode>;
+    open?: boolean,
+    id?: string
+}
+interface TreeMenuOption {
+    animate?: boolean,
+    initialState?: string,
+    data?: Array<TreeNode>
+    itemCreator?(li: JQuery | object, item: TreeNode): any,
+    itemWrapper?: boolean
+}
+
+interface TreeMenu {
+    expand(): void;
+    expand(params: JQuery): void;
+    expand(params: JQuery, disableAnimate: boolean): void;
+
+    collapse(): void;
+    collapse(params: JQuery): void;
+    collapse(params: JQuery, disableAnimate: boolean): void;
+
+    toggle(): void;
+    toggle(params: JQuery): void;
+    toggle(params: JQuery, disableAnimate: boolean): void;
+
+    show(): void;
+    show(params: JQuery): void;
+    show(params: JQuery, disableAnimate: boolean): void;
+
+    add(element: JQuery, items: Array<TreeNode>, expand?: boolean, disabledAnimate?: boolean): void;
+    toData($ul?: JQuery, filter?: string): object;
+
+    reload(data: Array<TreeNode>):void;
+    remove(): void;
+    empty(): void;
+}
+interface JQuery {
+    tree(option?: TreeMenuOption): JQuery
+}
\ No newline at end of file
diff --git a/types/zui/zui-tests.ts b/types/zui/zui-tests.ts
index fefd533c47..12ce598c51 100644
--- a/types/zui/zui-tests.ts
+++ b/types/zui/zui-tests.ts
@@ -276,4 +276,53 @@ var myImgCutter = $('#imgCutter').data('zui.imgCutter');
 myImgCutter.resetImage('http://zui.sexy/docs/img/img1.jpg');
 
 // 调用 getData 方法
-var myImgCutterData = myImgCutter.getData();
\ No newline at end of file
+var myImgCutterData = myImgCutter.getData();
+
+/**
+ * treemenu
+ */
+var myTreeData = [{
+    title: '水果',
+    url: 'http://zui.sexy',
+    open: true,
+    children: [
+        { title: '橘子' },
+        {
+            title: '瓜',
+            children: [
+                { title: '西瓜' },
+                { title: '黄瓜' }
+            ]
+        }
+    ]
+}, {
+    title: '坚果',
+    children: [
+        { title: '向日葵' },
+        { title: '瓜子' }
+    ]
+}, {
+    title: '蔬菜'
+}];
+
+$('#myTree').tree({ data: myTreeData });
+
+
+/**
+ * datatable
+ */
+$('table.datatable').datatable({ sortable: true });
+// 使用data参数更新数据：
+$('table.datatable').datatable('load', {
+    cols: [
+        { width: 80, text: '#', type: 'number', flex: false, colClass: 'text-center' },
+        { width: 160, text: '时间', type: 'date', flex: false, sort: 'down' },
+        { width: 80, text: '名称', type: 'string', flex: true, colClass: '' }
+    ],
+    rows: [
+        { checked: false, data: [1, '2016-01-18 11:09:36', '新的名称示例1'] },
+        { checked: false, data: [2, '2016-01-22 12:06:16', '新的名称示例2'] },
+        // 更多数据
+    ]
+});
+