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

(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>       

 

转载于:https://www.cnblogs.com/myyouzi/p/11155567.html