表格固定行（某几列固定）

(function ($, window, document) {
    $.fn.tableFixedRow = function (options) {
        var defaults = {
            getData: [],//列表数据
            opera:[],//操作列
            //rightWidthReduce: '110px',
            rightMargin: '110px',//右侧表格左边距
            trAttr: [],//表格tr所带所属
        };
        var setting = $.extend({}, defaults, options);
        var tableWrapDom = $(this);
        var tableContent = {
            checkDataArr:[],
            init: function () {
                var _this = this;
                _this.getTableStructure();//更改表结构
                _this.getTableContent();//获取表数据
                _this.trHoverFunc();//设置hover
            },
            getTableStructure: function () {
                var tableFixedHead = '';
                var tableMainHead = '';
                tableWrapDom.find('table th').each(function (index, item) {
                    if ($(this).attr('fixed')) {
                        tableFixedHead += $(this).prop('outerHTML');
                    } else {
                        tableMainHead += $(this).prop('outerHTML');
                    }
                });                
                var mainTableHtml = '<div class="clearfix"><div class="left-table">\
                             <table class="main-table" id="leftTable">\
                             <thead><tr>' + tableFixedHead + '</tr></thead>\
                             <tbody class="js-fixed-body"></tbody>\
                             </table>\
                             </div>\
                             <div class="right-table" style="width:calc(100% - ' + setting.rightMargin + ');margin-left:' + setting.rightMargin + '">\
                            <table class="main-table" id="rightTable">\
                             <thead><tr>' + tableMainHead + '</tr></thead>\
                             <tbody class="js-main-body"></tbody>\
                             </table>\
                             </div></div>'
                tableWrapDom.html(mainTableHtml);
            },
            getTableContent: function () {
                var _this = this;
                var fixedHtml = '';
                var mainHtml = '';
                var nullHtml = '';//无数据
                if (setting.getData.code != 0) {
                    nullHtml = setting.getData.message;
                } else {
                    var data = setting.getData.data;
                    if (data.rows.length > 0) {
                        data.rows.forEach(function (item, index) {
                            if (data.pageSize) var num = parseInt(data.pageSize * data.pageIndex + index + 1);
                            var trAttrObj = {};
                            if (setting.trAttr && setting.trAttr.length > 0) {
                                setting.trAttr.forEach(function (element) {
                                    for (var key in item) {
                                        if (key == element) {
                                            trAttrObj[element] = item[key];
                                        }
                                    }
                                });
                            }
                            fixedHtml += '<tr ' + (setting.trAttr?'attr='+escape(JSON.stringify(trAttrObj)):'') + '>';
                            $('#leftTable th').each(function () {
                                fixedHtml += _this.tableHtml($(this), item, num);
                            });
                            fixedHtml += '</tr>';
                            mainHtml += '<tr>';
                            $('#rightTable th').each(function () {
                                mainHtml += _this.tableHtml($(this), item, num);
                            });
                            mainHtml += '</tr>';
                        });
                    } else {
                        nullHtml = '暂无符合条件的数据！'
                    }
                }
                if (nullHtml) {
                    //tableWrapDom.append('<div class="text-c" style="color:#666;line-height:40px;border-bottom:1px solid #ddd;">' + nullHtml + '</div>');
                    $('.js-fixed-body').html('<tr><td colspan="8" style="color:#fff;">1</td></tr>');
                    $('.js-main-body').html('<tr><td colspan="50"><span style="margin-left:-' + setting.rightMargin + '">' + nullHtml + '</span></td></tr>');
                } else {
                    $('.js-fixed-body').html(fixedHtml);
                    $('.js-main-body').html(mainHtml);
                }
            },
            tableHtml: function (dom, data, num) {
                var filedType = dom.attr('fieldtype');
                var fieldText = data[dom.attr('field')];
                var tdHtml = '';
                switch (filedType) {
                    case 'checkbox':
                        tdHtml = '<td><input type="checkbox" /></td>';
                        break;
                    case 'index':
                        tdHtml = '<td>' + num + '</td>';
                        break;
                    case 'data':
                        tdHtml = '<td ' + (dom.attr('attr') ? dom.attr('attr') + '=' + data[dom.attr('attr')] : '') + '>' + (fieldText ? fieldText : '--') + '</td>';
                        break;
                    case 'obj':
                        tdHtml = '<td>' + (fieldText ? fieldText[dom.attr('objkey')] : '--') + '</td>';
                        break;
                    case 'time':
                        tdHtml = '<td>' + (fieldText ? fieldText.split('T')[0] : '--') + '</td>';
                        break;
                    case 'times':
                        tdHtml = '<td>' + (data[dom.attr('field1')] ? data[dom.attr('field1')].split('T')[0] : '') + ((data[dom.attr('field1')] || data[dom.attr('field2')]) ? '至' : '--') + (data[dom.attr('field1')] ? data[dom.attr('field2')].split('T')[0] : '') + '</td>';
                        break;
                    case 'files':
                        var fileList = fieldText;
                        var Temphtl = '';
                        fileList.forEach(function (item) {
                            var FileShowName = item.FileName;
                            if (item.FileName.length > 20) {
                                FileShowName = item.FileName.slice(0, 10) + '...' + item.FileName.slice(-10);
                            } else {
                                FileShowName = item.FileName;
                            }
                            Temphtl += '<div class="filesBox" title="' + item.FileName + '" FilePath="' + item.FilePath + '" FileId="' + item.FileId + '" FileName="' + item.FileName + '" FileSize="' + item.FileSize + '" FileType="' + item.FileType + '"\
                            >' + FileShowName + '</div>';
                        });
                        tdHtml = Temphtl ? '<td>' + Temphtl + '</td>' : '<td>--</td>';
                        break;
                    case 'opera':
                        var html = '';
                        if (Array.isArray(setting.opera)) {
                            setting.opera.forEach(function (item) {
                                if (item.status == fieldText || item.status == 'other') {
                                    item.btn.forEach(function (items) {
                                        html += '<a href="javascript:void(0);" class=" + items.className + " ' + (items.EventName ? 'onClick="' + items.EventName + '(this)"' : '') + '>' + items.text + '</a>'
                                    });
                                }
                            });
                        }
                        tdHtml = '<td>' + html + '</td>';
                        break;
                    default:
                        tdHtml = '<td>' + (fieldText ? fieldText : '--') + '</td>';
                        break;
                }
                return tdHtml;
            },
            trHoverFunc: function () {
                tableWrapDom.find('tbody tr').hover(function () {
                    var _index = $(this).index();
                    tableWrapDom.find('.left-table tbody tr').eq(_index).css('background-color', '#fff6f7');
                    tableWrapDom.find('.right-table tbody tr').eq(_index).css('background-color', '#fff6f7');
                }, function () {
                    var _index = $(this).index();
                    tableWrapDom.find('.left-table tbody tr').eq(_index).css('background-color', '#fff');
                    tableWrapDom.find('.right-table tbody tr').eq(_index).css('background-color', '#fff');
                });
            }
        }
        tableContent.init();
    }
})(jQuery, window, document);

 

 

 

调用：

$('#mianTable').tableFixedRow({
                        getData: result,
                        rightMargin: '110px',
                        trAttr: ['SapId', 'RecordId'],
                        opera: [{ 'status': 'other', 'btn': [{ 'text': '详情', 'className': 'mgr-5', 'EventName': 'resumeDtl' }, { 'text': '导出', 'className': '', 'EventName': 'html2word' }] }]
  });

 html:

<div class="table-content main-table-wrap" id="mianTable">
                      　　<table class="main-table">
                            <thead>
                                <tr>
                                    <th fixed="true" fieldtype="checkbox" width="50"><input type="checkbox"></th>
                                    <th fixed="true" fieldtype="data" field="UserName" attr="MatterId" width="70">应聘者</th>
                                    <th fieldtype="time" field="Birthday" width="100">出生年月</th>
                                    <th fieldtype="data" field="OrgNameAll" attr="SapId" width="200">所属机构</th>
                                    <th fieldtype="data" field="CurrentPost" width="250">职务</th>
                                    <th fieldtype="time" field="HoldCurPostDate" width="100">任现职时间</th>
                                    <th fieldtype="data" field="EvaluationResult" width="200">近两年考核</th>
                                    <th fieldtype="data" field="Dispose" width="100">近两年处分</th>
                                    <th fieldtype="data" field="Politic" width="160">政治面貌</th>
                                    <th fieldtype="data" field="PassStatus" attr="Reason" width="80">状态</th>
                                    <th fieldtype="opera" field="Status" style="width: 90px;">简历详情</th>
                                </tr>
                            </thead>
                        </table>
                    </div>       

 注：fieldtype为插件里赋值的类型（自定义），field为所取数据的某字段名称（可以是组装后传递的，调用时的result为组装后的数据）

css

/*表格*/
.main-table-wrap .main-table>thead>tr{
    border-bottom: 2px solid #DF1934;
}
.main-table-wrap .main-table tr{
    border-bottom: 1px solid #e5e5e5;
}
.main-table-wrap .main-table>tbody tr:hover{
    background:#fff6f7;
}
.main-table-wrap .main-table th{
    font-size:15px;
    white-space:nowrap;
    color:#000;
}

.main-table-wrap .main-table th,
.main-table-wrap .main-table td{
    min-width:100px;
    line-height:40px;
    text-align:left;
    padding:0 15px;
}
.main-table-wrap .main-table th:first-child,
.main-table-wrap .main-table td:first-child{
    min-width:50px;
    text-align:center;
}
.main-table-wrap .main-table a, .color-a{
    color:#0164aa;
}

.main-table-wrap .main-table .no-data{
    border-bottom:none !important;
}
.main-table tr input:disabled{
    cursor:not-allowed;
}
.selected-bg{background:#fff6f7 !important}

/*分页*/
.main-pagination{
    width:100%;
    height: 66px;
    padding: 20px 50px;
    font-size: 13px;
    background: #fff;
}

.main-pagination .main-left{
    float:left;
    line-height:26px;
}
.main-pagination .main-right{
    float:right;
}

.main-pagination .main-left,
.main-pagination .main-right{
    height:100%;
    line-height:26px;
}
.main-pagination .main-right>select,
.main-pagination .main-right>span,
.main-pagination .main-right>input{
    float:left;
}
.main-pagination .main-right>span{
    margin-right:7px;
    margin-left:10px;
}
.main-pagination .main-right select,
.main-pagination .main-right input{
    border-radius:4px;
    outline:none;
    padding:0 12px;
    line-height:26px;
    height:100%;
    border:0;
    margin-right:3px;
    border:1px solid #d1d1d1;
    background:#f5f5f5;
    cursor:pointer;
}
.main-pagination .main-right select {
    padding: 0 0 0 10px;
}
.main-pagination .main-right select::-ms-expand:hover {
    background:#efefef;
}
.main-pagination .main-right select::-ms-expand { background:#fff;border:none;padding:0 3px;margin-left:10px;border-radius:0 4px 4px 0;}
.main-pagination .main-right .selPageSize{
    background:#fff;
    margin-right:15px;
}
.main-pagination .main-right .gotoPage{
    background:#fff;
    margin-right:7px;
    width:60px;
    cursor:default;
}
.main-pagination .main-right .go{
    padding:0;
    background:#ef1d39;
}
.main-pagination .main-right input:hover{
    background:#efefef;
}
.main-pagination .main-right .go:hover{
    padding:0;
    background:#c8152d;
}
/*表格固定列*/
/*.table-content table{table-layout:fixed}*/
.table-content table td{white-space:nowrap}
.table-content .left-table{float:left;width:110px}
.table-content .right-table{
    width: calc(100% - 110px);
    margin-left: 110px;
    overflow-x:auto;
    overflow-y:hidden;
}