- 浏览: 1007696 次
- 性别:
- 来自: 天津
文章分类
- 全部博客 (445)
- Java (22)
- J2EE (18)
- Flex (102)
- Flex-blazeds (1)
- Flex-FABridge (2)
- Flex4 (3)
- CheckStyle (2)
- PowerDesigner (0)
- POI (2)
- Java2Word (2)
- 杂项 (15)
- 日记 (3)
- 数据库-oracle (41)
- 数据库-SQLServer (7)
- 中间件 (1)
- 英语 (8)
- C# (43)
- ASP.net (72)
- ASP.net MVC (28)
- 微软-Entity Framework (19)
- JavaScript (22)
- JQuery (31)
- EasyUI (3)
- VS2010 (4)
- CVS (1)
- Tomcat (3)
- Linux (1)
- 遗留问题 (1)
- iphone (1)
- MAC (0)
- 系统 (2)
- Web Service (4)
- Cache Manager (1)
- PMP (1)
- WCF (10)
- BootstrapJs (1)
- Web API (6)
- Go语言 (0)
- 网络协议 (2)
- Redis (10)
- RabbitMQ (10)
- Git (3)
- Kafka (5)
- ELK (5)
- Nginx (3)
- 测试 (2)
最新评论
-
ygm0720:
Table行拖拽自己实现 -
程乐平:
Flex4开发视频教程(27集)下载http://bbs.it ...
Flex4教程 -
liuweihug:
Jquery+asp.net 后台数据传到前台js进行解析的办 ...
AJAX $.toJSON的用法或把数组转换成json类型 -
weilikk:
谢谢谢谢!!
javascript IE下不能用 trim函数解决方法 -
gxz1989611:
vigiles 写道请问楼主:[Fault] exceptio ...
blazeds推送技术至Flex
<table id="myTable"> <tr> <td> <a href="#" class="up">Up</a> <a href="#" class="down">Down</a> </td> <td> One444444444iiiiiiiiiiifdsfsdfsfsfsdfsdfsd </td> </tr> <tr> <td> <a href="#" class="up">Up</a> <a href="#" class="down">Down</a> </td> <td> Two </td> </tr> <tr> <td style="display:none"> <a href="#" class="up">Up</a> <a href="#" class="down">Down</a> </td> <td> Three </td> </tr> <tr> <td> <a href="#" class="up">Up</a> <a href="#" class="down">Down</a> </td> <td> Four </td> </tr> <tr> <td> <a href="#" class="up">Up</a> <a href="#" class="down">Down</a> </td> <td> Five </td> </tr> </table> <br> <a href="#" class="add">Add new</a>
$(function () { $(document).ready(function () { setCssRules(); $(".up,.down").live('click', function () { var row = $(this).parents("tr:first"); if ($(this).is(".up")) { row.insertBefore(row.prev()); } else { row.insertAfter(row.next()); } }); $(".add").click(function () { $('#myTable tr:last').after('<tr><td><a href="#" class="up">Up</a><a href="#" class="down">Down</a></td><td>New</td></tr>'); setCssRules(); $("#myTable").tableDnD(); }); }); function setCssRules() { // this would be better implemented in a CSS file jQuery('#myTable tr:not(\'#rowHeader\')') .css('cursor', 'pointer') .mouseover(function () { jQuery(this).css('background-color', '#c0c0c0'); }) .mouseout(function () { jQuery(this).css('background-color', '#ffffff'); }); } $('#myTable td').live('click', function () { var tr = $(this).parent(); for (var i = 0; i < tr.children().length; i++) { if (tr.children().get(i) == this) { var column = i; break; } } var tbody = tr.parent(); for (var j = 0; j < tbody.children().length; j++) { if (tbody.children().get(j) == tr.get(0)) { var row = j; break; } } for (var i = 0; i < tr.children().length; i++) { for (var j = 0; j < tbody.children().length; j++) { var tempcell = $('#myTable tr:eq(' + j + ') td:eq(' + i + ')'); $(tempcell).css('background-color', '#ffffff'); } } var cell = $('#myTable tr:eq(' + row + ') td:eq(' + column + ')'); if (cell.length == 0) { //alert('Undefined'); } else if (column == 1) { //alert(row+' '+column+' '+cell.text()); $(cell).css('background-color', '#c0c0c0'); } }); });
发表评论
-
js插件库系列导航
2016-06-02 13:41 559此系列为了建立一个有用的js插件和解决方案库,希望对您有 ... -
js Tree - 树形菜单插件
2016-06-02 13:41 1315js Tree - 树形菜单 ... -
easyui input 取值 赋值
2016-05-13 15:49 916$("#userdlg_useraccount& ... -
Jquery easyUI dialog的close和destroy
2016-05-13 15:48 4353之前在用easyUI的时候遇到一个问题,一直困扰着我。 ... -
jquery-validation 使用
2012-11-06 10:19 5710一、用前必备 官方 ... -
jQuery blockUI插件在ajax提交的时候的用法(block不起作用)
2012-10-23 10:36 5701在开发过程中出现一个问题,就是在IE7,8,9 ,Chrome ... -
AJAX $.toJSON的用法或把数组转换成json类型
2012-09-27 15:35 201891. html页面全部代码 <html> ... -
JQuery dialog弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
2012-09-07 16:55 5470搜索相关问题发现,其中主要问题是出在:JQuery会把Dial ... -
jquery dialog 详解
2012-09-07 16:49 12281还是先看例子吧。另外如果要拖动、改变dialog的大小的话 ... -
jquery操作dropdownlist和radiobuttonlist
2012-08-13 19:08 3037jquery获取ASP.NET服务器端控件dropdownli ... -
JS中showModalDialog 详细使用
2012-04-11 16:51 1156基本介绍: ... -
Window_Open详解
2012-04-11 16:51 935一、window.open()支持环境: Jav ... -
DIV中的image控件,放大,缩小,还原,拖拽
2012-02-10 11:21 5272<!DOCTYPE html PUBLIC " ... -
控制 iframe 内图片放大缩小
2012-02-09 09:09 4022index.asp 页面 <html> & ... -
Jquery框架
2011-11-15 15:52 14071. DWZ 官方网址:http://code. ... -
MVC 分页 JQuery Pager
2011-11-07 13:00 3159导入的包 <script type=" ... -
Jquery与.net MVC结合,通过Ajax
2011-10-14 09:55 2610在工作中做了这么一个东西。 Html端: @using T ... -
jQuery插件ASP.NET应用之AjaxUpload
2011-10-14 09:49 2326本次使用AJAXUPLOAD做为上传客户端无刷上传插件,其最新 ... -
Radio Button and CheckBox在FireFox中刷新自动改变选中项
2011-08-29 12:54 2762今天开发过程中出现了这样一个问题,我选中radio butto ... -
jQuery Supertextarea Plugin
2011-08-18 11:46 1246http://truthanduntruth.com/deve ...
相关推荐
1.附件内的源码是,是vue 和elementui实现table内的列可以随意拖拽的效果的代码。该代码在我的实际项目中已经应用。 2.table列的拖拽功能实现的核心就是改变 “表头列在数组中的位置”
jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽,按列排序,并可以保存排序后的结果
用jquery实现table拖拽列功能,可动态改变表格列宽度,并且实现table表格100%的问题,如果列缩小,则自动拉伸最后一列以实现table100%的效果,如果拉伸长度比原长度大,则显示x滚动条。
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽。Bootstrap Table可拖动列,需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-...
js实现table列头拖拽,。。。。。。
vue-easytable表格老版本有表格列宽拖功能,但是最新版插件反而不存在该功能,但是大部分表格数据存在...若将ve-table封装以组件形式引用,可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
实现了bootstrapTable 的列宽可鼠标拖动,方便查看列宽显示不完全的内容,前台js
Qt实现Table-->Table拖拽功能的工程
自己使用,该附件里的代码已经实现了使用vue 及elementui的table列的拖动功能。
ant-design-vue(可拖拽table).vue
无需修改已有代码,快速为jtable添加行间拖拽功能。 无需实现dnd相关接口,使用方便
修改bootstrap table设置列宽问题,增加插件和bootstrap table组合可随意拖动表格的列宽
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
bootstraptable拖拽js 包含 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
拖动单元格改变列宽或行高,可以扩展成表格设计器,改变tr 行高 td 列宽
原创亲测至少节约小白两天时间,本人前端小白搞了好几天才实现表格拖动排序。在网上找的(vue3+sortable.js根本跑不起来)网上好多例子在vue3下根据跑不起来于是,也没有对表格排序的例子。Vuedraggable 是基于并...
拖拽改变列宽的功能网上很多,但是拖拽改变行高的我搜了很久,也没有发现可以用的。所以利用原有改变行高的模版,自己写了一个原生javascrript改变列宽的模版。
NULL 博文链接:https://jifeng3321.iteye.com/blog/2403674
本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码,供大家参考,具体内容如下 不上图了 首先还是得添加三个文件,自己上网搜搜就行 [removed][removed] [removed][removed] <link href=~/Content/...
vue 使用 sortable 实现 el-table 拖拽排序功能 本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import Sortable from ...