Extjs-表格 Ext.grid.GridPanel

2024-02-12 04:10
文章标签 表格 frontend extjs grid ext gridpanel

本文主要是介绍Extjs-表格 Ext.grid.GridPanel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目中的grid

自动显示行号

rn = new Ext.grid.RowNumberer();

复选框

var sm = new Ext.grid.CheckboxSelectionModel({//如果只允许用户通过复选框执行选中操作放开下面配置项//handleMouseDown : Ext.emptyFn//可复用的空函数//true表示只允许选择单行//singleSelect : true
});

列模型

var cm = new Ext.grid.ColumnModel([rn,sm,  {header:'编号',dataIndex:'id',align :'center',sortable : true,renderer : function(v){return "<div align='center'>"+v?v:""+"</div>"}},{header:'查看详细',dataIndex:'id',align :'center',renderer : function(v){return "<div align=\"center\"><input type=\"button\" value=\".....\" οnclick=\"alert(1)\"></div>"}}
]);
分页工具
需要导入ProgressBarPager.js 
var bbar = new Ext.PagingToolbar({pageSize : limit,store : store,displayInfo : true,displayMsg : '显示第{0}条到{1}条记录，一共{2}条',emptyMsg : '没有记录',prevText:'上一页',nextText:'下一页',refreshText:'刷新',lastText:'最后页',firstText:'第一页',beforePageText:'当前页',afterPageText:'共{0}页',plugins: [new Ext.ux.ProgressBarPager()]
});
表格显示内容 

var grid = new Ext.grid.GridPanel({  region: 'center',store : store,  stripeRows : true, sm : sm,  cm : cm,bbar : bbar,tbar : [{text: '增加',pressed:true,handler: function(){}  },'-',{text: '删除',pressed:true,handler: function(){}  },'-',{text: '修改',pressed:true,handler: function(){}  }],viewConfig : new Ext.grid.GridView({  forceFit : true  }), listeners : {  'beforerender' : function(){  store.load(); }  }  
});

项目中使用new Ext.grid.RowExpander 需要导入ux/RowExpander.js

var expander = new Ext.grid.RowExpander({ tpl : new Ext.Template('<div style="border:1px #CCCCCC solid"><br>'+'<table background = "#CCCCCC">' +'<tr>' +'<td width="23%">                      用户名称:  {YH_MC}</td>' +'<td width="23%"></td>' +'<td width="23%"></td>' +'<td rowspan="4" width="5%">照片:</td>' +'<td rowspan="4" width="26%">'+'<img src="<%=rootpath%>/image/lwc.jpg" style="height:177;width:150"/>'+'</td>' +'</tr>' +	 '<tr>' +'<td>                      学历:  {XL}</td>' +'<td>学校:  {XX}</td>' +'</tr>' +'<td>                      电话:  {DH}</td>' +'<td>家庭住址:  {JTZZ}</td>' +'</tr>' +'<tr>' +'<td>                      入职时间:  {RZSJ}</td>' +'<td>离职时间:  {LZSJ}</td>' +	          '</tr>' +'</table>' +'<br/></div>'),beforeExpand : function(record, body, rowIndex){record.data.FILENAME=encodeURI(record.data.FILENAME);if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){if(this.tpl && this.lazyRender){body.innerHTML = this.getBodyContent(record, rowIndex);}return true;}else{return false;}}
});
放入列模型 
var cm = new Ext.grid.ColumnModel([rn,sm,expander,
放入grid 
plugins: expander,
1.表格的特性简介 

表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid
表格的列信息由类Ext.grid.ColumnModel定义,
表格的数据存储器由Ext.data.Store定义,根据解析数据不同,数据存储器分为JsonStore,SimpleStore,GroupingStrore等

2.制作一个表格

var grid = new Ext.grid.GridPanel({store : store,autoHeight : true,//自动高度//enableColumnMove : false,//不可拖动列//enableColumnResize : false,不可改变列宽度//stripeRows : true,//斑马线效果//loadMask : true,//笼罩提示信息columns : column,//列默认为100px,如果要自定义宽度,只需要设置该列的width属性即可//每列自动填满表格viewConfig : new Ext.grid.GridView({forceFit : true}),listeners : {'beforerender' : function(){store.load();}}
});
3.指定某一列自动延伸填充表格可以使用autoExpandColumn配置项,cm必须设置id 
var column = [{id:'ttt',header:'名称',dataIndex:'name'}
]
var grid = new Ext.grid.GridPanel({autoExpandColumn : 'ttt'
});
4.格式化数据集日期显示在列模型中 

<script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var data = [['1','李文超','李文超的描述','1985-01-15T02:08:04'],['2','范勇','范勇的描述','1986-01-15T02:08:04'],['3','马新军','马新军的描述','1987-01-15T02:08:04'],['4','常高军','常高军的描述','1988-01-15T02:08:04'],['5','何卫国','何卫国的描述','1989-01-15T02:08:04']];var store = new Ext.data.Store({proxy : new Ext.data.MemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},/*type告诉reader在解析原始数据时把对应的列做为日期类型处理dateFormat属性把得到的字符串转化为相应的日期格式*/{name : 'date',mapping:3,type:'date',dateFormat:'Y-m-dTH:i:s'},])});var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{	header:'日期',dataIndex:'date',width:200,//该函数的作用是渲染日期格式renderer: Ext.util.Format.dateRenderer('Y年m月d日')}]);var grid = new Ext.grid.GridPanel({store : store,cm : cm,listeners : {'beforerender' : function(){store.load();}}});new Ext.Viewport({layout:'fit',items: [grid]});});
</script>

 5.表格渲染

公共部分

var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex',renderer: renderSex}
]);

简单渲染:

function renderSex(value){if('male'==value){return "<span style='color:red'>男</span><img src='<%=rootpath%>/image/boy.jpg'/>"}else{return "<span style='color:green'>女</span><img src='<%=rootpath%>/image/girl.jpg'/>"}
}

复杂渲染:

/*value : 将要显示的单元格的值cellmeta : 单元格的相关属性,主要有id和CSSrecord : 这行数据对象,如果需要获取其他列的值,可以通过record.data['id']的方式获得rowIndex : 行号,这里的行号指的是当前页面中所有记录的顺序columnIndex : 列号store : 构造表格时传递的ds
*/
function renderSex(value, cellmeta, record, rowIndex, colIndex, store){var str = "<input type ='button' value='详细信息' οnclick='alert(\""+"这个单元格的值是: "+value+"\\n"+"这个单元格的配置是: {cellId: "+cellmeta.cellId+",id: "+cellmeta.id+",css: "+cellmeta.css+"}\\n"+"这个单元格对应的行是: "+record+",一行的数据都在里边\\n"+"这是第"+rowIndex+"行\\n"+"这是第"+colIndex+"列\\n"+"这个表格对应的Ext.data.Store在这里: "+store+",随便用吧"+"\")'/>";return str;
}

7.在grid中删除record和增加record

var grid = new Ext.grid.GridPanel({store : store,clicksToEdit: 1,//要转换单元格为编辑状态所需的鼠标点击数cm : cm,sm : sm,tbar : new Ext.Toolbar({items : ['-',{text: '添加一行',handler : function(){var p = new myRecord({id : '',name : '',descn: '',sex : ''});grid.stopEditing();//停止任何激活的行为store.insert(0,p);//触发添加事件时插入records到指定的store位置grid.startEditing(0,0);//指定的行/列，进行单元格内容的编辑}},'-',{text: '删除一行',handler : function(){Ext.Msg.confirm('信息','确认删除?',function(btn){if(btn == 'yes'){var record = store.getAt(0);store.remove(record);grid.view.refresh();//刷新表格的视图}});}}]})
});

8.表格视图Ext.grid.GridView 
Ext的表格控件都遵守MVC模型
Ext.data.Store可以看作Model
Ext.grid.GridPanel可以看作controller
Ext.grid.GridView可以看作view
通常情况,ext.grid.GridView的实例不需要自行创建,controller会自动生成
当希望操作Ext.grid.GridView的属性时,可以通过grid.getView()函数来获取当前表格的视图实例

默认情况下GridView显示为

修改grid

viewConfig : {columnsText : 'column',scrollOffset : 30,//表格右侧为滚动条预留的宽度sortAscText : 'asc',sortDescText : 'desc'
}
修改后的

9.可编辑表格 Ext.grid.EditorGridPanel

var grid = new Ext.grid.EditorGridPanel({store : store,//要转换单元格为编辑状态所需的鼠标点击数clicksToEdit: 1,cm : new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),sm,{header:'编号',dataIndex:'id',editor : new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank : false}))},{header:'名称',dataIndex:'name',editor : new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank : false}))}]),sm : sm
});

10.属性表格控件 Ext.grid.PropertyGrid

 根据name获取value

var value = grid.store.getById('name').get('value');

效果图

代码 
<script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var grid = new Ext.grid.PropertyGrid({title: '属性表格',autoHeight: true,width: 300,renderTo: 'grid',viewConfig: {forceFit: true},source: {"名字": "不告诉你","创建时间": new Date(Date.parse('12/15/2007')),"是否有效": false,"版本号": .01,"描述": "嗯，估计没啥可说的"}});});
</script>
10.1禁用Ext.grid.PropertyGrid编辑功能通过监听器来实现 
grid.on("beforeedit", function(e){e.cancel = true;return false;
});
10.2Ext.grid.PropertyGrid自身有两列name和value,默认根据nane排序,我们可以修改配置项initComponent,强制对name列进行排序 
Ext.MyPropertyGrid = Ext.extend(Ext.grid.PropertyGrid, {//自定义配置项autoSort:true,initComponent : function(){this.customRenderers = this.customRenderers || {};this.customEditors = this.customEditors || {};this.lastEditRow = null;var store = new Ext.grid.PropertyStore(this);this.propStore = store;var cm = new Ext.grid.PropertyColumnModel(this, store);//接受参数是否需要默认排序if(this.autoSort){store.store.sort('name', 'ASC');}this.addEvents('beforepropertychange','propertychange');this.cm = cm;this.ds = store.store;Ext.grid.PropertyGrid.superclass.initComponent.call(this);this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){if(colIndex === 0){this.startEditing.defer(200, this, [rowIndex, 1]);return false;}}, this);}
});var grid = new Ext.MyPropertyGrid({title : '表格标题',autoHeight : true,width : 400,//这里传参数autoSort : false,renderTo : 'lwc',//JSON指定了一组key和valuesource : {'名' : 'tom','姓' : 'cat','性别' : 'boy','年龄' : '18'}
});

10.3自定义编辑器

<script type="text/javascript" defer>  Ext.onReady(function(){  var grid = new Ext.grid.PropertyGrid({title: '属性表格',autoHeight: true,width: 300,renderTo: 'grid',customEditors: {'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))},source: {'Start Time': '10:00 AM'}}); });  
</script>

11.表格右键菜单

contextmenu (Ext.EventObject e) 全局性右键事件
cellcontextmenu (Grid this,Number rowIndex,Number cellIndex,Ext.EventObject e) 单元格上的右键事件
rowcontextmenu(Grid this,Number rowIndex,Ext.EventObject e) 行上右键事件
headercontextmenu(Grid this,Number columnIndex,Ext.EventObject e) 表头右键事件
var contextmenu = new Ext.menu.Menu({items : [{text : '查看详细',handler : function(){}}]});var grid = new Ext.grid.GridPanel({renderTo : 'grid',autoHeight : true,store : store,cm : cm,listeners : {rowcontextmenu : function(grid,rowIndex,e){e.preventDefault();//返回grid的SelectionModelvar rowSelectionModel = grid.getSelectionModel();//选取这一行rowSelectionModel.selectRow(rowIndex);//获取事件的页面坐标var array = e.getXY()//在指定的位置显示该菜单contextmenu.showAt(array);}}
});

12.分组表格视图

我们可以通过grid.getView()获取Ext.grid.GroupingView的实例,进行对视图的操作
代码 
var data = [['1','李文超','李文超的描述','male'],['2','范勇','范勇的描述','female'],['3','马新军','马新军的描述','male'],['4','常高军','常高军的描述','female'],['5','何卫国','何卫国的描述','male']
];
var store = new Ext.data.GroupingStore({proxy : new Ext.data.MemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},{name : 'sex',mapping:3},]),groupField : 'sex',sortInfo : {field : 'id',//排序的属性deirection : 'asc' //排序的方式}
});
store.load();
var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex'}
]);
var grid = new Ext.grid.GridPanel({store : store,view : new Ext.grid.GroupingView(),cm : cm,tbar : [{text : 'expand',handler : function(btn) {var groupingView = grid.getView();groupingView.expandAllGroups()//展开所有分组}},{text : 'collapse',handler : function(btn) {var groupingView = grid.getView();groupingView.collapseAllGroups();//折叠所有分组}},{text : 'toggle',handler : function(btn) {var groupingView = grid.getView();//会自动判断分组的状态,展开的时候折叠,折叠的时候展开groupingView.toggleAllGroups();}},{text : 'toggle one',handler : function(btn) {var groupingView = grid.getView();//只展开femalevar groupId = groupingView.getGroupId('female');groupingView.toggleGroup(groupId);}}]
});
new Ext.Viewport({layout:'fit',items: [grid]
});
13.拖放表格
13.1拖放改变表格的大小Ext.Resizable()
效果图

代码 
<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/><script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script><script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var data = [['1','李文超','李文超的描述','male'],['2','范勇','范勇的描述','female'],['3','马新军','马新军的描述','male'],['4','常高军','常高军的描述','female'],['5','何卫国','何卫国的描述','male']];var store = new Ext.data.Store({proxy : new Ext.data.MemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},{name : 'sex',mapping:3},])});store.load();var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex'}]);var grid = new Ext.grid.GridPanel({renderTo : 'grid',store : store,cm : cm});var rz = new Ext.Resizable(grid.getEl(),{wrap : true,//构造Resizable时自动在指定id的外边包裹一层div,这样就不要定义其他附属的div了minHeight : 100,//限制改变大小的高度pinned : true,//控制拖动区域的显示状态,true表示会一直在表格下方,false,只有鼠标悬停在可拖拽区域上方时出现handles : 's' //东 南 西 北})//注册事件,在拖放完成之后表格会调用syncSize方法修改自己的大小,第三个参数是函数执行的scope//syncSize 强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度rz.on('resize',grid.syncSize,grid); });</script></head><body><div id = 'grid'></div></body>
</html>
13.2在同一个表格里拖放
效果图

代码 
<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/><script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script><script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var data = [['1','李文超','李文超的描述','male'],['2','范勇','范勇的描述','female'],['3','马新军','马新军的描述','male'],['4','常高军','常高军的描述','female'],['5','何卫国','何卫国的描述','male']];var store = new Ext.data.Store({proxy : new Ext.data.MemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},{name : 'sex',mapping:3},])});store.load();var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex'}]);var grid = new Ext.grid.GridPanel({renderTo : 'grid',autoHeight : true,store : store,cm : cm,enableDragDrop : true //对表格内置拖放支持 });//一个简单的基础类,该实现使得任何元素变成为可落下的目标,以便让拖动的元素放到其身上var ddrow = new Ext.dd.DropTarget(grid.container,{ddGroup : 'GridDD',copy : false,//拖放以后是执行裁剪操作还是复制,false拖过去以前数据不见了,true拖过去原来数据不会变化//拖动事件notifyDrop : function(dd,e,data){//选中了多少行var rows = data.selections;//拖动到第几行var index = dd.getDragData(e).rowIndex;if(typeof(index) == 'undefined'){return;}//修改storefor(i = 0 ;i <rows.length;i++){var rowData = rows[i];if(!this.copy){store.remove(rowData);store.insert(index,rowData);}}}});});</script></head><body><div id = 'grid'></div></body>
</html>




这篇关于Extjs-表格 Ext.grid.GridPanel的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/701638。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
如何利用Python实现给Excel表格截图

如何利用Python实现给Excel表格截图

《如何利用Python实现给Excel表格截图》这篇文章主要为大家详细介绍了如何利用Python实现给Excel表格截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 我搜索了网络上的方案，感觉把 Excel 表格转换为 html 再用 platwright 截图是比China编程较顺
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2