table表格内容互换

最新推荐文章于 2024-06-24 22:36:42 发布
最新推荐文章于 2024-06-24 22:36:42 发布
阅读量1.2k 收藏 2
点赞数
文章标签： javascript json ViewUI
原文链接：https://juejin.im/post/5b6aa5e05188251b1d478789
版权

以下为项目实现效果：

图表运用了bootstrap-table，左右两边的表格可以进行内容交换，可全选，可搜索。

以下附上代码：

areaSite.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>地区站点</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-table.min.css" />
    <!--页面特有css-->
    <link rel="stylesheet" type="text/css" href="../css/areaSite.css" />
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="../js/Transfer2.js"></script>
    <!--页面特有js-->
    <script type="text/javascript" src="../js/areaSite.js"></script>
</head>
<body>
<div class="instrumentLogCon">
    <div id="tran"></div>
    <div class="save-box">
        <a href="javascript:;" class="determine" id="save">保存</a>
    </div>
</div>          
</body>
</html>复制代码


areaSite.css

.instrumentLogCon {
  width:70%;
  padding:20px;
  border: 1px solid #dcdcdc;
}
.area {
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#tran {
  width: 100%;
  height: 400px;
}
.transferBox {
  height: 100%;
}
.shuttleBtn {
  height: 100%;
}
.transferBtn .btn {
  display: block;
}
.transferBtn .btn:first-child {
  margin-bottom: 20px;
}
.transferBtn .btnList {
  position: absolute;
  width: 80%;
  top: 50%;
  margin-top: -40px;
}
.transferBox .search {
  width: 100%;
}
.transferBtn .btn-default,
.btn-info {
  width: 74px;
  height: 34px;
  color: white;
  text-shadow: none;
  border: 0;
  cursor: no-drop;
  background: #30b0fd;
  background: -moz-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);
  background: -webkit-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);
  background: linear-gradient(to right, #30b0fd 0%, #1f94f3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30b0fd', endColorstr='#1f94f3', GradientType=1);
}
.btn-info {
  cursor: pointer;
}
.fixed-table-container {
  min-height: 302px!important;
  padding-bottom: 41px!important;
  border: 0;
}
.bootstrap-table .table > thead > tr > th {
  border-bottom: 0;
}
.unselectTitle,
.selectTitle {
  padding: 10px 0 0 0!important;
}
.save-box {
  text-align: center;
  margin-top: 40px;
}
.fixed-table-container thead th:first-child:not([data-not-first-th]),
.fixed-table-container tbody td:first-child {
  border-left: 1px solid #ededed;
}
.unselectTitle,
.selectTitle {
  margin-bottom: 10px !important;
  font-size: 18px;
}
#save{
  display: inline-block;
    width: 90px;
    height: 40px;
    background: #30b0fd;
    background: -moz-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);
    background: -webkit-linear-gradient(left, #30b0fd 0%, #1f94f3 100%);
    background: linear-gradient(to right, #30b0fd 0%, #1f94f3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30b0fd', endColorstr='#1f94f3', GradientType=1);
    font-size: 16px;
    color: white;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
} 复制代码


areaSite.js

$(document).ready(function(){
    // 常规配置方式和区域配置方式切换
    $(".dataAndLongRange span").click(function(){
        $(this).addClass("selected").siblings("span").removeClass("selected").parent().siblings(".dataAndLongRangeCon").children("div").eq($(this).index()).addClass("selected").siblings().removeClass("selected");
    })
    var data = [
        {
        "importUnitId": '1',
        "importUnitName": "站点1",
        "flag": false
        },
        {
            "importUnitId": '2',
            "importUnitName": "站点2",
            "flag": false
        },
        {
            "importUnitId": '3',
            "importUnitName": "站点3",
            "flag": false,
        },
        {
            "importUnitId": '4',
            "importUnitName": "站点4",
            "flag": false
        },
        {
            "importUnitId": '5',
            "importUnitName": "站点5",
            "flag": true
        },
        {
            "importUnitId": '6',
            "importUnitName": "站点6",
            "flag": true
        }
    ]

    transfer(data)

    // 保存
    $('#save').click(function () {
        var data= $('#tran').transfer('getData', 'selectData', 'importUnitId');
        console.log(data)
    })
});

// 给穿梭框赋值
function transfer(data) {
    // 销毁实例
    $('#tran').transfer('destroy')
    // 重新渲染
    $('#tran').transfer({
        titles: ['无权限站点列表', '已有权限站点列表'],
        search: true,
        uniqueId: "importUnitId",//唯一id
        dataSource: data,
        maxSelect: 6,
        diffKey: 'flag',
        unselectColumns: [{
            field: 'flag',
            checkbox: true
        },
            {
                field: 'importUnitName',
                title: '站点列表'
            }
        ]
    });
}复制代码


transfer2.js

(function ($, window, document) {
    var transfer = function (el, options) {
        this.option = options;
        this.$el = $(el);
        this.selectData=[];
        this.unselectData=[];
        this.init();
    };
    transfer.DEFAULTS = {
        titles:['待选列表','已选列表'],
        search: true,///是否显示搜索查询
        showRefresh: false,//
        clickToSelect: true,
        pagination: false,//是否支持分页
        autoHeight:false,
        paginationDetail:false,
        maxSelect:undefined,
        uniqueId: "",//每行的id
        dataSource:[],//默认数据源为同一个  内部会通过diffKey去区分是待选框的  还是已选框的数据，如果selectdataSource存在  则或解析为待选数据框里的数据
        selectdataSource:undefined,
        diffKey:'flag',
        selectColumns:[],
        unselectColumns:[]

    };
    transfer.prototype = {
        init: function () {
            this.initoption();
            this.initContainer();
            this.initBothTable();
            this.classifyData();
            this.initEvent();
        },
        /*
        * 渲染穿梭框页面结构*/
        initContainer: function () {
            var _this=this;
          var  containerHtml=['<div class="col-sm-5 transferBox">',
            '<h3 class="unselectTitle" style="margin: 0;padding: 5px 0 10px 0;">'+this.unselectTitle+'<span style="margin-left: 5px;">(<span id="checkedNum1"></span><span id="unselectTotalNum"></span>)</span></h3>',
            '<table id="transferUnselectTable"></table>',
            '</div>',
            '<div class="col-sm-1 transferBtn" style="height: 100%">',
            '<div class="btnList">',
            '<span class="btn btn-default  forwardBtn" >添加 >></span>',
            '<span class="btn btn-default  backwardBtn" ><< 移出</span>',
            '</div>',
            '</div>',
            '<div class="col-sm-5 transferBox">',
            '<h3 class="selectTitle" style="margin: 0;padding: 5px 0 10px 0;">'+this.selectTitle+'<span style="margin-left: 5px;">(<span id="checkedNum2"></span><span id="selectTotalNum"></span>)</span></h3>',
            '<table id="transferSelectTable"></table>',
            '</div>'].join('');
            this.$el.html(containerHtml);
            this.$unselectTable=this.$el.find('#transferUnselectTable');//待选表格
            this.$unselectTotalNum=this.$el.find('#unselectTotalNum');//存放待选表格内总的数量
            this.$checkedNum1=this.$el.find('#checkedNum1');//存放待选表格中已勾选的数量
            this.$forwardBtn=this.$el.find('.forwardBtn');//向待选表格内添加的按钮

            this.$selectTable=this.$el.find('#transferSelectTable');//已选表格
            this.$selectTotalNum=this.$el.find('#selectTotalNum');//存放已选表格内总的数量
            this.$checkedNum2=this.$el.find('#checkedNum2');//存放已选表格中已勾选的数量
            this.$backwardBtn=this.$el.find('.backwardBtn');//向待选表格内添加的按钮
            this.option.height=this.$el.outerHeight()-this.$el.find('h3.unselectTitle').outerHeight()-8;
        },
        /*
        * 参数处理*/
        initoption:function(){
            /*
            * 两边标题参数处理*/
            if(typeof this.option.titles=='string'|| (this.option.titles instanceof Array&&this.option.titles.length==1)){
                this.selectTitle=this.unselectTitle=this.option.titles+'';
            }else if(this.option.titles instanceof Array&&this.option.titles.length>1){
                this.unselectTitle=this.option.titles[0];
                this.selectTitle=this.option.titles[1];
            }
             /*
            * 两个table渲染内容若一样，给任意一个columns即可*/
            if(this.option.selectColumns instanceof Array&&this.option.unselectColumns instanceof Array&&(!this.option.selectColumns.length&&this.option.unselectColumns.length)){
                this.option.selectColumns=JSON.parse(JSON.stringify(this.option.unselectColumns));
            }else if(this.option.selectColumns instanceof Array&&this.option.unselectColumns instanceof Array&&(this.option.selectColumns.length&&!this.option.unselectColumns.length)){
                this.option.unselectColumns=JSON.parse(JSON.stringify(this.option.selectColumns));
            }else if(!this.option.selectColumns instanceof Array||!this.option.unselectColumns instanceof Array){
                console.error('参数selectColumns和unselectColumns必须为数组');
                return false;
            }
            /*
            * 两边table两边渲染选中的field不能一样，此处强制替换了，参数中可不写field*/
            this.option.selectColumns[0].field=this.option.diffKey+'s';
            this.option.unselectColumns[0].field=this.option.diffKey;
         },
        /*
        * 从数据中挑出已选列表和待选列表的数据*/
         classifyData:function(){
             /*
              *数据源如果为同一个则通过diffKey去区分
               *  */
             if(!this.option.dataSource){console.error('dataSource参数为必填项，请检查');return false;}
               if(this.option.selectdataSource){
                 this.selectData=this.option.selectdataSource;
                 this.unselectData=this.option.dataSource;
             }else{
                 for(var i=0;i<this.option.dataSource.length;i++){
                     if(this.option.dataSource[i][this.option.diffKey]){
                         this.selectData.push(this.option.dataSource[i]);
                     }else{
                         this.unselectData.push(this.option.dataSource[i]);
                     }
                 }
             }
            this.refreshTable();
            this.showTotalNum();
        },
        /*
        * 当数据发生变化重新渲染表格*/
        refreshTable:function(){
            this.$unselectTable.bootstrapTable("load",this.unselectData);
            this.$selectTable.bootstrapTable("load",this.selectData);
        },
        /*
        * 当表格数据总量发生变化，相应改变其总数*/
        showTotalNum:function(){
            this.$unselectTotalNum.html(this.unselectData.length+'条');
            this.$selectTotalNum.html(this.selectData.length+'条');
        },
        /*
        * 初始化表格，开始是没有数据加入*/
        initBothTable:function(){
            var _this=this;
            this.$unselectBootstrapTable=this.$unselectTable.bootstrapTable({
                search: _this.option.search,
                showRefresh: _this.option.showRefresh,
                showToggle: false,
                showColumns: false,
                paginationDetail:_this.option.paginationDetail,
                clickToSelect: _this.option.clickToSelect,
                pagination: _this.option.pagination,
                sidePagination: 'client',
                autoHeight:false,
                height:_this.option.height,
                data:[],
                sortName: "createTime",
                sortOrder: "desc",
                uniqueId: _this.option.uniqueId,
                columns:_this.option.unselectColumns
            });
            this.$selectBootstrapTable=this.$selectTable.bootstrapTable({
                search: _this.option.search,
                showRefresh: _this.option.showRefresh,
                showToggle: false,
                paginationDetail:_this.option.paginationDetail,
                showColumns: false,
                clickToSelect: _this.option.clickToSelect,
                pagination: _this.option.pagination,
                autoHeight:false,
                height:_this.option.height,
                data:[],
                sortName: "createTime",
                sortOrder: "desc",
                uniqueId: _this.option.uniqueId,
                columns:_this.option.selectColumns
            });
            this.$selectBootstrapTable.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
                var num=_this.$selectTable.find('tr input[name="btSelectItem"]:checked').length;
                if(num){
                    _this.$backwardBtn.removeClass('btn-default').addClass('btn-info');
                    _this.$checkedNum2.html(num+'/');
                }else{
                    _this.$backwardBtn.removeClass('btn-info').addClass('btn-default');
                    _this.$checkedNum2.html('');
                }
            });
            this.$unselectBootstrapTable.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
                var num=_this.$unselectTable.find('tr input[name="btSelectItem"]:checked').length;
                if(num){
                    _this.$forwardBtn.removeClass('btn-default').addClass('btn-info');
                    _this.$checkedNum1.html(num+'/');
                }else{
                    _this.$forwardBtn.removeClass('btn-info').addClass('btn-default');
                    _this.$checkedNum1.html('');
                }
            });
        },
        /*
        * 请求数据*/
        initServer:function(){
            var _this=this;

            if(this.option.url){
                if(typeof this.option.url=='string'){
                    this.option.url=[this.option.url];
                }
                if(typeof this.option.type=='string'){
                    this.option.type=[this.option.type];
                }
               /* if(typeof this.option.queryParams=='string'){
                    this.option.queryParams=[this.option.queryParams];
                }*/
                    $.ajax({
                        url: _this.option.url[0],
                        type: _this.option.type[0],
                        data:_this.option.queryParams[0],
                        contentType: 'application/json', //对应后台的@RequestBody
                        success: function (res) {
                            if(res.success){

                            }
                        },
                        error: function (result) {

                        }
                    });

            }
        },
        /*
        * 初始化点击事件*/
        initEvent:function(){
            var _this=this;
            this.$forwardBtn.click(function(){
                _this.transferData($(this),1);
            });
            this.$backwardBtn.click(function(){
                _this.transferData($(this),0);
            });
        },
        /*
        * 获取选中行的id*/
        getSelect:function($tr){
            return  $.map($tr,function(ele,index){
                if($(ele).find('input[name="btSelectItem"]').is(':checked')){
                    return $(ele).attr("data-uniqueid");
                }
            });
        },
        /*
        * 两边数据穿梭逻辑
        * @params type：穿梭方向*/
        transferData:function($dom,type){
            var _this=this;
            if(!$dom.hasClass('btn-info')){
                return false;
            }
            if(type){
                var selectList=this.getSelect(this.$unselectTable.find('tbody tr'));
                if((this.option.maxSelect-0)&&typeof (this.option.maxSelect-0)=="number"){
                    var currenNum=selectList.length+this.selectData.length;
                    if(currenNum>this.option.maxSelect){
                        ns.failMsg(this.selectTitle+'最多只能存在'+this.option.maxSelect+'个，您选的太多了！');
                        return false;
                    }
                }
                for(var i=0;i<this.unselectData.length;i++){
                    if(selectList.indexOf(this.unselectData[i][this.option.uniqueId])>=0){
                        this.unselectData[i][this.option.selectColumns[0].field]=false;
                        this.selectData.push(this.unselectData[i]);
                        this.unselectData.splice(i,1);
                        i--;
                    }
                }
               this.refreshTable();
                this.$forwardBtn.removeClass('btn-info').addClass('btn-default');
                this.$checkedNum1.html('');
            }else{
                var selectList=this.getSelect(this.$selectTable.find('tbody tr'));
                for(var i=0;i<this.selectData.length;i++){
                    if(selectList.indexOf(this.selectData[i][this.option.uniqueId])>=0){
                        this.selectData[i][this.option.unselectColumns[0].field]=false;
                        this.unselectData.push(this.selectData[i]);
                        this.selectData.splice(i,1);
                        i--;
                    }
                }
                this.refreshTable();
               this.$backwardBtn.removeClass('btn-info').addClass('btn-default');
                this.$checkedNum2.html('');
            }
            this.showTotalNum();
        },
        /*
        * 暴露到外面的实例的方法，可返回两个表格内的数据集合
        * @params type： 必填 unselectData待选列表数据，selectData已选列表数据
        * @params arr: 非必填 若不存在直接返回源数据集合，若配置字段名则返回所需的字段集合*/
        getData:function(type,arr){
            if(!type){console.error('请填写想要返回的数据名称unselectData或selectData');return false;}
            if(arr&&typeof arr=='string'){
               return $.map(this[type],function(item,index){
                   return item[arr];
                });
            }else if(arr&&arr instanceof Array && arr.length>0){
                return $.map(this[type],function(item,index){
                    var obj={};
                    for(var i=0;i<arr.length;i++){
                        obj[arr[i]]=item[arr[i]];
                    }
                    return obj;
                });
            }else{
                return this[type];
            }
        },
         /*
        * 销毁实例*/
        destroy :function () {
            this.$el.html('');
        }
    }
    var allowedMethods = ['refresh','destroy','getData'];
    $.fn.transfer = function (option) {   //向jQuery注册插件
        var e = this, value,
            args = Array.prototype.slice.call(arguments, 1);
        e.each(function () {
            var $this = $(this),
                data = $this.data('transfer'),
                options = $.extend({}, transfer.DEFAULTS, $this.data(),
                    typeof option === 'object' && option);
            if (typeof option === 'string') {
                if ($.inArray(option, allowedMethods) < 0) {
                    throw new Error("Unknown method: " + option);
                }
                if (!data) {
                    return;
                }
                value = data[option].apply(data, args);

                if (option === 'destroy') {
                    $this.removeData('transfer');
                }
            }
            if (!data) {
                $this.data('transfer', (data = new transfer(this, options)));
            }
        });
        return typeof value === 'undefined' ? this : value;
    };
    $.fn.transfer.Constructor = transfer;
    $.fn.transfer.defaults = transfer.DEFAULTS;
    $.fn.transfer.methods = allowedMethods;
})(jQuery, window, document);        复制代码

剩下的bootstrap以及bootstrap-table的代码我就不放上来啦，需要的自行去官网下载哦~


weixin_33701617
关注
Vue 复杂json数据在el-table表格中展示（el-table分割数据）
一碗清深的博客
07-22 2327
一条复杂的json数据在el-table表格该怎么做展示？json数据最外层有4个数组，也就说一个el-table-column要分割成4个数据。
jquery 两个表格数据行交换数据
02-23
一个简单的 jquery 两个表格数据行交换数据的功能源码
行列互换
数据库天地
07-26 112
--&gt; --&gt; (Roy)生成測試數據 if not object_id('Class') is null drop table Class Go Create table Class([Student] nvarchar(2),[数学] int,[物理] int,[英语] int,[语文] int) Insert Class select N'李四',77,...
elementplus el-table(行列互换)转置
最新发布
qq_21138747的博客
06-24 677
【代码】elementplus el-table(行列互换)转置。
dataTable交换两行数据
rubychen410的专栏
05-15 1772
datarow dr = table.newrow();dr.ItemArray =table.rows[i].ItemArray ;table.rows[i].ItemArray = table.rows[i+1].ItemArray ;table.rows[i+1].ItemArray = dr.ItemArray ;
layui-表格穿梭-transferTable
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
elementUI-使用el-table自定义transfer组件
08-14
在elementUI中使用el-table自定义完成transfer组件功能。内有注释使用说明
table表格相关内容
箜的博客
12-15 1168
table表格1.宽度 width2.高度 height3.边框 border4.边框颜色 bordercolor5.背景颜色 bgcolor6.文字水平对齐 align=“left或right或center”7.文字垂直对齐 valign=“top或middle或bottom";8.cellspacing="单元格与单元格之间的间距“ **必须给table**9.cellpadding="单元格与内容之间的空隙"10.合并单元格属性：11.表格标题12.表格列分组常用不常用如果用rules
table表格内容上下移动的三种实现方法
05-07
在网页设计中，HTML表格（Table）是一种常用的数据展示方式，有时我们需要实现表格内容的上下移动功能，以满足用户交互需求或数据操作便利性。本篇文章将详细讲解三种实现HTML表格内容上下移动的方法。 方法一：...
jQuery+CSS实现的table表格行列转置功能示例
01-19
本文实例讲述了jQuery+CSS实现的table表格行列转置功能。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下： <!DOCTYPE ...
table拖动交换表格内容
08-08
"table拖动交换表格内容"是一个常见的功能需求，尤其适用于数据管理和展示场景，比如电子表格应用或数据分析工具。这个功能允许用户通过拖动单元格来交换表格同一行内不同列的数据，极大地提高了数据操作的便捷性和...
jQuery bootstrap带分页表格数据搜索筛选代码
11-11
jQuery bootstrap带分页表格数据搜索筛选代码
兼容主流浏览器的纯JS动态拖动表格实现行列内容交换
11-14
项目开发中需要用到一个拖动交换表格的功能，上网搜到雅虎的一...就自己综合网上资源写了一个可兼容IE，firefox，Chrome，Safari和Opera等主流浏览器的纯JS动态拖动表格实现行列内容交换。主要代码就不到400行JS而已。
自定义穿梭框实现详解 table 穿梭框
Sandy_zhi的博客
03-03 5178
业精于勤 荒于嬉 需求： element 的 穿梭框el-transfer 使用起来样式很受限制，一般我们需要根据自己的需求实现数据的灵活选择，左右穿梭，就需要用到自定义的穿梭框了 思路： 封装自定义的穿梭框，要考虑的是自己的需求样式，以及数据展示格式 A：什么样式？ Q：穿梭框样式，一般分为左右两侧，此处不多说，根据自己的 UI 画页面就可以了 A：展示的数据格式？ Q : 主要是根据自己的页面展示，分析自己需要的是什么样的数据， A : 其他逻辑功能分析？ Q：你需求的穿梭框需..
表格数据反转
水滴的专栏
01-07 1397
最近总是遇到一些表格数据与数据库查询的要求不一致，即需要查询结果的反转：如下图 原始图： Name Chinese Englist Oracle Database Java 96 92 90 89 Design 96 91 88
elementui 使用el-table完成transfer基本功能
热门推荐
菜鸡奋斗ing的博客
08-14 1万+
不知道大家有没碰到用elementui中transfer组件功能，里面的列表其实是el-checkbox-group。这就有个问题，如果列表中有多列数据需要区分显示就没办法了，毕竟是el-checkbox。但是这种需求的功能一般项目都不多。 下面这个是我改造的效果 初始数据也可以在右边已选框中。如果有多列可以很好区分开。...
html表格行列转换,table 的行列转换问题
weixin_42601134的博客
05-31 586
一个sql查询各个owner下的一些object数目select owner, object_type, count(*)from dba_objectswhere owner not in ('SYSTEM','SYS','DBSNMP','OUTLN','WMSYS','SCOTT')group by owner,object_type显示如下：OWNER OBJECT_TYPE C...
html table 转置,jQuery+CSS实现的table表格行列转置功能示例
weixin_35476730的博客
06-23 242
本文实例讲述了jQuery+CSS实现的table表格行列转置功能。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码如下：www.jb51.net jQuery行列转置table{border: 1px solid #ccc;font-size: 14px;}table th{background: orange;color: #fff;padding: 10px;}table td{p...
vue3 ts实现el-table实现行列互换位置，举个完整的例子
06-08
好的，下面是一个完整的例子，展示如何使用 Vue3 和 TypeScript 实现 el-table 的行列互换位置： ...最后，将修改后的数据重新赋值给 `tableData` 和 `tableColumns`，界面上的表格就会自动更新，实现行列互换的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值