- 浏览: 127354 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
calosteward:
赞一个。 谢谢分享了~非常有用。 —————————————— ...
项目里用到的Jquery,json,struts2结合 -
zhouylf:
文章都还行,就是变量名起的好恶心,“wzXxfbPdtp”还 ...
Springmvc3实现文件上传 -
zongshoujin:
老大 List和Map 在前台解析不出来,我看了下 是j ...
struts2返回JSON,jquery解析JSON(返回的可能是LIST,MAP,对象,单个值) -
kfjihailong:
269565478@qq.com 求源码
springmvc+dwz+xheditor实现上传图片及swf 视频 -
eric.zhang:
jieAmei 写道能给我发一下这个代码吗?谢谢,452909 ...
dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
话不多说,代码如下,
需要用到Jquery的如下JS:
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.sortable.js
jquery.js
jsp页面:
左边的表格是源数据,选中后即会插入到右表,右表取消勾选,会自动删除行,对应的左边行也会取消选中。
需要用到Jquery的如下JS:
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.sortable.js
jquery.js
jsp页面:
<script src="${ctx}/scripts/jqueryUI/jquery.ui.core.js"></script> <script src="${ctx}/scripts/jqueryUI/jquery.ui.widget.js"></script> <script src="${ctx}/scripts/jqueryUI/jquery.ui.mouse.js"></script> <script src="${ctx}/scripts/jqueryUI/jquery.ui.sortable.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ //设置查询模块的 栏目代码选中 var v_lmdm = $("#wzxxfbgjpxForm #lmdmHidden").val(); if(v_lmdm != '' && v_lmdm!=undefined){ var t_select = $("#wzxxfbgjpxForm #lmdm")[0]; var t_length = t_select.options.length; for(var i = 0 ;i < t_length ; i++){ if(t_select.options[i].value==v_lmdm){ t_select.options[i].selected = "selected"; } } } //右表的行添加 自由拖动排序功能 $("#rightTable tbody").sortable({stop:function(event,ui){}}); $("#rightTable tbody").disableSelection(); //给左右表添加鼠标移入移出 颜色 变化功能 $("#rightTable tbody tr").live("mousemove ",function(){ $(this).css("background","#d1e5ff"); }); $("#rightTable tbody tr").live("mouseout ",function(){ $(this).css("background",""); }); $("#leftTable tbody tr").live("mousemove ",function(){ $(this).css("background","#d1e5ff"); }); $("#leftTable tbody tr").live("mouseout ",function(){ $(this).css("background",""); }); //日期默认显示当前日期 var beginDate = $("#wzxxfbgjpxForm #fbsjBegin").val(); var endDate = $("#wzxxfbgjpxForm #fbsjEnd").val(); if(beginDate == '' || beginDate == 'null'){ $("#wzxxfbgjpxForm #fbsjBegin").val($("#wzxxfbgjpxForm #currentDate").val()); } if(endDate == '' || endDate == 'null'){ $("#wzxxfbgjpxForm #fbsjEnd").val($("#wzxxfbgjpxForm #currentDate").val()); } }); //从左表 到 右表 function leftToRight(temp,v_gjid){ //当点击 左表 某行被选中时 if(temp.checked){ var t_bt = $("#"+v_gjid).next().attr("title"); var t_zz = $("#"+v_gjid).next().next().attr("title"); var v_tr = '<tr id="'+v_gjid+'" class="'+v_gjid+'"><td class="rightGjid" style="text-align: center;"><input type="checkbox" name="itemsRight" checked="checked" onclick="javascript:rightToLeft(\''+v_gjid+'\')"></td>' + '<td class="rightBt" title="'+t_bt+'">'+t_bt+'</td>' + '<td class="rightZz" style="text-align: center;" title="'+t_zz+'">'+t_zz+'</td>' + '<td class="rightSfxg" style="text-align: center;"><input type="checkbox" name="sfxg"></td>' + '<td class="rightSfrd" style="text-align: center;"><input type="checkbox" name="sfrd"></td>' + '</tr>'; //插入新行到右表 $("#rightTable tbody").append(v_tr); } //当点击 左表 某行没被选中时 else{ //删除对应的右表行 $("#rightTable ."+v_gjid).empty(); $("#rightTable ."+v_gjid).remove(); } } // 从右表 到左表 function rightToLeft(v_id){ //取得 右表中点击行的 标题,作者 var v_bt = $("#rightTable ."+v_id).children().eq(1).attr("title"); var v_zz = $("#rightTable ."+v_id).children().eq(2).attr("title"); $("#rightTable ."+v_id).empty(); $("#rightTable ."+v_id).remove(); var leftTr = $("#leftTable #"+v_id); if(leftTr !='' && leftTr != 'undefined' && leftTr != 'null' && leftTr.size()>0){ $("#leftTable #"+v_id).children().removeAttr("checked"); } else{//如果右表的行 在左表中没有,则需要添加新行 var trNum = $("#leftTable tbody tr").size(); var no = trNum+1; var trLeft = '<tr><td style="text-align: center;">'+no+'</td><td id="'+v_id+'" style="text-align: center;"><input type="checkbox" name="items" onclick="javascript:leftToRight(this,\''+v_id+'\');"></td>' +'<td title="'+v_bt+'">'+v_bt+'</td>' +'<td style="text-align:center;" title="'+v_zz+'">'+v_zz+'</td></tr>'; //插入新行到左表 $("#leftTable tbody").append(trLeft); } } //保存右表已经 排好序的 稿件 function saveGjPx(){ //排好序的 稿件ID数组 var gjidArr = new Array(); $(".rightGjid").each(function(i){ gjidArr[i]=$(this).parent().attr("class"); }); var btArr = new Array(); $(".rightBt").each(function(i){ btArr[i]=$(this).text(); }); var zzArr = new Array(); $(".rightZz").each(function(i){ zzArr[i]=$(this).text(); }); var sfxgArr = new Array(); $(".rightSfxg").each(function(i){ if($(this).children().attr("checked") == "checked"){ sfxgArr[i]="checked"; }else{ sfxgArr[i]="false"; } }); var sfrdArr = new Array(); $(".rightSfrd").each(function(i){ if($(this).children().attr("checked")=="checked"){ sfrdArr[i]= "checked"; }else{ sfrdArr[i]="false"; } }); var parameters = new Object(); parameters["gjidArr"]=gjidArr.toString(); parameters["zzArr"]=zzArr.toString(); parameters["btArr"]=btArr.toString(); parameters["sfxgArr"]=sfxgArr.toString(); parameters["sfrdArr"]=sfrdArr.toString(); parameters["lmdm"] = $("#wzxxfbgjpxForm #pxselectedLMXXs").val(); $.post("${ctx}/wzxxfbgjpx/saveOrder.json", parameters,function(data){ if(data["message"]=='success'){ alert("保存成功!"); } },"json"); } function checkQuery(){ var lmdm = $("#wzxxfbgjpxForm #pxselectedLMXXs").val(); var start = $("#wzxxfbgjpxForm #fbsjBegin").val(); var end = $("#wzxxfbgjpxForm #fbsjEnd").val(); if(lmdm == ''){ alert("栏目代码不能为空!"); return false; } if(start==''){ alert("开始日期不能为空!"); return false; } if(end==''){ alert("结束日期不能为空!"); return false; } return true; } //选择 栏目 function px_toSelectLMEdit(){ var opts = px_getDialogOptions(); var url="${ctx}/wzxxfbgjpx/selectLMTree"; $.pdialog.open(url, "wzxxfbgjpx_selectLM_dialog", "选择栏目", opts); } function px_getDialogOptions(){ var options = {}; options.width = 640; options.height = 360; options.max = false; options.mask = true; options.maxable = false; options.minable = false; options.fresh = false; options.resizable = false; options.drawable = false; options.close = true; options.param = ""; return options; } //--> </script> <div class="pageHeader"> <form id="wzxxfbgjpxForm" action="${ctx}/wzxxfbgjpx/search" method="post" onsubmit="return navTabSearch(this)"> <input type="hidden" id="lmdmHidden" name="lmdmHidden" value="${lmdm }"> <input type="hidden" id="currentDate" value="<fmt:formatDate value='${now }' pattern='yyyy-MM-dd'/>"/> <div class="searchBar"> <table class="searchContent"> <tr> <td class="tdLabel">栏目分类:<font color="red"><b>*</b></font></td> <td> <table> <tr> <td><input type="text" id="pxselectedLMMCs" name="pxselectedLMMCs" value="${pxLmmc }" readonly="readonly" size="30" /></td> <td><input type="hidden" id="pxselectedLMXXs" name="pxselectedLMXXs" value="${pxLmdm }"><span onclick="px_toSelectLMEdit();"><a class="btnLook" href="#"><span>栏目</span></a></span></td> </tr> </table> </td> <td class="tdLabel">发布时间:<font color="red"><b>*</b></font></td> <td colspan="3"> <table> <tr> <td> <input type="text" id="fbsjBegin" name="fbsjBegin" class="date" pattern="yyyy-MM-dd" readonly="readonly" value="<fmt:formatDate value='${query.fbsjBegin}' pattern='yyyy-MM-dd'/>"/> </td> <td> <input type="text" name="fbsjEnd" id="fbsjEnd" class="date" pattern="yyyy-MM-dd" readonly="readonly" value="<fmt:formatDate value='${query.fbsjEnd}' pattern='yyyy-MM-dd'/>"/> </td> </tr> </table> </td> <td> <button type="submit" onclick="return checkQuery();">检索</button><button type="reset">重置</button> </td> </tr> </table><br> <span><font color="red">*仅可对栏目分类下的已发布的稿件进行统一排序;已排序的数据查询时不受发布时间约束;在排序列表中对数据进行上下拖动即可实现排序。</font> </span> </div> </form> </div> <div class="pageContent" id="wzxxfbgjspDiv"> <div class="panelBar"> <ul class="toolBar"> </ul> </div> <!-- 这里的layoutH是为了调整table的高度,如下面的分页条不见了,尝试增加layoutH --> <div layoutH="86" id="displayGjPxDiv" style="border: thin solid #99BBE8;overflow: hidden;" align="center"> <div style="border: thin solid #99BBE8;width: 860px;height: 400px;overflow: auto"> <div style="width: 390px;float: left;"> <div style="line-height: 25px;text-align: center;background: #d1e5ff;"><b>可选列表</b></div> <table width="100%" border="1px" id="leftTable" > <thead> <tr bgcolor="#99BBE8"> <th width="20px"> </th> <th width="25px"/> <th width="255px" style="line-height: 20px;text-align: center;">稿件标题</th> <th width="90px" style="line-height: 20px;text-align: center;">作者</th> </tr> </thead> <tbody> <c:forEach items="${gjList}" var="item" varStatus="status"> <tr> <td style="text-align: center;">${status.index+1}</td> <td id="${item.gjid }" style="text-align: center;"><input type="checkbox" name="items" onclick="javascript:leftToRight(this,'${item.gjid }');"></td> <td align="left" title="<c:out value='${item.bt}'/>"><c:out value='${item.bt}'/></td> <td style="text-align: center;" title="<c:out value='${item.zz}'/>"><c:out value='${item.zz}'/></td> </tr> </c:forEach> </tbody> </table> </div> <div style="width: 450px;float: right;"> <div style="line-height: 25px;text-align: center;background: #d1e5ff;"><b>排序列表</b></div> <table width="100%" border="1" id="rightTable"> <thead> <tr bgcolor="#99BBE8"> <th width="25px"/> <th width="255px" style="line-height: 20px;text-align: center;">稿件标题</th> <th width="90px" style="line-height: 20px;text-align: center;">作者</th> <th width="60px">是否新稿</th> <th width="60px">是否热点</th> </tr> </thead> <tbody> <c:forEach items="${pxList}" var="item" varStatus="status"> <tr id="${item.gjid }" class="${item.gjid }"> <td class="rightGjid" style="text-align: center;"><input type="checkbox" checked="checked" name="itemsRight" onclick="javascript:rightToLeft('${item.gjid }');"></td> <td class="rightBt" title="${item.bt }">${item.bt }</td> <td class="rightZz" style="text-align: center;" title="${item.zz }">${item.zz }</td> <td class="rightSfxg" style="text-align: center;"><input type="checkbox" name="sfxg"></td> <td class="rightSfrd" style="text-align: center;"><input type="checkbox" name="sfrd"></td> </tr> </c:forEach> </tbody> </table> </div> </div> <div style="margin: 10px;"><input type="button" onclick="javascript:saveGjPx();" value="保存"></div> </div> </div>
左边的表格是源数据,选中后即会插入到右表,右表取消勾选,会自动删除行,对应的左边行也会取消选中。
发表评论
-
一些常用的正则表达式
2011-12-01 21:21 1283<!DOCTYPE html PUBLIC " ... -
50个必备的实用jQuery代码段
2011-10-13 10:56 1055本文会给你们展示50个jq ... -
Jquery uploadify实现文件上传 flash方式
2011-09-25 14:28 2836使用 Jquery的插件 uploadify 实现文件的上传 ... -
springmvc+dwz+xheditor实现上传图片及swf 视频
2011-09-23 17:30 6748注意:如果使用了apache fileupload上传方法,则 ... -
js操作table控制tr jquery 两个table左右移动
2011-09-23 16:16 4740一.关于动态操作select的 ... -
javascript基础知识小结
2011-06-12 01:16 947javascript基础知识 undefind:表示不确定的 ... -
Jquery读取本地文件内容
2011-05-12 14:48 5214$("#one a").css(&qu ... -
jQuery性能优化
2011-05-12 14:10 7471.总是从ID选择器开始继 ... -
字符数组和数值数组排序sort
2011-05-12 14:02 11771.字符数组 var members=["Chi ... -
Jquery Ajax 提交 级联实现
2011-05-12 13:55 1198页面代码 <div> 省 ... -
用于验证同时可以给一个或多个用户发送邮件的邮件地址验证:
2011-05-12 13:46 1120用于验证同时可以给一个或多个用户发送邮件的邮件地址验证: ... -
Jquery ajax请求Struts2 action 返回xml数据
2011-05-12 13:42 1911Jquery 发送ajax请求,action 或servlet ... -
项目里用到的Jquery,json,struts2结合
2011-05-12 13:19 1526struts.xml <?xml version=& ... -
Jquery基础知识
2011-01-04 14:08 8931.特点: 小巧 功能强 跨浏览器 ...
相关推荐
"实现table表格可按行拖拽,按列排序,并可以保存排序后的结果"是一个常见的需求,尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...
在这个特定的场景中,`bootstrap-table.css`可能包含了拖拽排序的样式规则,如拖动行时的高亮效果、悬浮指示器等,使得交互过程更加直观。 接着,`jquery.tablednd.js`是基于jQuery的TableDnD库,实现了表格行的...
<h1 class="datouwang">jQuery表格列自由拖动排序 <table id="tableSort"> 点击排序"> 序列 点击排序"> 名称 点击排序"> 数量 点击排序"> 单价(Q点) 点击排序"> 总计(Q点) <td>1 农场话费A ...
本项目利用`jQuery`来实现拖动布局功能,允许用户自由调整元素的位置,并将这些排序结果保存到数据库中。下面我们将详细探讨实现这一功能的关键步骤和涉及的技术。 首先,我们需要引入`jQuery`库和一个拖动插件,如...
本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...
此压缩包"jQuery实现表格列表拖动排序特效源码.zip"显然是一个包含示例代码的资源,用于演示如何利用jQuery来创建具有拖动排序功能的表格列表。下面将详细介绍这个知识点及其相关技术。 首先,jQuery中的拖放(Drag...
为了提供更好的用户体验,开发者经常需要实现表格的交互功能,比如按照列排序和拖拽行排序。在这个项目中,我们将利用jQuery库以及两个插件:jquery.tablednd_0_5.js和jquery.tablesorter.js来实现这些功能。 首先...
经过修改,适合bootstrap table拖动排序的jQuery-UI sortable
在JavaScript原生开发中,实现表格(Table)行的拖动排序是一项常见的需求,尤其是在创建交互性强的数据展示页面时。这个功能允许用户通过鼠标拖动来改变表格中行的顺序,提升用户体验。以下是一个详细的知识点说明...
本文将详细讲解如何利用jQuery实现网格(Grid)中的列拖动功能,以及如何展示和压缩内容,以达到类似Excel的效果。 首先,我们需要引入jQuery库和jQuery Grid插件的相关文件。jQuery Grid通常基于jQuery UI,因此...
"bootstraptable-reorder-columns" 是这个库的一个扩展插件,专门用于实现表格列的拖拽排序功能。用户可以通过简单的拖放操作来调整表格列的顺序,极大地提高了用户在查看和管理大量数据时的灵活性和便利性。 在Web...
此压缩包"bootstrapTable jquery.tablednd行拖动调整资源.zip"包含了一组与BootstrapTable集成的jQuery Tablednd插件,主要用于实现表格行的拖放功能,以便用户可以通过直观的交互方式调整数据的顺序。 jQuery ...
一个用于实现拖拽排序的表格通常包含一个 `<table>` 元素,其中 `<thead>` 部分定义表头,而 `<tbody>` 部分则包含可排序的行 `<tr>`。为了能够拖动整个行,表头和行内每个单元格通常会设置指针样式(`cursor:...
综上所述,"jQuery UI拖拽到Table表格特效"是一个利用jQuery UI库实现的增强用户交互的实用功能。通过结合`draggable`和`droppable`,我们可以创建出一个直观、用户友好的界面,使用户能够轻松地将信息添加到表格中...
本篇文章将详细介绍如何使用jQuery实现表格列表的拖动排序功能,以及"jQuery表格列表拖动排序代码.zip"中的具体实现方法。 一、jQuery拖动排序的基本原理 jQuery拖动排序功能基于HTML5的拖放(Drag and Drop)API...
`sort_table.html`、`SortTable.js` 和 `DragTable.js` 这三个文件分别对应了页面结构、排序功能和拖动功能的实现。通过这些技术,我们可以创建出既美观又实用的数据管理工具,提升用户的使用体验。
在“Bootstrap Table两个Table数据之间行数据拖拽”的主题中,我们主要讨论的是如何实现用户可以通过拖放操作在两个Bootstrap表格之间移动行数据,这种功能在数据管理、比较或重新排序场景中非常实用。 首先,我们...
表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本
"bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题,让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能,首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...