Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 1257|回复: 0

[默认分类] JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2020-8-16 17:51:46 | 显示全部楼层 |阅读模式
    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table
    本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html
    一、x-editable组件介绍
    x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、Jquery UI、Jquery。大致效果如下图:

    根据博主一贯的风格,这里肯定是选用第一种喽。首先还是给出开源地址吧。
    x-editable开源地址:https://github.com/vitalets/x-editable
    x-editable文档地址:http://vitalets.github.io/x-editable/docs.html
    x-editable在线Demo:http://vitalets.github.io/x-editable/demo-bs3.html
    1、x-editable初体验。
    首先下载基于bootstrap的源码到本地。引用相关文件。

    1. <link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    2. <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
    3. <script src="/Scripts/jquery-1.9.1.min.js"></script>
    4. <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
    5. <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
    复制代码


    页面元素

    1. <a href="#" id="username" data-type="text" data-title="用户名">用户名</a>
    复制代码


    js初始化

    1.     $(function () {
    2.         $("#username").editable();
    3.     });
    复制代码


    效果展示

    上面是通过HTML的data属性去设置x-editable的参数,当然,我也可以在初始化的时候去设置参数,比如,我仅仅给一个空的a标签:

    1. <a href="#" id="username">用户名</a>
    复制代码


    js初始化

    1.     $(function () {
    2.         $("#username").editable({
    3.             type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等
    4.             title: "用户名",              //编辑框的标题
    5.             disabled: false,             //是否禁用编辑
    6.             emptytext: "空文本",          //空值的默认文本
    7.             mode: "inline",              //编辑框的模式:支持popup和inline两种模式,默认是popup
    8.             validate: function (value) { //字段验证
    9.                 if (!$.trim(value)) {
    10.                     return "不能为空";
    11.                 }
    12.             }
    13.         });
    14.     });
    复制代码


    查看效果

    再来个稍微复杂一点的

    1. <a href="#" id="department">选择部门</a>
    复制代码



    1.     $(function () {
    2.         $("#department").editable({
    3.             type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等
    4.             source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],
    5.             title: "选择部门",           //编辑框的标题
    6.             disabled: false,           //是否禁用编辑
    7.             emptytext: "空文本",       //空值的默认文本
    8.             mode: "popup",            //编辑框的模式:支持popup和inline两种模式,默认是popup
    9.             validate: function (value) { //字段验证
    10.                 if (!$.trim(value)) {
    11.                     return "不能为空";
    12.                 }
    13.             }
    14.         });
    15.     });
    复制代码


    查看效果

    上文只是给出了一些常用字段,当然x-editable组件还有很多其他的功能参数,有兴趣可以看看文档,官方文档对每个参数都有详细的说明。  
    二、bootstrapTable行内编辑初始方案
    说了这么半天,上面的只是铺垫,我们最终是希望在bootstrapTable里面实现行内编辑。根据上面的规则,我们想要使用x-editable实现行内编辑,表格的单元格里面必须要有一个a标签,然后对a标签做x-editable的初始化。有了这个想法,我们按照这种思路先试试。
    引用相关文件

    1. <link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    2. <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
    3. <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    4. <script src="/Scripts/jquery-1.9.1.min.js"></script>
    5. <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
    6. <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
    7. <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    8. <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    复制代码


    bootstrapTable的相关初始化

    1. <script type="text/javascript">
    2.     var curRow = {};
    3.     $(function () {
    4.         $("#tb_user").bootstrapTable({
    5.             toolbar: "#toolbar",
    6.             idField: "Id",
    7.             pagination: true,
    8.             showRefresh: true,
    9.             search: true,
    10.             clickToSelect: true,
    11.             queryParams: function (param) {
    12.                 return {};
    13.             },
    14.             url: "/Editable/GetUsers",
    15.             columns: [{
    16.                 checkbox: true
    17.             }, {
    18.                 field: "UserName",
    19.                 title: "用户名",
    20.                 formatter: function (value, row, index) {
    21.                     return "<a href="#" name="UserName" data-type="text" data-pk=""+row.Id+"" data-title="用户名">" + value + "</a>";
    22.                 }
    23.             }, {
    24.                 field: "Age",
    25.                 title: "年龄",
    26.             }, {
    27.                 field: "Birthday",
    28.                 title: "生日",
    29.                 formatter: function (value, row, index) {
    30.                     var date = eval("new " + eval(value).source)
    31.                     return date.format("yyyy年MM月dd日");
    32.                 }
    33.             },
    34.             {
    35.                 field: "DeptName",
    36.                 title: "部门"
    37.             }, {
    38.                 field: "Hodd",
    39.                 title: "爱好"
    40.             }],
    41.             onClickRow: function (row, $element) {
    42.                 curRow = row;
    43.             },
    44.             onLoadSuccess: function (aa, bb, cc) {
    45.                 $("#tb_user a").editable({
    46.                     url: function (params) {
    47.                         var sName = $(this).attr("name");
    48.                         curRow[sName] = params.value;
    49.                         $.ajax({
    50.                             type: "POST",
    51.                             url: "/Editable/Edit",
    52.                             data: curRow,
    53.                             dataType: "JSON",
    54.                             success: function (data, textStatus, jqXHR) {
    55.                                 alert("保存成功!");
    56.                             },
    57.                             error: function () { alert("error");}
    58.                         });
    59.                     },
    60.                     type: "text"
    61.                 });
    62.             },
    63.         });
    64.     });</script>
    复制代码


    后台方法



      
    1. public JsonResult GetUsers()
    2.         {
    3.             var lstRes = new List<User>();
    4.             lstRes.Add(new User() { Id = "1", UserName = "张三", Age = 22, Birthday = Convert.ToDateTime("1994-12-21"), DeptId = "1", DeptName = "研发部" });
    5.             lstRes.Add(new User() { Id = "2", UserName = "李四", Age = 28, Birthday = Convert.ToDateTime("1988-09-09"), DeptId = "2", DeptName = "销售部" });
    6.             lstRes.Add(new User() { Id = "3", UserName = "风衣大叔", Age = 40, Birthday = Convert.ToDateTime("1976-09-01"), DeptId = "2", DeptName = "销售部" });
    7.             lstRes.Add(new User() { Id = "4", UserName = "闪电大虾", Age = 37, Birthday = Convert.ToDateTime("1979-03-12"), DeptId = "4", DeptName = "创意部" });
    8.             lstRes.Add(new User() { Id = "5", UserName = "韩梅梅", Age = 29, Birthday = Convert.ToDateTime("1987-05-01"), DeptId = "5", DeptName = "事业部" });
    9.             return Json(lstRes, JsonRequestBehavior.AllowGet);
    10.         }
    11.         public JsonResult Edit(User user)
    12.         {
    13.             //反序列化之后更新
    14.             return Json(new { }, JsonRequestBehavior.AllowGet);
    15.         }
    复制代码

      
    后台测试方法


    这样确实是可以实现想要的效果,貌似也能行内编辑了,可是如果没个列都需要行内编辑,并且列的个数很多,那么是不是每个列都得这样去formmater?并且这种写法狠显然很死板,博主着实难以接受。于是又找了找例子,发现在bootstrapTable的扩展里面存在bootstrap-table-editable.js这个js。
    三、bootstrapTable行内编辑最终方案
    好吧,博主承认,上面还是铺垫,因为博主觉得这可能是解决问题的一般思路,所以将这些铺垫的篇幅可能有点多。首先来看看bootstrap-table-editable.js这个文件



      
    1. /**
    2. * @author zhixin wen <wenzhixin2010@gmail.com>
    3. * extensions: https://github.com/vitalets/x-editable
    4. */
    5. !function ($) {
    6.     "use strict";
    7.     $.extend($.fn.bootstrapTable.defaults, {
    8.         editable: true,
    9.         onEditableInit: function () {
    10.             return false;
    11.         },
    12.         onEditableSave: function (field, row, oldValue, $el) {
    13.             return false;
    14.         },
    15.         onEditableShown: function (field, row, $el, editable) {
    16.             return false;
    17.         },
    18.         onEditableHidden: function (field, row, $el, reason) {
    19.             return false;
    20.         }
    21.     });
    22.     $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
    23.         "editable-init.bs.table": "onEditableInit",
    24.         "editable-save.bs.table": "onEditableSave",
    25.         "editable-shown.bs.table": "onEditableShown",
    26.         "editable-hidden.bs.table": "onEditableHidden"
    27.     });
    28.     var BootstrapTable = $.fn.bootstrapTable.Constructor,
    29.         _initTable = BootstrapTable.prototype.initTable,
    30.         _initBody = BootstrapTable.prototype.initBody;
    31.     BootstrapTable.prototype.initTable = function () {
    32.         var that = this;
    33.         _initTable.apply(this, Array.prototype.slice.apply(arguments));
    34.         if (!this.options.editable) {
    35.             return;
    36.         }
    37.         $.each(this.columns, function (i, column) {
    38.             if (!column.editable) {
    39.                 return;
    40.             }
    41.             var _formatter = column.formatter;
    42.             column.formatter = function (value, row, index) {
    43.                 var result = _formatter ? _formatter(value, row, index) : value;
    44.                 return ["<a href="javascript:void(0)"",
    45.                     " data-name="" + column.field + """,
    46.                     " data-pk="" + row[that.options.idField] + """,
    47.                     " data-value="" + result + """,
    48.                     ">" + "</a>"
    49.                 ].join("");
    50.             };
    51.         });
    52.     };
    53.     BootstrapTable.prototype.initBody = function () {
    54.         var that = this;
    55.         _initBody.apply(this, Array.prototype.slice.apply(arguments));
    56.         if (!this.options.editable) {
    57.             return;
    58.         }
    59.         $.each(this.columns, function (i, column) {
    60.             if (!column.editable) {
    61.                 return;
    62.             }
    63.             that.$body.find("a[data-name="" + column.field + ""]").editable(column.editable)
    64.                 .off("save").on("save", function (e, params) {
    65.                     var data = that.getData(),
    66.                         index = $(this).parents("tr[data-index]").data("index"),
    67.                         row = data[index],
    68.                         oldValue = row[column.field];
    69.                     row[column.field] = params.submitValue;
    70.                     that.trigger("editable-save", column.field, row, oldValue, $(this));
    71.                 });
    72.             that.$body.find("a[data-name="" + column.field + ""]").editable(column.editable)
    73.                 .off("shown").on("shown", function (e, editable) {
    74.                     var data = that.getData(),
    75.                         index = $(this).parents("tr[data-index]").data("index"),
    76.                         row = data[index];
    77.                     
    78.                     that.trigger("editable-shown", column.field, row, $(this), editable);
    79.                 });
    80.             that.$body.find("a[data-name="" + column.field + ""]").editable(column.editable)
    81.                 .off("hidden").on("hidden", function (e, reason) {
    82.                     var data = that.getData(),
    83.                         index = $(this).parents("tr[data-index]").data("index"),
    84.                         row = data[index];
    85.                     
    86.                     that.trigger("editable-hidden", column.field, row, $(this), reason);
    87.                 });
    88.         });
    89.         this.trigger("editable-init");
    90.     };
    91. }(jQuery);
    复制代码

      
    bootstrap-table-editable.js

    这个js其实是对x-editable做了一个简单的封装,增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础,于是我们行内编辑的代码变成了这样。
    需要引用的文件如下:

    1. <link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    2. <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
    3. <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    4. <script src="/Scripts/jquery-1.9.1.min.js"></script>
    5. <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
    6. <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
    7. <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    8. <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    9. <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
    复制代码


    1、文本框

    1.   $(function () {
    2.         $("#tb_user").bootstrapTable({
    3.             toolbar: "#toolbar",
    4.             idField: "Id",
    5.             pagination: true,
    6.             showRefresh: true,
    7.             search: true,
    8.             clickToSelect: true,
    9.             queryParams: function (param) {
    10.                 return {};
    11.             },
    12.             url: "/Editable/GetUsers",
    13.             columns: [{
    14.                 checkbox: true
    15.             }, {
    16.                 field: "UserName",
    17.                 title: "用户名",
    18.                 editable: {
    19.                     type: "text",
    20.                     title: "用户名",
    21.                     validate: function (v) {
    22.                         if (!v) return "用户名不能为空";
    23.                     }
    24.                 }
    25.             }, {
    26.                 field: "Age",
    27.                 title: "年龄",
    28.             }, {
    29.                 field: "Birthday",
    30.                 title: "生日",
    31.                 formatter: function (value, row, index) {
    32.                     var date = eval("new " + eval(value).source)
    33.                     return date.format("yyyy-MM-dd");
    34.                 }
    35.             },
    36.             {
    37.                 field: "DeptName",
    38.                 title: "部门"
    39.             }, {
    40.                 field: "Hobby",
    41.                 title: "爱好"               
    42.             }],
    43.             onEditableSave: function (field, row, oldValue, $el) {
    44.                 $.ajax({
    45.                     type: "post",
    46.                     url: "/Editable/Edit",
    47.                     data: row,
    48.                     dataType: "JSON",
    49.                     success: function (data, status) {
    50.                         if (status == "success") {
    51.                             alert("提交数据成功");
    52.                         }
    53.                     },
    54.                     error: function () {
    55.                         alert("编辑失败");
    56.                     },
    57.                     complete: function () {
    58.                     }
    59.                 });
    60.             }
    61.         });
    62.     });
    复制代码


    后台对应的更新方法

    1.         public JsonResult Edit(User user)
    2.         {
    3.             //更新实体
    4.             return Json(new { }, JsonRequestBehavior.AllowGet);
    5.         }
    复制代码


    经过测试,用户名这一列基本可以自由编辑。同样,年龄这一列也可改成这样

    1.         {
    2.                 field: "Age",
    3.                 title: "年龄",
    4.                 editable: {
    5.                     type: "text",
    6.                     title: "年龄",
    7.                     validate: function (v) {
    8.                         if (isNaN(v)) return "年龄必须是数字";
    9.                         var age = parseInt(v);
    10.                         if (age <= 0) return "年龄必须是正整数";
    11.                     }
    12.                 }
    13.             }
    复制代码


    其他基本不用做任何修改。
    代码释疑:上文在初始化的columns属性里面通过editable属性来配置可编辑的参数,注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象,也就是说我们初始化x-editable的时候可以配置哪些属性,在列的editable属性里面也可以同样配置,这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。
    2、时间选择框
    有了上面的知识作为基础,我们来初始化生日这一列:

    1.             {
    2.                 field: "Birthday",
    3.                 title: "生日",
    4.                 formatter: function (value, row, index) {
    5.                     var date = eval("new " + eval(value).source)
    6.                     return date.format("yyyy-MM-dd");
    7.                 },
    8.                 editable: {
    9.                     type: "date",
    10.                     title: "生日"
    11.                 }
    12.             }
    复制代码


    其他地方不用做任何修改,得到效果:

    这是x-editable的默认样式,如果你看着不爽,可以自行配置,x-editable提供了许多配置日期框的参数,如下:

    当然,如果精确到时分秒,可以使用datetime类型的编辑框。如下是官方给出的时间框编辑效果,看着还不错。


    3、下拉框
    表单编辑里面还有一个重要的标签就是select了。上文我们知道x-editable为我们提供了下拉框的编辑模式,比如我们的部门这一列的编辑可以写成这样:

    1.         {
    2.                 field: "DeptId",
    3.                 title: "部门",
    4.                 editable: {
    5.                     type: "select",
    6.                     title: "部门",
    7.                     source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
    8.                 }
    9.             }
    复制代码


    得到效果

    当然,这种本地设置数据源的方法肯定是不能满足我们需求的,因为很多情况下拉框里面的选项是从数据库远程得到的。当然x-editable也为我们考虑到了,比如我们可以这样写:

    1.         {
    2.                 field: "DeptId",
    3.                 title: "部门",
    4.                 editable: {
    5.                     type: "select",
    6.                     title: "部门",
    7.                     source: function () {
    8.                         var result = [];
    9.                         $.ajax({
    10.                             url: "/Editable/GetDepartments",
    11.                             async: false,
    12.                             type: "get",
    13.                             data: {},
    14.                             success: function (data, status) {
    15.                                 $.each(data, function (key, value) {
    16.                                     result.push({ value: value.ID, text: value.Name });
    17.                                 });
    18.                             }
    19.                         });
    20.                         return result;
    21.                     }
    22.                 }
    23.             }
    复制代码


    后台我们配置一个方法

    1.         public JsonResult GetDepartments()
    2.         {
    3.             var lstRes = new List<Department>();
    4.             lstRes.Add(new Department() { ID = "1", Name = "研发部" });
    5.             lstRes.Add(new Department() { ID = "2", Name = "销售部" });
    6.             lstRes.Add(new Department() { ID = "3", Name = "行政部" });
    7.             lstRes.Add(new Department() { ID = "4", Name = "创意部" });
    8.             lstRes.Add(new Department() { ID = "5", Name = "事业部" });
    9.             return Json(lstRes, JsonRequestBehavior.AllowGet);
    10.         }
    复制代码


    同样能达到我们想要的结果。
    代码释疑:这里有一点需要说明一下,细心的园友可能发现了,我们这里的 field: "DeptId" ,为什么这里要配置DeptId而不是DeptName呢?很简单,因为我们需要和数据源里面的value值对应。
    4、复选框
    除了上述几种常见的编辑框,x-editable还为我们提供了复选框组的编辑。比如:

    1.        {
    2.                 field: "Hobby",
    3.                 title: "爱好",
    4.                 editable: {
    5.                     type: "checklist",
    6.                     separator:",",
    7.                     source: [{ value: "bsb", text: "篮球" },
    8.                          { value: "ftb", text: "足球" },
    9.                          { value: "wsm", text: "游泳" }],
    10.                 }
    11.             }
    复制代码


    得到效果:

    当然,如果远程数据,也可以使用类似上文的方法去取。
    5、“阴魂不散”的select2
    说到上文的复选框,博主不由自主又想到了Multiselect这些个东西,于是查找x-editable的文档,结果发现它不支持Multiselect,但是支持select2,也不知道这是不是一个好消息。根据博主自己的使用经历,也包括技术交流群里面的聊天经历,发现很多人在使用select2的时候都遇到过各种各样的样式问题,并且不太好解决。
    既然x-editable支持select2,那我们就用用试试呗,反正官方demo说得挺好的,下面是官方demo的使用示例:

    怀着忐忑的心情,博主自己尝试了一把。
    引用select2文件

    1. <link href="~/Content/select2-bootstrap.css" rel="stylesheet" />
    2. <link href="~/Content/select2-master/dist/css/select2.min.css" rel="stylesheet" />
    3. <script src="~/Content/select2-master/dist/js/select2.full.min.js"></script>
    复制代码


    代码尝试

    1.         {
    2.                 field: "Hobby",
    3.                 title: "爱好",
    4.                 editable: {
    5.                     type: "select2",
    6.                     title: "爱好",
    7.                     name: "Hobby",
    8.                     placement: "top",
    9.                     success: function (response, newValue) {
    10.                         debugger;
    11.                     },
    12.                     error: function(response, newValue) {
    13.                         debugger;
    14.                     },
    15.                     url: function(params) {
    16.                         debugger;
    17.                     },
    18.                     source: [{ id: "bsb", text: "篮球" },
    19.                              { id: "ftb", text: "足球" },
    20.                              { id: "wsm", text: "游泳" }],
    21.                     inputclass: "input-large",
    22.                     select2: {
    23.                         allowClear: true,
    24.                         multiple: true,
    25.                     }
    26.                 }
    27.             }
    复制代码


    得到结果:

    结果发现select2的选中值不能正常传递到后台。反正博主试过各种参数,按照官方demo的写法也试过,均以失败告终。也不知道官方的demo如何成功的。这个问题先抛出来,如果有使用的园友欢迎指正与解答。后续如果博主解决了这个问题,也会在此更新。  
    四、总结
    还有一个问题就是在编辑完成提交之后,博主在项目中遇到这样一个问题:如果提交之后的文本内容过多,表格的thead里面th的宽度和tbody里面td的宽度不对其的问题,看着相当恶心。但是在写demo的时候又没有遇到这个问题。在此还是将解决方案给出来。

    就这么一句话解决你的困扰!
    本篇介绍了下bootstrapTable结合x-editable实现行内编辑的使用。文中很多问题都是根据博主的使用经历来说明,如果你打算将它用起来,也可以试试。如果本文能够帮到你,欢迎推荐
    本文原创出处:http://www.cnblogs.com/landeanfen/
    欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-29 04:47 , Processed in 0.362278 second(s), 46 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表