<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. c#面试题及答案

    1:a=10,b=15,在不用第三方变量的前提下,把a,b的值互换2:已知数组int[] max={6,5,2,9,7,4,0};用快速排序算法按降序对其进行排列,并返回数组3:请简述面向对象的多态的 ...

  2. SpringData JPA 排除 扫描 exclude-filter 不能使用解决

    在加上JPA的配置外,还需要再加上 : xmlns:repository="http://www.springframework.org/schema/data/repository&quo ...

  3. view上添加点手势 button无法响应点击事件

    在view 上添加手势 有的时候  会把Button的 点击事件盖掉,这个 时候 我们用UITapGestureRecognizer的代理方法 //手势的代理方法 - (BOOL)gestureRec ...

  4. Data Mover Script Templates

    Datamover is probably the best way to export and import data between PeopleSoft databases and the sc ...

  5. 显示或隐藏一个Grid

    The Rowset class contains two methods that can be used to show and hide all rows: ShowAllRows() Hide ...

  6. silverlight水印

    1.自定义类 using System; using System.Net; using System.Windows; using System.Windows.Controls; using Sy ...

  7. 使用WIF实现单点登录Part I——Windows Identity Foundation介绍及环境搭建

    首先先说一下什么是WIF(Windows Identity Foundation).由于各种历史原因,身份验证和标识的管理一般都比较无规律可循.在软件里加入“身份验证”功能意味着要在你的代码里混进处理 ...

  8. MVC 区分是哪按键提交FORM

    原理: 引用model(@model modelName)的画面,提交到后台的model对象,属性与前台post标签name属性对应来获取值. 前台: @model myModel @using(Ht ...

  9. Oracle自用脚本（持续更新）

    --查询Oracle正在执行的sql语句及执行该语句的用户 SELECT b.sid oracleID, b.username 登录Oracle用户名, b.serial#, spid 操作系统ID, ...

  10. ref和out的区别

    ref类型参数是按地址传递,能改变原来的数值.使用ref传参前,变量必须赋值. 带有ref类型参数的函数,不会清空变量,所以离开该函数的时候,所有ref引用的变量可以赋值也可以不赋值. out类型参数 ...