<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 
 
    <style>
        .tablecss td {
            word-break: break-all;
            word-wrap: break-word;
            border: 1px solid #d0b5b5;
            padding: 5px;
        }
 
        .tablecss {
            border-collapse: collapse;
           
        }
 
        .table_title td {
            text-align: center;
            font-size: large;
            color: black;
        }
    </style>
 
 
</head>
<body>
    <table class="tablecss" id="t1">
 
        <tbody>
            <tr class="table_title primaryTr001"><td class="cktd"><div style="width:130px"><input type="checkbox" value="" class="table_checkbox_all"></div></td><td><div style="width:130px">真实姓名</div></td><td><div style="width:130px">登录名<span class="glyphicon glyphicon-circle-arrow-down"></span></div></td><td><div style="width:130px">性别</div></td><td><div style="width:130px">出生日期</div></td><td><div style="width:130px">联系方式</div></td><td><div style="width:130px">邮箱</div></td><td><div style="width:130px">是否管理员</div></td><td><div style="width:300px">其他说明</div></td><td><div style="width:220px">操作</div></td></tr>
 
 
 
            <tr sid="44"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批5</td><td>jssp5</td><td></td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="43"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批4</td><td>jssp4</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="42"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批3</td><td>jssp3</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="41"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批2</td><td>jssp2</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="40"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批1</td><td>jssp1</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="39"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批5</td><td>ywdsp5</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="38"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批4</td><td>ywdsp4</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="37"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批3</td><td>ywdsp3</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="36"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批2</td><td>ywdsp2</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="35"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批1</td><td>ywdsp1</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="34"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪4</td><td>xiaozhu4</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="33"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪3</td><td>xiaozhu3</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="32"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪2</td><td>xiaozhu2</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="31"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪1</td><td>xiaozhu1</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="30"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售20</td><td>xiaoshou20</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="29"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售19</td><td>xiaoshou19</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="28"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售18</td><td>xiaoshou18</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="27"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售17</td><td>xiaoshou17</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="26"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售16</td><td>xiaoshou16</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr sid="25"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售15</td><td>xiaoshou15</td><td>女         </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>
            <tr class="endtr22"><td colspan="10" class="endtd"><span class="bar_noprepage">上一页</span><span class="bar_currentpage">1</span><span class="bar_pages bar_skippage" topage="2">2</span><span class="bar_pages bar_skippage" topage="3">3</span><span class="bar_nextpage bar_skippage" topage="2">下一页</span><span>共<span class="bar_record">43</span>条数据&nbsp;分<span class="bar_pagecount">3</span>页 </span> &nbsp;每页显示<input type="text" value="20" class="bar_pageSize">条&nbsp;当前为第<input type="text" value="1" class="bar_cur">页&nbsp;<input type="button" value="跳至" class="bar_goto_btn"> </td></tr>
 
        </tbody>
    </table>
</body>
</html>
 
<script>
    //调用
    freezeTable("t1", 1, 1, 800, 400);
    /*
 * 锁定表头和列
 *
 * 参数定义
 *  table - 要锁定的表格元素或者表格ID
 *  freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0
 *  freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0
 *  width - 表格的滚动区域宽度
 *  height - 表格的滚动区域高度
 */
    function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {
        if (typeof (freezeRowNum) == 'string')
            freezeRowNum = parseInt(freezeRowNum)
 
        if (typeof (freezeColumnNum) == 'string')
            freezeColumnNum = parseInt(freezeColumnNum)
 
        var tableId;
        if (typeof (table) == 'string') {
            tableId = table;
            table = $('#' + tableId);
        } else
            tableId = table.attr('id');
 
        var divTableLayout = $("#" + tableId + "_tableLayout");
 
        if (divTableLayout.length != 0) {
            divTableLayout.before(table);
            divTableLayout.empty();
        } else {
            table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
 
            divTableLayout = $("#" + tableId + "_tableLayout");
        }
 
        var html = '';
        if (freezeRowNum > 0 && freezeColumnNum > 0)
            html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';
 
        if (freezeRowNum > 0)
            html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';
 
        if (freezeColumnNum > 0)
            html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>';
 
        html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>';
 
 
        $(html).appendTo("#" + tableId + "_tableLayout");
 
        var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;
        var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;
        var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;
        var divTableData = $("#" + tableId + "_tableData");
 
        divTableData.append(table);
 
        if (divTableFix != null) {
            var tableFixClone = table.clone(true);
            tableFixClone.attr("id", tableId + "_tableFixClone");
            divTableFix.append(tableFixClone);
        }
 
        if (divTableHead != null) {
            var tableHeadClone = table.clone(true);
            tableHeadClone.attr("id", tableId + "_tableHeadClone");
            divTableHead.append(tableHeadClone);
        }
 
        if (divTableColumn != null) {
            var tableColumnClone = table.clone(true);
            tableColumnClone.attr("id", tableId + "_tableColumnClone");
            divTableColumn.append(tableColumnClone);
        }
 
        $("#" + tableId + "_tableLayout table").css("margin", "0");
 
        if (freezeRowNum > 0) {
            var HeadHeight = 0;
            var ignoreRowNum = 0;
            $("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {
                if (ignoreRowNum > 0)
                    ignoreRowNum--;
                else {
                    var td = $(this).find('td:first, th:first');
                    HeadHeight += td.outerHeight(true);
 
                    ignoreRowNum = td.attr('rowSpan');
                    if (typeof (ignoreRowNum) == 'undefined')
                        ignoreRowNum = 0;
                    else
                        ignoreRowNum = parseInt(ignoreRowNum) - 1;
                }
            });
            HeadHeight += 2;
 
            divTableHead.css("height", HeadHeight);
            divTableFix != null && divTableFix.css("height", HeadHeight);
        }
 
        if (freezeColumnNum > 0) {
            var ColumnsWidth = 0;
            var ColumnsNumber = 0;
            $("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () {
                if (ColumnsNumber >= freezeColumnNum)
                    return;
 
                ColumnsWidth += $(this).outerWidth(true);
 
                ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;
            });
            ColumnsWidth += 2;
 
            divTableColumn.css("width", ColumnsWidth);
            divTableFix != null && divTableFix.css("width", ColumnsWidth);
        }
 
        divTableData.scroll(function () {
            divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());
 
            divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());
        });
 
        divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" });
        divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" });
        divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" });
        divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" });
 
        divTableFix != null && divTableFix.offset(divTableLayout.offset());
        divTableHead != null && divTableHead.offset(divTableLayout.offset());
        divTableColumn != null && divTableColumn.offset(divTableLayout.offset());
        divTableData.offset(divTableLayout.offset());
    }
 
    /*
     * 调整锁定表的宽度和高度，这个函数在resize事件中调用
     *
     * 参数定义
     *  table - 要锁定的表格元素或者表格ID
     *  width - 表格的滚动区域宽度
     *  height - 表格的滚动区域高度
     */
    function adjustTableSize(table, width, height) {
        var tableId;
        if (typeof (table) == 'string')
            tableId = table;
        else
            tableId = table.attr('id');
 
        $("#" + tableId + "_tableLayout").width(width).height(height);
        $("#" + tableId + "_tableHead").width(width - 17);
        $("#" + tableId + "_tableColumn").height(height - 17);
        $("#" + tableId + "_tableData").width(width).height(height);
    }
 
    function pageHeight() {
        if ($.browser.msie) {
            return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
        } else {
            return self.innerHeight;
        }
    };
 
    //返回当前页面宽度
    function pageWidth() {
        if ($.browser.msie) {
            return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
        } else {
            return self.innerWidth;
        }
    };
 
 
</script>

收集的冻结table 标题和左侧（完美）的更多相关文章

  1. Table标题行冻结，数据行滚动的一种方式

    这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来. 首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离.我是这么做的,用两个表格,一个只有 ...

  2. bootstrap table 标题列重复

    使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...

  3. ABAP 内表(internal table) 标题行(header line) 工作区(work area) 简介 - [SAP]

    刚开始学ABAP的时候,学到iternal table时,感觉一阵混乱.搞不清楚什么是work area,什么是header line,以及occurs是干什么用的.今天终于差不多搞明白了(我还是太弱 ...

  4. Jquery 实现table标题点击复制整列td内容到剪贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js Table冻结表头示例代码

    Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头  function  ...

  6. office2010如何使用excel冻结窗格

    当我们在制作一个Excel表格时,如果列数较多,行数也较多时,一旦向下滚屏,则上面的标题行也跟着滚动,在处理数据时往往难以分清各列数据对应的标题,事实上利用"冻结窗格"功能可以很好 ...

  7. MarkDown+LaTex 数学内容编辑样例收集

    $\color{green}{MarkDown+LaTex 数学内容编辑样例收集}$ 1.大小标题的居中,大小,颜色 [例1] $\color{Blue}{一元二次方程根的分布}$ $\color{R ...

  8. 收集oracle统计信息

    优化器统计范围: 表统计: --行数,块数,行平均长度:all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN:列统计: --列中唯一值的数量(NDV),NULL值的数量,数据分 ...

  9. ecshop后台根据条件查询后不填充table 返回的json数据，content为空？

    做ecshop后台开发的时,根据条件查询后,利用ajax返回的content json数据内容为空,没有填充table 效果 预期效果 问题: make_json_result($smarty -&g ...

随机推荐

  1. JB for iOS 9.3

    令人期待已久的JB再度现世,真是望穿秋水,千呼万唤始出来~ http://www.pangu.io/?flag=cn JB的过程顺利不卡关. 完成后就可以看到心爱的Cydia出现在桌面上了. 还需要A ...

  2. Android手机与计算机间的”信任关系”

    在iDevices(如iPhone.iPad等等)的取证方面,那个代表”信任关系”的plist无疑是最为关键的迹证,只要有了它,哪怕是最新机型的iDevice及最新版的iOS,且有着指纹保护或pass ...

  3. 014安装Linux系统到开发板

    SD卡----->开发板 1.安装准备: 硬件连接 USB下载线,一端连到开发板,另一端连到PC机: 串口线连好: 电源线连好: 设置开发板从SD卡启动: 2.打开开发板进入选单界面: 进入选单 ...

  4. jQuery层级元素选择器

    第一个: 1:空格表示所有 2:> 第一层 3:+/- 同级 +:之后的第一个元素 -:之后所有同级 d 代码示例: <!DOCTYPE html PUBLIC "-//W3C/ ...

  5. C++ 必知必会：条款16 指向成员函数的指针并非指针

    这一点与指向成员的指针类似,其实现可能更加复杂,因为成员函数同时还存在虚拟函数,需要动态绑定执行动作.当然这种属性是属于函数本身的,此处表达的是指针不涉及函数的属性问题. 1: class shape ...

  6. 鼠标HOVER时区块动画旋转变色的CSS3样式掩码

    鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...

  7. ASP.NET中Server对象的几个方法

    HtmlDecode 已重载. 对已被编码以消除无效 HTML 字符的字符串进行解码.HtmlEncode 已重载. 对要在浏览器中显示的字符串进行编码.MapPath 返回与 Web 服务器上的指定 ...

  8. 取消双向绑定、输出html代码

    1.取消双向绑定,在绑定的值前加*号. 如: <div id="app"> <p>{{*message}}</p> </div> 2 ...

  9. HBase分布式安装

    安装HBase之前需要先安装Hadoop,因为HBase是运行在Hadoop集群上的.安装Hadoop可以参照http://www.cnblogs.com/stGeekpower/p/3307289. ...

  10. 深入理解 /etc/fstab文件

    发布:thebaby   来源:net   [大 中 小] /etc/fstab是用来存放文件系统的静态信息的文件.位于/etc/目录下,可以用命令less /etc/fstab 来查看,如果要修改的 ...