源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

JGrid中拖动改变列宽的脚本原型

时间：2021-09-12 21:54 编辑：来源：阅读：
扫一扫，手机访问

摘要：JGrid中拖动改变列宽的脚本原型

顺便，把我研究过的，如何隐藏、显示一列的方法也实现了一把。但是这个功能和 css border-collapse:collapse; 有冲突，详情见代码2

<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta> 
jgrid拖动改变表格宽度 
 
 
 
<div> 
<table border="1" cellpadding="0" cellspacing="0" id="dataTable" style="table-layout:fixed;"> 
    <colgroup> 
        <col style="width:200px;"></col> 
        <col style="width:100px;"></col> 
        <col style="width:100px;"></col> 
        <col style="width:100px;"></col> 
        <col style="width:100px;"></col> 
    </colgroup> 
    <tr> 
        <td>拖动我1</td> 
        <td>拖动我2</td> 
        <td>拖动我3</td> 
        <td>拖动我4</td> 
        <td>拖动我5</td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
</table> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

修改版2

<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta> 
jgrid拖动改变表格宽度_修改版 
 
 
 
<div> 
<table border="1" cellpadding="0" cellspacing="0" id="dataTable" style="table-layout:fixed;border-collapse:collapse;"> 
    <colgroup> 
        <col style="width:200px;"></col> 
        <col style="width:100px;"></col> 
        <col style="width:100px;"></col> 
        <col style="width:100px;"></col> 
        <col style="width:100px;"></col> 
    </colgroup> 
    <tr> 
        <td>拖动我1</td> 
        <td>拖动我2</td> 
        <td>拖动我3</td> 
        <td>拖动我4</td> 
        <td>拖动我5</td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
</table> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

ff下拖动时一大块影子是怎么产生的呢

是故意显示出来的。
把 -moz-opacity:0.1;opacity: 0.1 改掉。

全部评论(0)

上一篇：JS实现队列的先进先出功能示例
下一篇：javascript中Date对象的getDay方法使用指南

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2026 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部