diff --git a/packages/grid-design/src/components/grid-shell/grid-shell.scss b/packages/grid-design/src/components/grid-shell/grid-shell.scss
index d31df4553255395937faf73f4e446c4315f45c50..ee004ad447c4228ae22d594b93cfbbaa519b5ec5 100644
--- a/packages/grid-design/src/components/grid-shell/grid-shell.scss
+++ b/packages/grid-design/src/components/grid-shell/grid-shell.scss
@@ -43,6 +43,7 @@
 
 :root.studio_dark{
   @include b('light-theme-shell'){
+    .ibiz-control-treegrid .el-pagination.is-background .el-pager li.is-active,
     .ibiz-control-grid .el-pagination.is-background .el-pager li.is-active{
       color: getCssVar(color,primary);
       background-color:  getCssVar(color,primary,text);
diff --git a/packages/grid-design/src/components/grid-shell/grid-shell.tsx b/packages/grid-design/src/components/grid-shell/grid-shell.tsx
index f9726d71f788dfae6db32b55ceba18b9da657355..75733fd49abab1ef9f5f159aa163cf7c4b4e0067 100644
--- a/packages/grid-design/src/components/grid-shell/grid-shell.tsx
+++ b/packages/grid-design/src/components/grid-shell/grid-shell.tsx
@@ -86,6 +86,7 @@ export default defineComponent({
           (model as IDEGridFieldColumn).appDEFieldId = gridColName;
           (model as IDEGridFieldColumn).valueType = 'SIMPLE';
           (model as IDEGridFieldColumn).dataItemName = gridColName;
+          (model as IDEGridFieldColumn).treeColumnMode = item.treeitem;
         }
         if (gridColType === 'UAGRIDCOLUMN') {
           (model as IDEGridUAColumn).deuiactionGroup = {
@@ -119,7 +120,6 @@ export default defineComponent({
             valueType: 'SIMPLE',
             dataType: 25,
           };
-
           gridDataItems.push(dataItem);
         }
       });
@@ -136,6 +136,8 @@ export default defineComponent({
       const srfAppDataEntityId = '';
       const enablePagingBar = !!props.data.enablepagingbar;
       const pagingSize = props.data.pagingsize || 20;
+      const gridType =
+        props.data.gridstyle === 'TREEGRID' ? 'TREEGRID' : 'GRID';
       const model: IDEGrid = {
         aggMode: 'NONE',
         columnEnableFilter: 2,
@@ -149,15 +151,15 @@ export default defineComponent({
         autoLoad: true,
         showBusyIndicator: true,
         singleSelect: true,
-        codeName: 'GRID',
-        controlType: 'GRID',
+        codeName: gridType,
+        controlType: gridType,
         logicName: '主表格',
         appDataEntityId: srfAppDataEntityId,
         controlParam: { id: 'grid', appId: srfAppId },
         modelId: '9db1aa2be35a58b18c1974ca7cb64cc1',
-        modelType: 'PSDEGRID',
-        name: 'grid',
-        id: `${srfAppId}.${srfAppDataEntityId}.GRID`,
+        modelType: `PSDE${gridType}`,
+        name: `${gridType.toLowerCase()}`,
+        id: `${gridType}`,
         appId: srfAppId,
       };
       const filterGridCols = props.gridCols?.filter(
@@ -173,16 +175,33 @@ export default defineComponent({
         appId: srfAppId,
       };
       modelData.value = model;
-      items.value = Array.from({ length: 5 }, (_, i) => {
-        const data: IData = {};
-        filterGridCols.forEach(item => {
-          const gridColName = item.psdegridcolname;
-          const caption =
-            item.logicname || item.caption || item.psdegridcolname;
-          data[gridColName] = `${caption}「${i + 1}」`;
-        });
-        return data;
-      });
+      const valCol = props.gridCols?.find(item =>
+        [2, 3].includes(item.treeitem),
+      );
+      items.value = Array.from(
+        { length: gridType === 'TREEGRID' ? 10 : 5 },
+        (_, i) => {
+          const data: IData = {
+            srfkey: i,
+            tempsrfkey: i,
+          };
+          props.gridCols?.forEach(item => {
+            if (item.gridcoltype === 'DEFGRIDCOLUMN') {
+              const gridColName = item.psdegridcolname;
+              const caption =
+                item.logicname || item.caption || item.psdegridcolname;
+              // 后7条为子数据
+              const isChild = i > 2 && [4, 12].includes(item.treeitem);
+              const childName =
+                valCol?.logicname || valCol?.caption || valCol?.psdegridcolname;
+              data[gridColName] = `${isChild ? childName : caption}「${
+                isChild ? Math.floor(i / 2) : i + 1
+              }」`;
+            }
+          });
+          return data;
+        },
+      );
     };
 
     init();
@@ -213,14 +232,14 @@ export default defineComponent({
     }
 
     return (
-      <iBizGridControl
+      <iBizControlShell
         isSimple={true}
         data={this.items}
         context={this.context}
         modelData={this.modelData}
         onHeaderClick={this.onHeaderClick}
         class={[this.ns.b(), this.ns.m(this.theme), this.shellNS.b()]}
-      ></iBizGridControl>
+      />
     );
   },
 });
diff --git a/packages/md-design/src/components/dataview-shell/dataview-shell.tsx b/packages/md-design/src/components/dataview-shell/dataview-shell.tsx
index de0c0a73fb31e335e7f693d0579004719405a324..5ba4fd533facb921979bfec9b010aa0939f3fc5f 100644
--- a/packages/md-design/src/components/dataview-shell/dataview-shell.tsx
+++ b/packages/md-design/src/components/dataview-shell/dataview-shell.tsx
@@ -96,7 +96,7 @@ export default defineComponent({
         groupLayout: data.grouplayout,
         groupMode: enableGroup ? 'AUTO' : undefined,
         groupAppDEFieldId: data.grouppsdefname ? 'grouppsdefid' : undefined,
-        groupStyle: data.groupstyle,
+        groupStyle: data.groupstyle || 'DEFAULT',
         minorSortDir: data.minorsortdir,
         pagingMode: data.enablepagingbar,
         pagingSize: data.pagesize,
@@ -106,8 +106,14 @@ export default defineComponent({
         singleSelect: data.multiselect === 0,
         dedataViewItems,
         dedataViewDataItems,
+        enableCardNew:
+          props.data.enableedit && (props.data.enableedit & 128) !== 128,
+        enableCardEditOrder:
+          props.data.enableedit && (props.data.enableedit & 257) === 257,
+        enableEditGroup:
+          props.data.enableedit && (props.data.enableedit & 513) === 513,
         itemLayoutPanel: transformLayoutPanel(data.layoutviewpanel),
-      };
+      } as IDEDataView;
       modelData.value = model;
     };
 
diff --git a/packages/md-design/src/components/kanban-shell/kanban-shell.tsx b/packages/md-design/src/components/kanban-shell/kanban-shell.tsx
index e1c3fb12371ad49a1360dde3cfa98a7bc28fb2cd..e26864e38ed33ab32785cc61e47008783bc2639a 100644
--- a/packages/md-design/src/components/kanban-shell/kanban-shell.tsx
+++ b/packages/md-design/src/components/kanban-shell/kanban-shell.tsx
@@ -103,7 +103,7 @@ export default defineComponent({
         swimlaneAppDEFieldId: data.swimlanepsdefname
           ? 'swimlanepsdefid'
           : undefined,
-        groupStyle: data.groupstyle,
+        groupStyle: data.groupstyle || 'DEFAULT',
         minorSortDir: data.minorsortdir,
         pagingMode: data.enablepagingbar,
         pagingSize: data.pagesize,
@@ -114,6 +114,12 @@ export default defineComponent({
         dedataViewItems,
         dedataViewDataItems,
         itemLayoutPanel: transformLayoutPanel(data.layoutviewpanel),
+        enableCardNew:
+          props.data.enableedit && (props.data.enableedit & 128) !== 128,
+        enableCardEditOrder:
+          props.data.enableedit && (props.data.enableedit & 257) === 257,
+        enableEditGroup:
+          props.data.enableedit && (props.data.enableedit & 513) === 513,
         controlParam: {
           appId: props.context.srfappid,
           ctrlParams: {
diff --git a/packages/md-design/src/components/list-shell/list-shell.tsx b/packages/md-design/src/components/list-shell/list-shell.tsx
index a4403f9d39b6785da464ba6b1c5d2aed445f594a..b0876e1f346692d51a3e2d6f43f3f2f04c497219 100644
--- a/packages/md-design/src/components/list-shell/list-shell.tsx
+++ b/packages/md-design/src/components/list-shell/list-shell.tsx
@@ -49,6 +49,10 @@ export default defineComponent({
           srfkey: i + 1,
           srfmajortext: `srfmajortext 「${i + 1}」`,
         };
+        if (props.data.grouppsdefname)
+          Object.assign(data, {
+            grouppsdefid: `分组${(i % 3) + 1}`,
+          });
         delistItems.forEach(item => {
           if (item.itemType !== 'ACTIONITEM') {
             data[item.id!.toLowerCase()] = `${item.caption || item.id}「${
@@ -66,24 +70,34 @@ export default defineComponent({
       const { delistItems, delistDataItems } = parseListItem(
         data.psdelistitems,
       );
+      const enableGroup =
+        data.groupmode && data.groupmode !== 'NONE' && data.grouppsdefname
+          ? true
+          : false;
       const model: IDEList = {
         appId: props.context.srfappid,
         controlType: 'LIST',
         codeName: data.codename,
-        groupMode: data.groupmode,
         emptyText: data.emptytext,
-        groupStyle: data.groupstyle,
         minorSortDir: data.minorsortdir,
         mobListStyle: data.mobliststyle,
         pagingMode: data.enablepagingbar,
         pagingSize: data.pagesize,
-        enableGroup: false,
-        groupAppDEFieldId: data.grouppsdefname,
+        enableGroup,
+        groupMode: enableGroup ? 'AUTO' : undefined,
+        groupStyle: data.groupstyle || 'DEFAULT',
+        groupAppDEFieldId: data.grouppsdefname ? 'grouppsdefid' : undefined,
         enablePagingBar: data.enablepagingbar === 1,
         noSort: data.nosort,
         singleSelect: data.multiselect === 0,
         delistItems,
         delistDataItems,
+        enableRowNew:
+          props.data.enableedit && (props.data.enableedit & 128) !== 128,
+        enableRowEditOrder:
+          props.data.enableedit && (props.data.enableedit & 257) === 257,
+        enableRowEditGroup:
+          props.data.enableedit && (props.data.enableedit & 513) === 513,
         itemLayoutPanel: transformLayoutPanel(data.layoutviewpanel),
       };
       modelData.value = model;
diff --git a/packages/panel-design/public/assets/json/layout-json2/DETREEGRIDEXVIEW.json b/packages/panel-design/public/assets/json/layout-json2/DETREEGRIDEXVIEW.json
index fda3c4f0a9d652d304cb0bd1af4dedea5bc6c914..f30347e818fadbd4812ac2202adf109d661c3fa1 100644
--- a/packages/panel-design/public/assets/json/layout-json2/DETREEGRIDEXVIEW.json
+++ b/packages/panel-design/public/assets/json/layout-json2/DETREEGRIDEXVIEW.json
@@ -134,7 +134,7 @@
         "pssysviewpanelitems": [
           {
             "itemtype": "CTRLPOS",
-            "predefinedtype": "TREEVIEW",
+            "predefinedtype": "TREEGRIDEX",
             "custommode": 0,
             "caption": "树表格",
             "ppssysviewpanelitemname": "view_content",
diff --git a/packages/panel-design/public/assets/json/layout-json2/DETREEGRIDVIEW.json b/packages/panel-design/public/assets/json/layout-json2/DETREEGRIDVIEW.json
index bb12291995409c4613340329a0bc1f9fd5f22d29..6cd083616b5a463f9a1159dda9cad45e8fc2e166 100644
--- a/packages/panel-design/public/assets/json/layout-json2/DETREEGRIDVIEW.json
+++ b/packages/panel-design/public/assets/json/layout-json2/DETREEGRIDVIEW.json
@@ -134,7 +134,7 @@
         "pssysviewpanelitems": [
           {
             "itemtype": "CTRLPOS",
-            "predefinedtype": "GRID",
+            "predefinedtype": "TREEGRID",
             "custommode": 0,
             "caption": "树表格",
             "ppssysviewpanelitemname": "view_content",
diff --git a/packages/panel-design/src/components/panel-item-widgets/hooks/use-ctrl-pos/use-ctrl-pos.ts b/packages/panel-design/src/components/panel-item-widgets/hooks/use-ctrl-pos/use-ctrl-pos.ts
index 9e8f8a304b3b056aefa92119632e3e1bbcf483c3..44e06130602ca2026b6990258099eed86854abf1 100644
--- a/packages/panel-design/src/components/panel-item-widgets/hooks/use-ctrl-pos/use-ctrl-pos.ts
+++ b/packages/panel-design/src/components/panel-item-widgets/hooks/use-ctrl-pos/use-ctrl-pos.ts
@@ -13,6 +13,7 @@ export function getCtrlIdByType(type: string, data: IData): string {
   switch (type) {
     case 'SEARCHFORM':
       return data.psdeformid;
+    case 'TREEGRIDEX':
     case 'TREEEXPBAR':
       return data.psdetreeviewid;
     case 'CALENDAR':
@@ -21,6 +22,7 @@ export function getCtrlIdByType(type: string, data: IData): string {
     case 'MAP':
     case 'MAPEXPBAR':
       return data.pssysmapviewid;
+    case 'TREEGRID':
     case 'GRIDEXPBAR':
       return data.psdegridid;
     case 'LISTEXPBAR':
diff --git a/packages/panel-design/src/components/panel-item-widgets/preview-componnets/view-ctrl-shell/view-ctrl-shell.tsx b/packages/panel-design/src/components/panel-item-widgets/preview-componnets/view-ctrl-shell/view-ctrl-shell.tsx
index 593f1692d25dc18a5d0ad4b534e75080f9c81430..ef2f2522ef150d1dfbdbed400e6e42a9e9021869 100644
--- a/packages/panel-design/src/components/panel-item-widgets/preview-componnets/view-ctrl-shell/view-ctrl-shell.tsx
+++ b/packages/panel-design/src/components/panel-item-widgets/preview-componnets/view-ctrl-shell/view-ctrl-shell.tsx
@@ -25,6 +25,8 @@ const CtrlTypeEntityMap: Map<string, string> = new Map([
   ['WIZARDPANEL', 'psdewizard'],
   ['STATEWIZARDPANEL', 'psdewizard'],
   ['SEARCHBAR', 'pssyssearchbar'],
+  ['TREEGRIDEX', 'psdetreeview'],
+  ['TREEGRID','psdegrid'],
 ]);
 
 export default defineComponent({
diff --git a/packages/panel-design/src/components/panel-item-widgets/widgets/view-design-control/view-design-control.tsx b/packages/panel-design/src/components/panel-item-widgets/widgets/view-design-control/view-design-control.tsx
index 63ed77c263e9e57323075cf88c64d1c39a602933..05ed99f2b26a892cc6c987cd5b5310cc1e710025 100644
--- a/packages/panel-design/src/components/panel-item-widgets/widgets/view-design-control/view-design-control.tsx
+++ b/packages/panel-design/src/components/panel-item-widgets/widgets/view-design-control/view-design-control.tsx
@@ -1,21 +1,21 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
-  PropType,
   Ref,
+  ref,
+  watch,
+  PropType,
   computed,
-  defineComponent,
   onMounted,
   onUnmounted,
-  ref,
-  watch,
+  defineComponent,
 } from 'vue';
 import { clone } from 'ramda';
 import { IAppDEService } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { IPortalMessage } from '@ibiz-template/core';
 import {
-  PanelContentProvider,
   PanelItemActionItem,
+  PanelContentProvider,
   PanelItemDataProvider,
 } from '../../../../providers';
 import { useCtrlPos } from '../../hooks';
diff --git a/packages/panel-design/src/providers/util/create-provider/create-provider.ts b/packages/panel-design/src/providers/util/create-provider/create-provider.ts
index 51beac3dd5f1fbcb0211d24c6725265f4ff146d8..8ca7dddea4e9820501b1e0d5f6498be9da6a38ed 100644
--- a/packages/panel-design/src/providers/util/create-provider/create-provider.ts
+++ b/packages/panel-design/src/providers/util/create-provider/create-provider.ts
@@ -74,6 +74,8 @@ export function createProvider(
     case 'PANEL':
     case 'WIZARDPANEL':
     case 'STATEWIZARDPANEL':
+    case 'TREEGRID':
+    case 'TREEGRIDEX':
       return new PanelCtrlPosProvider(
         model,
         type,