eric.zhang
- 浏览: 127836 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
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>
左边的表格是源数据，选中后即会插入到右表，右表取消勾选，会自动删除行，对应的左边行也会取消选中。
- 大小: 80.8 KB
分享到：
发表评论
-
一些常用的正则表达式
2011-12-01 21:21 1296<!DOCTYPE html PUBLIC " ... -
50个必备的实用jQuery代码段
2011-10-13 10:56 1078本文会给你们展示50个jq ... -
Jquery uploadify实现文件上传 flash方式
2011-09-25 14:28 2842使用 Jquery的插件 uploadify 实现文件的上传 ... -
springmvc+dwz+xheditor实现上传图片及swf 视频
2011-09-23 17:30 6763注意：如果使用了apache fileupload上传方法，则 ... -
js操作table控制tr jquery 两个table左右移动
2011-09-23 16:16 4748一.关于动态操作select的 ... -
javascript基础知识小结
2011-06-12 01:16 956javascript基础知识 undefind:表示不确定的 ... -
Jquery读取本地文件内容
2011-05-12 14:48 5223$("#one a").css(&qu ... -
jQuery性能优化
2011-05-12 14:10 7501.总是从ID选择器开始继 ... -
字符数组和数值数组排序sort
2011-05-12 14:02 11911.字符数组 var members=["Chi ... -
Jquery Ajax 提交 级联实现
2011-05-12 13:55 1201页面代码 <div> 省 ... -
用于验证同时可以给一个或多个用户发送邮件的邮件地址验证：
2011-05-12 13:46 1135用于验证同时可以给一个或多个用户发送邮件的邮件地址验证： ... -
Jquery ajax请求Struts2 action 返回xml数据
2011-05-12 13:42 1916Jquery 发送ajax请求，action 或servlet ... -
项目里用到的Jquery,json,struts2结合
2011-05-12 13:19 1531struts.xml <?xml version=& ... -
Jquery基础知识
2011-01-04 14:08 9021.特点: 小巧 功能强 跨浏览器 ...
相关推荐
"实现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 文件...