锁定表头表列，magic-table 源码demo 展示

　　由于在其他地方添加源码不是很方便，就放这里吧。 锁定表头、表列源码demo，分三个文件。复制粘贴新建文件即可查看效果！

　　入口文件： index.html

　　资源文件： css/theme.css, js/magicTable.js

入口文件： index.html

复制代码
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="GB2312">
        <title>mgtable</title>
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="./css/theme.css">
        <script src="https://cdn.bootcss.com/jquery/1.11.1-rc1/jquery.js" type="text/javascript"></script>
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
        <script src="./js/magicTable.js" type="text/javascript"></script>
    </head>
    <body> 
    <div class="content" style="margin-left: 0px; width: 2100px;">
        <ul class="breadcrumb">
            <li><a href="#">aAA</a> <span class="divider">/</span></li>
            <li><a href="#">xxxxx</a> <span class="divider">/</span></li>
            <li class="active">ssssss</li>
        </ul>

        <div class="container-fluid">
            <div class="row-fluid">
            <div class="row-fluid row-data">
                <table id="J_MagicTableTop" class="table table-striped table-bordered table-hover" style="display:none;"></table>
                <table id="J_MagicTable" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th style="width:80px;">日期</th>
                            <th style="width:220px;">QQQ</th>
                            <th style="width:60px;">……</th>
                            <th style="width:65px;"><a href="#">sxx;;;;;</a></th>
                            <th style="width:55px;" title="当日点击用户（去重）/当日活跃用户">########</th>
                            <th style="width:55px;" title="点击总数/当日活跃用户">###</th>
                            <th style="width:55px;"><a href="#">#######</a></th>
                            <th style="width:40px;"><a href="#">#</th>
                            <th style="width:85px;"><a title="" href="#">&&&&&&&&</a></th>
                            <th ><a title="椅套椅s" href="#">43<br/>1E##(%)</a></th>
                            <th style="width:40px;"><a class="cRed" title="" href="#">查</a></th>
                            <th style="width:80px;"><a >BBB(%)</a></th>
                            <th style="width:80px;"><a href="#">@@@(%)</a></th>
                            <th style="width:80px;"><a >666(%)</a></th>
                            <th style="width:80px;"><a>MAC(%)</a></th>
                            <th style="width:80px;"><a >%%%</a></th>
                            <th style="width:80px;"><a>&$$$$</a></th>
                            <th style="width:80px;">###<br>占比(%)</th>
                            <th style="width:90px;">##</th>
                            <th style="width:90px;">TQC占比(%)</th>
                            <th style="width:90px;">IMEI(%)</th>
                            <th style="width:70px;">MA</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2011-11-31</td>
                            <td>65757657</td>
                            <td>fdsffdg</td>
                            <td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td>
                            <td>111</td>  
                            <td><a target="_blank" href="#">545645</a></td>
                            <td>555</td>
                            <td>333</td>
                            <td class="cRed"><a target="_blank" href="#">444%</a></td>
                            <td class="cRed"><a target="_blank" href="#">2343535%</a></td>
                            
                            <td>楷艰用</td>
                            <td>梦</td>
                            <td>23432432%</td>
                            <td style="color:red">2342432234545</td>
                            <td >6787687686</td>
                            <td >232222</td>
                            <td >453546786</td>
                            <td>4353535%</td>
                            <td >567686%</td>
                            <td >789798%</td>
                            <td >456546456%</td>
                            <td >7898790%</td>
                        </tr>
                        <tr>
                            <td>2011-12-31</td>
                            <td>8797898980</td>
                            <td>fdsffdg</td>
                            <td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td>
                            <td>111</td>  
                            <td><a target="_blank" href="#">545645</a></td>
                            <td>555</td>
                            <td>333</td>
                            <td class="cRed"><a target="_blank" href="#">444%</a></td>
                            <td class="cRed"><a target="_blank" href="#">2343535%</a></td>
                            
                            <td>24354456</td>
                            <td>7897565656654</td>
                            <td>23432432%</td>
                            <td style="color:red">2342432234545</td>
                            <td >6787687686</td>
                            <td >232222</td>
                            <td >453546786</td>
                            <td>4353535%</td>
                            <td >567686%</td>
                            <td >789798%</td>
                            <td >456546456%</td>
                            <td >7898790%</td>
                        </tr>
                        <tr>
                            <td>2061-11-31</td>
                            <td>ddffgdgdfgfd</td>
                            <td>fdsffdg</td>
                            <td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td>
                            <td>111</td>  
                            <td><a target="_blank" href="#">545645</a></td>
                            <td>555</td>
                            <td>333</td>
                            <td class="cRed"><a target="_blank" href="#">444%</a></td>
                            <td class="cRed"><a target="_blank" href="#">2343535%</a></td>
                            
                            <td>24354456</td>
                            <td>7897565656654</td>
                            <td>23432432%</td>
                            <td style="color:red">2342432234545</td>
                            <td >6787687686</td>
                            <td >232222</td>
                            <td >453546786</td>
                            <td>4353535%</td>
                            <td >567686%</td>
                            <td >789798%</td>
                            <td >456546456%</td>
                            <td >7898790%</td>
                        </tr>
                        <tr>
                            <td>2019-11-31</td>
                            <td>dxcghfhyuyt222</td>
                            <td>fdsffdg</td>
                            <td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td>
                            <td>111</td>  
                            <td><a target="_blank" href="#">545645</a></td>
                            <td>555</td>
                            <td>333</td>
                            <td class="cRed"><a target="_blank" href="#">444%</a></td>
                            <td class="cRed"><a target="_blank" href="#">2343535%</a></td>
                            
                            <td>24354456</td>
                            <td>7897565656654</td>
                            <td>23432432%</td>
                            <td style="color:red">2342432234545</td>
                            <td >6787687686</td>
                            <td >232222</td>
                            <td >453546786</td>
                            <td>4353535%</td>
                            <td >567686%</td>
                            <td >789798%</td>
                            <td >456546456%</td>
                            <td >7898790%</td>
                        </tr>
                        <tr>
                            <td>2011-11-31</td>
                            <td>467867thgjhmmhm</td>
                            <td>fdsffdg</td>
                            <td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td>
                            <td>111</td>  
                            <td><a target="_blank" href="#">545645</a></td>
                            <td>555</td>
                            <td>333</td>
                            <td class="cRed"><a target="_blank" href="#">444%</a></td>
                            <td class="cRed"><a target="_blank" href="#">2343535%</a></td>
                            
                            <td>24354456</td>
                            <td>7897565656654</td>
                            <td>23432432%</td>
                            <td style="color:red">2342432234545</td>
                            <td >6787687686</td>
                            <td >232222</td>
                            <td >453546786</td>
                            <td>4353535%</td>
                            <td >567686%</td>
                            <td >789798%</td>
                            <td >456546456%</td>
                            <td >7898790%</td>
                        </tr>
                        <tr>
                            <td>2011-11-31</td>
                            <td>467867thgjhmmhm</td>
                            <td>fdsffdg</td>
                            <td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td>
                            <td>111</td>  
                            <td><a target="_blank" href="#">545645</a></td>
                            <td>555</td>
                            <td>333</td>
                            <td class="cRed"><a target="_blank" href="#">444%</a></td>
                            <td class="cRed"><a target="_blank" href="#">2343535%</a></td>
                            
                            <td>24354456</td>
                            <td>7897565656654</td>
                            <td>23432432%</td>
                            <td style="color:red">2342432234545</td>
                            <td >6787687686</td>
                            <td >232222</td>
                            <td >453546786</td>
                            <td>4353535%</td>
                            <td >567686%</td>
                            <td >789798%</td>
                            <td >456546456%</td>
                            <td >7898790%</td>
                        </tr>
                        <tr>
                            <td>2011-11-31</td>
                            <td>dxcghfhyuyt222</td>
                            <td>fdsffdg</td>
                            <td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td>
                            <td>111</td>  
                            <td><a target="_blank" href="#">545645</a></td>
                            <td>555</td>
                            <td>333</td>
                            <td class="cRed"><a target="_blank" href="#">444%</a></td>
                            <td class="cRed"><a target="_blank" href="#">2343535%</a></td>
                            
                            <td>24354456</td>
                            <td>7897565656654</td>
                            <td>23432432%</td>
                            <td style="color:red">2342432234545</td>
                            <td >6787687686</td>
                            <td >232222</td>
                            <td >453546786</td>
                            <td>4353535%</td>
                            <td >567686%</td>
                            <td >789798%</td>
                            <td >456546456%</td>
                            <td >7898790%</td>
                        </tr>
                    </tbody>
                </table>
                <table id="J_MagicTableLeft" class="table magic-table-left table-striped table-bordered table-hover" style="display:none;"></table>
            </div>
        </div>
    </div>
</div>   
</body>
</html>

<script>

$(function() {
    //表格固定头部
    if ($("#J_MagicTable").length > 0) {
        var blockHeadingHeight = $("#J_BlockHeading").outerHeight();
        $('#J_MagicTable').magicTable({thfix: blockHeadingHeight, leftIndex: 1, leftFlg: true});
    }
});
</script>
复制代码

资源文件 css/theme.css

复制代码
body { background: #eee url('/images/admin/furley_bg.png'); font-family: helvetica,"Microsoft Yahei",sans-serif; color: #333; font-size: 12px;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    outline: 0 none;
    padding: 0;
}
ul, li {list-style: none;}

a{blr:expression(this.onFocus=this.close());} /* 只支持IE，过多使用效率低 */
a{blr:expression(this.onFocus=this.blur());} /* 只支持IE，过多使用效率低 */
a:focus { -moz-outline-style: none; } /* IE不支持 */
a:focus { outline: none; } /*很多网站都会加的属性*/
a:hover {text-decoration: none;}
hr {border-top: 1px solid #ddd; border-bottom: 1px solid #fff;}

.no-padding { padding: 0 !important;}
.no-padding-bottom {padding-bottom: 0 !important;}
.no-padding-top {padding-top: 0 !important;}
.no-padding-left { padding-left: 0 !important;}
.no-padding-right {padding-right: 0 !important;}
.no-margin {margin: 0 !important;}
.no-margin-bottom {margin-bottom: 0 !important;}
.no-margin-top {margin-top: 0 !important;}
.no-margin-left { margin-left: 0 !important;}
.no-margin-right { margin-right: 0 !important;}
.no-border { border: 0 none;}
.no-border-bottom { border-bottom: 0 none;}
.no-border-top {border-top: 0 none;}
.no-border-left { border-left: medium none;}
.no-border-right { border-right: 0 none;}
.no-underline {text-decoration: none !important;}
.no-hover-underline:hover { text-decoration: none !important;}
.no-shadow, .no-box-shadow {box-shadow: none !important;}
.no-text-shadow {text-shadow: none !important;}

.icon {
    background: url("/images/inons/icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    text-indent: -9999px;
    vertical-align: middle;
    width: 24px;
}
.export {
    background-position: 0 -72px;
    cursor: pointer;
}
.icon-lt {
    background-position: 0 -1009px;
}
.icon-close {
    background-position: 0 -793px;
}

/*Navbar*/
.navbar { position: relative; z-index: 20; margin-bottom: 0;  box-shadow: 0px 0px 3px #ccc; 
         -webkit-box-shadow: 0px 0px 3px #ccc; -moz-box-shadow: 0px 0px 3px #ccc;}
.navbar .brand { text-shadow: none;}
.navbar .navbar-inner {
  background: #4d5b76;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4d5b76), color-stop(1, #6c7a95));
  background: -ms-linear-gradient(bottom, #4d5b76, #6c7a95);
  background: -moz-linear-gradient(center bottom, #4d5b76 0%, #6c7a95 100%);
  background: -o-linear-gradient(bottom, #4d5b76, #6c7a95);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#6c7a95',EndColorStr='#4d5b76')";
  padding: 0em 1em;
  margin: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 0px;
  border-bottom: none;
}
.navbar .nav {margin: 0em; margin-right: -1em;}
.navbar .nav > li > a { color: #fff; text-shadow: none;}
.navbar .nav > li:hover { sbackground-color: #444;}
.navbar .nav > li > a:hover { color: #fff;}
.navbar .dropdown-menu a:hover {background: none; color: #000;}
.navbar .nav li.dropdown.open > .dropdown-toggle {background-color: #444;color: #fff;}

/** content **/
.content { min-width: 400px; position: relative; min-height: 600px; background: #fff; border-left: none; padding-top: 35px;}
.header {
  background: #ffffff;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e6e6e6), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #e6e6e6, #ffffff);
  background: -moz-linear-gradient(center bottom, #e6e6e6 0%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #e6e6e6, #ffffff);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#e6e6e6')";
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  padding: 0em 15px;
}

.breadcrumb {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: #eee;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #fafafa;
  border-left: 1px solid #fff;
  margin-bottom: .5em;
  width: 100%;
  position: fixed;
  top: 0;
  margin-bottom: 50px;
}

.container-fluid {margin-top:15px;}
.page-content { padding: 1em;}

a.block-heading:hover,
.block-heading a:hover,
a.block-heading-nofloat:hover,
.block-heading-nofloat a:hover
{
  background: #dddddd;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dddddd), color-stop(1, #fdfdfd));
  background: -ms-linear-gradient(bottom, #dddddd, #fdfdfd);
  background: -moz-linear-gradient(center bottom, #dddddd 0%, #fdfdfd 100%);
  background: -o-linear-gradient(bottom, #dddddd, #fdfdfd);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd',EndColorStr='#dddddd')";
  color: #505050;
}
/*Tabs*/
.nav-tabs  > li {
  margin-left: .5em;
}
table.table.list tr:first-child td {
  border-top: 0px;
}
/* Tweaks for mobile */
@media (max-width: 641px) {
  .content {
    margin: 0em;
  }
  .sidebar-nav {
    float: none;
    width: auto;
    position: relative;
  }
  h1 {
    text-align: center;
  }
  .stats {
    text-align: center;
    margin-top: 1em;
  }
  .stats .stat {
    float: none;
    display: inline;
  }
  .stat-widget-container .stat-widget {
    font-size: .5em;
  }
}
@media (max-width: 900px) {
  body.http-error {
    font-size: .75em;
  }
  body.http-error .error-message {
    padding: 0em 1em;
  }
}
@media (max-width: 851px) {
  .stat-widget-container .stat-widget {
    font-size: .75em;
  }
}
@media (max-width: 767px) {
  footer hr {
    margin-left: 0em;
    margin-right: 0em;
  }
}
@media (max-width: 604px) {
  body.http-error {
    font-size: .5em;
  }
}

th, td, .table-bordered {
    border-radius: 0 !important;
    text-align: left;
}
.table thead tr {
    background: linear-gradient(to bottom, #F8F8F8 0px, #ECECEC 100%) repeat-x scroll 0 0 #F2F2F2;
    color: #707070;
    font-weight: normal;
}
.table thead tr th {
    border-color: #DDDDDD;
    font-weight: bold;
}
.table thead tr th [class*="icon-"]:first-child {
    margin-right: 2px;
}
.table thead tr th:first-child {
    border-left-color: #F1F1F1;
}
.table.table-bordered thead tr th {
    vertical-align: middle;
}
.table.table-bordered thead tr th:first-child {
    border-left-color: #DDDDDD;
}
th.center, td.center {
    text-align: center;
}
th .lbl, td .lbl {
    margin-bottom: 0;
}
th .lbl:only-child, td .lbl:only-child {
    vertical-align: top;
}
.table-header {
    background-color: #307ECC;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 38px;
    margin-bottom: 1px;
    padding-left: 12px;
}
.table-header .close {
    margin-right: 8px;
    margin-top: 0;
    opacity: 0.45;
}
.table-header .close:hover {
    opacity: 0.75;
}
.table .num, .block-table .num{font-size:14px;}
.table .rate, .block-table .rate {color:red; padding-left: 15px;}


.table tr.sum{ background-color: #E0E7F2;}

/** 魔术表格 **/
.magic-table-top, .magic-table-left {display: none; background: #e1e1e1;}
.magic-table-top td, .magic-table-left td {border:1px solid #ccc;}

/*特殊颜色*/
.cRed, .cRed a {color:red;}
.cGreen, .cGreen a {color:green;}
.cBlue, .cBlue a {color:blue;}
复制代码

 

资源文件 js/magicTable.js

复制代码
(function($) {
    $.fn.magicTable = function(option) {
        $.fn.magicTable.option = {
            /* 浮动头部 */
            'magicTop': $('#J_MagicTableTop'),
            'magicLeft': $('#J_MagicTableLeft'),
            /* 可能有隐藏的，所以设定浮动头部的开始索引 */
            'leftIndex': 0,
            'leftFlg': false,
            /* 高度调整 */
            "thfix": 0,
            "thWidth": 0, //左边显示的宽度
            "thHeight": 0,
            "thTop": 0,
            "thLeft":0,
            "thLine": 0,
            "removeTotal": false,
        };
        var option = $.extend({}, $.fn.magicTable.option, option);
        
        return this.each(function() {
            $(this).css({'z-index': '9', 'display': '', 'position': 'relative'});

            /*复制活动的表格内容*/
            var leftHtml = '';
            var leftHtml2 = '';
            var leftFlg = option.leftFlg;
            var thWidth = option.thWidth;
            var thHeight = 0; //th的高度
            var thTop = option.thTop; //th距离浏览器顶部的top高度
            var thLeft = option.thLeft; //左侧未滚动时的left
            var removeTotal = option.removeTotal;//除去最后一行的汇总
            var flagLeftLength = 0; //左侧显示浮动层时的临界点
            
            //处理浮动的头部
            option.magicTop.html($(this).find('thead').clone()).css({
                'width': $(this).width()
            });

            var trLenght = $(this).find('>tbody>tr').length;
            if(removeTotal)
            {
                trLenght -= 1;
            }
            $(this).find('tr').each(function(i, item) {
                if (i == option.thLine){
                    thTop = thTop > 0 ? thTop : $(this).find('th:first').offset().top;
                    thHeight = $(this).height();  //包围th的tr的高度
                    thLeft = $(this).offset().left; //表格左侧是的left
                    flagLeftLength = $(this).find('th:eq(' + option.leftIndex + ')').offset().left; 
                    thWidth = flagLeftLength + $(this).find('th:eq(' + option.leftIndex + ')').outerWidth() - thLeft;
                } else if (i > option.thLine) {
                    if (leftFlg && (i <= trLenght)){
                        var tmpHtml = '';
                        for (var j = 0; j <= option.leftIndex; j++) {
                            tmpHtml += '<td style="height:' + $(this).find('td:eq(' + j + ')').height() + 'px;width:' + 
                                    $(this).find('td:eq(' + j + ')').innerWidth() + 'px">' + $(this).find('td:eq(' + j + ')').html() + '</td>';
                        }
                        leftHtml2 += '<tr>' + tmpHtml + '</tr>';
                    }
                    leftHtml = leftHtml + '<tr><td style="height:' + $(this).find('td:eq(' + option.leftIndex + ')').height() + 'px">' + 
                            $(this).find('td:eq(' + option.leftIndex + ')').html() + '</td><tr>';     
                }
            });

            if (leftFlg) {
                leftHtml = leftHtml2;
                option.magicLeft.html(leftHtml);
            }

            /*活动模块*/
            function moveSquare(){
                if ($(this).scrollTop() >= thTop){
                    option.magicTop.show().css({'z-index': '999', 'position': 'absolute', 'top': $(this).scrollTop() + option.thfix + 'px'});
                } else {
                    option.magicTop.css({'display': 'none'});
                }
                
                if ($(this).scrollLeft() >= thLeft + 1) {
                    option.magicLeft.show().css({
                        'z-index': '99', 
                        'position': 'absolute', 
                        'top': thTop + thHeight + 'px',
                        'left': $(this).scrollLeft() + 'px',
                        'width': thWidth + 'px',
                    });
                    if ($(this).scrollTop() >= thTop){
                        option.magicLeft.show().css({
                            'top': thTop + thHeight - option.thfix + 'px',
                        });
                    }
                } else {
                    option.magicLeft.css({'display': 'none'});
                }
            }
            
            if (document.all) {
                window.attachEvent("onscroll", moveSquare);
            } else {
                window.addEventListener('scroll', moveSquare, false);
            }

        });
    };

    $.fn.magicTable.setDefaults = function(settings) {
        $.extend($.fn.magicTable.option, settings);
    };
})(jQuery);
复制代码

 

　　如有问题，欢迎来询！

posted @   阿牛20  阅读(528)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
历史上的今天：
2016-01-12 怎样提供一个好的移动API接口服务/从零到一[开发篇]
点击右上角即可分享
微信分享提示
AI IDE Trae