bootstrap table实现iview固定列的效果

程序员文章站 2022-12-22 14:55:12

因为bootstrap自带的固定列效果满足不了公司需求，所以借助fixed-table这个插件完成了iview固定列的效果

左右两侧固定列，中间内容可以横向 ......</div> <div class="content"> <p>因为bootstrap自带的固定列效果满足不了公司需求，所以借助fixed-table这个插件完成了iview固定列的效果</p> <div> <div><!doctype html></div> <div><html lang="en"></div> <div><head></div> <div> <meta charset="utf-8" /></div> <div> <title>左右两侧固定列，中间内容可以横向拖动</title></div> <div> <link rel="stylesheet" href="css/fixed-table.css" /></div> <div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script></div> <div> <script src="js/fixed-table.js"></script></div> <div> <style></div> <div> .fixed-table-box{</div> <div> width: 800px;</div> <div> margin: 50px auto;</div> <div> }</div> <div> .fixed-table-box>.fixed-table_body-wraper{/*内容了表格主体内容有纵向滚动条*/</div> <div> max-height: 260px;</div> <div> }</div> <div> </div> <div> .fixed-table_fixed>.fixed-table_body-wraper{/*为了让两侧固定列能够同步表格主体内容滚动*/</div> <div> max-height: 240px;</div> <div> }</div> <br><div> .w-150{</div> <div> width: 150px;</div> <div> }</div> <div> .w-120{</div> <div> width: 120px;</div> <div> }</div> <div> .w-300{</div> <div> width: 300px;</div> <div> }</div> <div> .w-100{</div> <div> width: 100px;</div> <div> }</div> <div> .btns{</div> <div> text-align: center;</div> <div> }</div> <div> .btns button{</div> <div> padding: 10px 20px;</div> <div> }</div> <div> </style></div> <div></head></div> <div><body></div> <div> <div class="fixed-table-box row-col-fixed"></div> <div> </div> <div> <div class="fixed-table_header-wraper"></div> <div> <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"></div> <div> <thead></div> <div> <tr></div> <div> <th class="w-150" data-fixed="true"><div class="table-cell">日期</div></th></div> <div> <th class="w-120"><div class="table-cell">姓名</div></th></div> <div> <th class="w-120"><div class="table-cell">省份</div></th></div> <div> <th class="w-120"><div class="table-cell">市区</div></th></div> <div> <th class="w-300"><div class="table-cell">地址</div></th></div> <div> <th class="w-120"><div class="table-cell">邮编</div></th></div> <div> <th class="w-100" data-fixed="true" data-direction="right"><div class="table-cell">操作</div></th></div> <div> </tr></div> <div> </thead></div> <div> </table></div> <div> </div></div> <div> </div> <div> </div> <div> <div class="fixed-table_body-wraper"></div> <div> <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"></div> <div> <tbody></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> <td class="w-120"><div class="table-cell">王小虎</div></td></div> <div> <td class="w-120"><div class="table-cell">上海</div></td></div> <div> <td class="w-120"><div class="table-cell">普陀区</div></td></div> <div> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td></div> <div> <td class="w-120"><div class="table-cell">200333</div></td></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> <td class="w-120"><div class="table-cell">王小虎</div></td></div> <div> <td class="w-120"><div class="table-cell">上海</div></td></div> <div> <td class="w-120"><div class="table-cell">普陀区</div></td></div> <div> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td></div> <div> <td class="w-120"><div class="table-cell">200333</div></td></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> <td class="w-120"><div class="table-cell">王小虎</div></td></div> <div> <td class="w-120"><div class="table-cell">上海</div></td></div> <div> <td class="w-120"><div class="table-cell">普陀区</div></td></div> <div> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td></div> <div> <td class="w-120"><div class="table-cell">200333</div></td></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> <td class="w-120"><div class="table-cell">王小虎</div></td></div> <div> <td class="w-120"><div class="table-cell">上海</div></td></div> <div> <td class="w-120"><div class="table-cell">普陀区</div></td></div> <div> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td></div> <div> <td class="w-120"><div class="table-cell">200333</div></td></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> <td class="w-120"><div class="table-cell">王小虎</div></td></div> <div> <td class="w-120"><div class="table-cell">上海</div></td></div> <div> <td class="w-120"><div class="table-cell">普陀区</div></td></div> <div> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td></div> <div> <td class="w-120"><div class="table-cell">200333</div></td></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> <td class="w-120"><div class="table-cell">王小虎</div></td></div> <div> <td class="w-120"><div class="table-cell">上海</div></td></div> <div> <td class="w-120"><div class="table-cell">普陀区</div></td></div> <div> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td></div> <div> <td class="w-120"><div class="table-cell">200333</div></td></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> <td class="w-120"><div class="table-cell">王小虎</div></td></div> <div> <td class="w-120"><div class="table-cell">上海</div></td></div> <div> <td class="w-120"><div class="table-cell">普陀区</div></td></div> <div> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td></div> <div> <td class="w-120"><div class="table-cell">200333</div></td></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> <td class="w-120"><div class="table-cell">王小虎</div></td></div> <div> <td class="w-120"><div class="table-cell">上海</div></td></div> <div> <td class="w-120"><div class="table-cell">普陀区</div></td></div> <div> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td></div> <div> <td class="w-120"><div class="table-cell">200333</div></td></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> </tbody></div> <div> </table></div> <div> </div></div> <div> </div> <br><div> </div> <div> <div class="fixed-table_fixed fixed-table_fixed-left"></div> <div> <div class="fixed-table_header-wraper"></div> <div> <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"></div> <div> <thead></div> <div> <tr></div> <div> <th class="w-150"><div class="table-cell">日期</div></th></div> <div> </tr></div> <div> </thead></div> <div> </table></div> <div> </div></div> <div> </div> <div> <div class="fixed-table_body-wraper"></div> <div> <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"></div> <div> <tbody></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td></div> <div> </tr></div> <div> </tbody></div> <div> </table></div> <div> </div></div> <div> </div></div> <div> <div class="fixed-table_fixed fixed-table_fixed-right"></div> <div> <div class="fixed-table_header-wraper"></div> <div> <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"></div> <div> <thead></div> <div> <tr></div> <div> <th class="w-100"><div class="table-cell">操作</div></th></div> <div> </tr></div> <div> </thead></div> <div> </table></div> <div> </div></div> <div> </div> <div> <div class="fixed-table_body-wraper"></div> <div> <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"></div> <div> <tbody></div> <div> <tr></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> <tr></div> <div> <td class="w-100"></div> <div> <div class="table-cell"></div> <div> <a href="###">查看</a></div> <div> <a href="###">编辑</a></div> <div> </div></div> <div> </td></div> <div> </tr></div> <div> </tbody></div> <div> </table></div> <div> </div></div> <div> </div></div> <div> </div> <div> </div></div> <br><div> <div class="btns"></div> <div> <button type="button" id="empty_data">清空数据</button></div> <div> <button type="button" id="add_data">添加数据</button></div> <div> <button type="button" id="del_row">删除行</button></div> <div> </div></div> <br><div> <script></div> <div> //初始化fixedtable</div> <div> $(".fixed-table-box").fixedtable();</div> <br><div> //清空表格</div> <div> $("#empty_data").on("click", function (){</div> <div> $(".fixed-table-box").emptytable();</div> <div> });</div> <div> //添加数据</div> <div> $("#add_data").on("click", function (){</div> <div> $(".fixed-table-box").addrow(function (){</div> <div> var html = '';</div> <div> for(var i = 0; i < 5; i ++){</div> <div> html += '<tr>';</div> <div> html += ' <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>';</div> <div> html += ' <td class="w-120"><div class="table-cell">王小虎</div></td>';</div> <div> html += ' <td class="w-120"><div class="table-cell">上海</div></td>';</div> <div> html += ' <td class="w-120"><div class="table-cell">普陀区</div></td>';</div> <div> html += ' <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>';</div> <div> html += ' <td class="w-120"><div class="table-cell">200333</div></td>';</div> <div> html += ' <td class="w-100">';</div> <div> html += ' <div class="table-cell">';</div> <div> html += ' <a href="###">查看</a>';</div> <div> html += ' <a href="###">编辑</a>';</div> <div> html += ' </div>';</div> <div> html += ' </td>';</div> <div> html += '</tr>';</div> <div> }</div> <div> return html;</div> <div> });</div> <div> });</div> <div> //删除指定行</div> <div> $("#del_row").on("click", function (){</div> <div> $(".fixed-table-box").deleterow($(".fixed-table-box").children('.fixed-table_fixed-left').children('.fixed-table_body-wraper').find('tr').eq(0));</div> <div> });</div> <div> </script></div> <div></body></div> <div></html>具体网址忘了存了，有需要的小伙伴可自己查一下~</div> <div>次案例从一个网站下载，</div> <div> </div> <div>实现效果为：<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA5MjkvYl8wXzIwMTkwOTI5MjEzNzMyNzYxNy5wbmc=" alt="bootstrap table实现iview固定列的效果" title="bootstrap table实现iview固定列的效果"> </div> </div> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/1948205.html"> 使用css3的repeating-linear-gradient画虚线 </a> </p> <p> 下一篇： <a href="/article/1948207.html"> windows下安装mysql </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/1948206.html" target="_blank" title="bootstrap table实现iview固定列的效果"> <h2> bootstrap table实现iview固定列的效果 </h2> </a> </li> <li> <a href="/article/1915816.html" target="_blank" title="bootstrap-table实现表头固定以及列固定的方法示例"> <h2> bootstrap-table实现表头固定以及列固定的方法示例 </h2> </a> </li> <li> <a href="/article/1233986.html" target="_blank" title="bootstrap-table实现表头固定以及列固定"> <h2> bootstrap-table实现表头固定以及列固定 </h2> </a> </li> <li> <a href="/article/1204977.html" target="_blank" title="HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列_javascript技巧"> <h2> HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列_javascript技巧 </h2> </a> </li> <li> <a href="/article/1156212.html" target="_blank" title="HTML+CSS+JS实现TABLE固定列（常见浏览器兼容）的最佳实践_html/css_WEB-ITnose"> <h2> HTML+CSS+JS实现TABLE固定列（常见浏览器兼容）的最佳实践_html/css_WEB-ITnose </h2> </a> </li> <li> <a href="/article/1112975.html" target="_blank" title="如果做一个Table 固定的行和列的头， bootstrap_html/css_WEB-ITnose"> <h2> 如果做一个Table 固定的行和列的头， bootstrap_html/css_WEB-ITnose </h2> </a> </li> <li> <a href="/article/1043625.html" target="_blank" title="bootstrap table实现iview固定列的效果"> <h2> bootstrap table实现iview固定列的效果 </h2> </a> </li> <li> <a href="/article/993000.html" target="_blank" title="bootstrap-table实现表头固定以及列固定的方法示例"> <h2> bootstrap-table实现表头固定以及列固定的方法示例 </h2> </a> </li> <li> <a href="/article/976855.html" target="_blank" title="如何利用iview的Table组件实现将表格的列合并"> <h2> 如何利用iview的Table组件实现将表格的列合并 </h2> </a> </li> <li> <a href="/article/906766.html" target="_blank" title="HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列_javascript技巧"> <h2> HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列_javascript技巧 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>