首页 > 其他分享 >colResizable表格列可拖动,表头不能固顶

colResizable表格列可拖动,表头不能固顶

时间:2022-11-28 14:22:06浏览次数:32  
标签:colResizable 表格 列可 colRTab 表头 table 固顶

<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,表格,列可,colRTab,表头,table,固顶
From: https://www.cnblogs.com/liufeiran/p/16932080.html

相关文章

  • el-table表头斜线
    在做项目是接到一个需求,表头第一个单元格斜线分割,效果如下图  刚开始把我弄得有点懵,然后去element官网看了看文档,发现el-table支持自定义表头,那问题就好解决了,直接上......
  • el-table固定表头
    前提:getTableMaxHeight.js/** *@param{Number}difference_height需要减去的值 *@return{Number}table的最大高度值 */functiongetTableMaxHeight(differ......
  • Java生成Excel自定义导出合并(多级表头)
    一、糊涂工具包1.导入依赖(注:导入的依赖可能会和poi依赖包冲突,导致项目启动不了,我这里poi-ooxml依赖包用的4.1.2版本,可以解决冲突问题)<!--糊涂工具包--><dependency><g......
  • vxe-table表格数据为空,表头右侧出现了空白区
    需求:没有body(.vxe-table--body-wrapper)的表格(仅展示表头)1、如果直接将表格.vxe-table--body-wrapper设置为display:none;表头则无法撑开宽度百分比  2、将.vxe-tab......
  • springboot+easypoi模板导出Excel 动态表头+多表格(一个sheet)
    1.需求:将此页面的几个表格导出其中表头中的仓库集散地是是动态生成的。首先制作Excel模板:代码:@Resource privateRedisServiceredisService; @Override......
  • Handsontable合并表头,实现rowspan效果
    背景使用handsontable只能进行跨列的合并,如果跨行的话就有api提供,我们需要对表头进行跨行合并实现这里学习这边博文提供的一个思路,就是假设需要对表格第一行的跨行合并......
  • HTL6217系列可用5节 ~7节电池的串联连接
    概述HTL6217系列内置高精度电压检测电路和延迟电路,是用于锂离子可充电电池的二次保护IC。通过将各节电池间短路,可适用于5节 ~7节电池的串联连接。封装MSOP-10特点1、针对各......
  • selenium获取所有(包括被隐藏)的表头字段文本信息
      需要获取一个列表表头共18个字段的列表的表头其中前两个和后两个字段都在页面固定中间的字段需要根据滚动条滑动才能显示完全遇到的问题:正常按照以前的逻辑:先......
  • vue table表头固定,内容滚动实现
    先上效果   1<template>2<divclass="simpTable">3<table>4<thead>5<th6v-for="(item,index)oftableHe......
  • EasyPoi 导出Excel(ExcelExportEntity生成表头)
    [引入依赖]<!--easypoi--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><ve......