colResizable表格

colResizable表格列可拖动，表头不能固顶 
<style type="text/css">
    #colRTab{
        width:100%;
        border-collapse: collapse;
        table-layout: fixed;
    }
    #colRTab td{
        border:1px #dddddd solid;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
<body>
    <table class="basic_table_con basic_table_bottom" id="colRTab">
        <tr>
            <td width="4.4%"><input type="checkbox" id="QuotationListCheckAll" onclick="CheckBoxGroup(this, 'QuotationListCheckOne')" /></td>
            <td width="13.8%">报价单编号</td>
            <td width="12.9%">申请人</td>
            <td width="12%">联系电话</td>
            <td width="11.5%">报价总金额</td>
            <td width="9.7%">创建者</td>
            <td width="14.4%">创建时间</td>
            <td width="21.3%" style="border-right:none;">操作</td>
        </tr>
        <tbody class="basic_table_con basic_table_bottom" id="QuotationList" style="display:none;">
            <!-- ko foreach:QuotationListrows -->
            <tr data-bind="css: { basic_table_trbg: ($index()%2==0) }">
                <td width="4.4%"><input type="checkbox" class="QuotationListCheckOne" onclick="CheckBoxOne('QuotationListCheckAll', 'QuotationListCheckOne')" data-bind="value:Quotation_ID" /></td>
                <td width="13.8%" data-bind="text:Quotation_ID"></td>
                <td width="12.9%" data-bind="text:Apply_Customer"></td>
                <td width="12%" data-bind="text:Apply_Tel"></td>
                <td width="11.5%" data-bind="text:Amount.toFixed(2)"></td>
                <td width="9.7%" data-bind="text:Create_SubUser"></td>
                <td width="14.4%" data-bind="text:FormatallDate(Create_Date)"></td>
                <td width="21.3%" style="border-right:none;">
                    <span class="msk_table_btn1 msk_btn" data-bind="click:OpenQuotationEditView.bind($data,Quotation_ID)">编辑</span>
                    <span class="msk_table_btn2 msk_btn" data-bind="click:OpenQuotationAddNeedView.bind($data,Quotation_ID)">生成需求单</span>
                </td>
            </tr>
            <!-- /ko -->
        </tbody>
    </table>
</body>

<script src="http://www.h5al.cn/js/jquery-1.11.3.min.js"></script>
<script src="~/Scripts/colResizable-1.6.min.js"></script>
<script>
    $("#colRTab").colResizable({
        liveDrag: true,
        draggingClass: "dragging"
    })
</script>

 表头必须在table里，“#colRTab”表格中必须包含表头和表体，js初始化方法要放在获取完数据表格绑值完再执行

 

colResizable表格表头固顶，表头可拖动，列不可拖动

<style type="text/css">
.basic_table table {
    width: 100%;
    text-align: center;
}
.wgw_downtab td{
    height:30px;
    text-align:center;
    line-height:28px;
    border:#c5c5c5 1px solid;
    border-top:none;
 }
.table-body-wrapper {
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.table-body tr td {
    border:1px #dddddd solid;
    /* 关键样式：不设置padding:0会导致无法完全对齐 */
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top:5px;
    padding-bottom: 5px;
}
.delete2_notice {
    width: 50px;
    height: 22px;
    border: #0099cc 1px solid;
    color: #0099cc;
    text-align: center;
    cursor: pointer;
    margin: 0 3px;
    padding: 1px 8px;
}
.delete2_notice:hover {
    background-color: #0099cc;
    color: #fff;
}
</style>
</head>

<body>
<div class="basic_table" style="width: 98%; margin: 10px auto;">
    <div style="width: 770px;border: 1px solid #c5c5c5;">
        <table class="table-header wgw_downtab basic_table_con basic_table_bottom" style="table-layout: fixed;border-collapse: collapse;width: 100%;">
            <tr>
                <td style="width:40px;"><input type="checkbox"/></td>
                <td style="width:160px;">配件编码</td>
                <td style="width:160px;">配件名称</td>
                <td style="width:160px;">数量</td>
                <td style="width:160px;">价格</td>
                <td style="width:auto;">操作</td>
            </tr>
        </table>
        <div class="table-body-wrapper">
            <table class="table-body" id="content" style="table-layout: fixed;border-collapse: collapse;width: 100%;"></table>
        </div>
    </div>
</div>
</body>    
<script src="http://www.h5al.cn/js/colRjquery.min.js"></script>
<script src="http://www.h5al.cn/js/colResizable-1.6.min.js"></script>
<script type="text/javascript">
var list = $("#content");
var str = ''
$(function() {
    for(var i=0;i<10;i++){
        str += "<tr>"
        str += "<td style='width:40px;'><input type='checkbox'/></td>"
        str += "<td style='width:160px;'>HT00250011</td>"
        str += "<td style='width:160px;'>测试配件名称</td>"
        str += "<td style='width:160px;'>12</td>"
        str += "<td style='width:160px;'>123.25</td>"
        str += "<td style='width:auto;'><span class=\"delete2_notice\">详情</span></td>"
        str += "</tr>"
    }

    list.html(str);
    $(".table-header").colResizable({
        liveDrag: true,
        onDrag: syncCol
    });
    //页面加载完成后，手动对齐一次
    syncCol();
    //window resize的时候，会出现列不完全对齐的情况，手动对齐
    $(window).resize(function() {
        syncCol();
    });
    
});

function syncCol() {
    $('.table-body tr:first-child td').each(function() {
        $(this).width($('.table-header tr td:eq(' + $(this).index() + ')').css('width'));
    });
}
</script>

必须用此版本jq，否则会出现滚动条占位导致内容与表头不能对齐的问题

 

posted @ 2022-11-28 14:15  石头记1  阅读(149)  评论(0)    收藏  举报