- 浏览: 124047 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
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 1169<!DOCTYPE html PUBLIC " ... -
50个必备的实用jQuery代码段
2011-10-13 10:56 979本文会给你们展示50个jq ... -
Jquery uploadify实现文件上传 flash方式
2011-09-25 14:28 2768使用 Jquery的插件 uploadify 实现文件的上传 ... -
springmvc+dwz+xheditor实现上传图片及swf 视频
2011-09-23 17:30 6665注意:如果使用了apache fileupload上传方法,则 ... -
js操作table控制tr jquery 两个table左右移动
2011-09-23 16:16 4661一.关于动态操作select的 ... -
javascript基础知识小结
2011-06-12 01:16 909javascript基础知识 undefind:表示不确定的 ... -
Jquery读取本地文件内容
2011-05-12 14:48 5160$("#one a").css(&qu ... -
jQuery性能优化
2011-05-12 14:10 7151.总是从ID选择器开始继 ... -
字符数组和数值数组排序sort
2011-05-12 14:02 11261.字符数组 var members=["Chi ... -
Jquery Ajax 提交 级联实现
2011-05-12 13:55 1174页面代码 <div> 省 ... -
用于验证同时可以给一个或多个用户发送邮件的邮件地址验证:
2011-05-12 13:46 1041用于验证同时可以给一个或多个用户发送邮件的邮件地址验证: ... -
Jquery ajax请求Struts2 action 返回xml数据
2011-05-12 13:42 1876Jquery 发送ajax请求,action 或servlet ... -
项目里用到的Jquery,json,struts2结合
2011-05-12 13:19 1487struts.xml <?xml version=& ... -
Jquery基础知识
2011-01-04 14:08 8531.特点: 小巧 功能强 跨浏览器 ...
相关推荐
jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽,按列排序,并可以保存排序后的结果
<h1 class="datouwang">jQuery表格列自由拖动排序 <table id="tableSort"> 点击排序"> 序列 点击排序"> 名称 点击排序"> 数量 点击排序"> 单价(Q点) 点击排序"> 总计(Q点) <td>1 农场话费A ...
经过修改,适合bootstrap table拖动排序的jQuery-UI sortable
jquery+jquery.tablednd_0_5.js+jquery.tablesorter.js实现表格排序和拖拽行,可以按照列的条件先排序,然后再拖动行进行排序。
主要介绍了使用jquery实现的鼠标拖动排序Li或Table,需要的朋友可以参考下
表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本
本插件基于Jquery,可实现table中鼠标拖动选中行进行排序的功能,提供拖动前、拖动中、拖动后的回调方法,可灵活的对拖动不同阶段进行控制。
主要为大家详细介绍了比较实用的jquery拖动排序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery动态改变列宽,可以实现拖动jQuery动态改变列宽,可以实现拖动
这是一款仿Excel样式的jquery表格排序插件。该jquery表格排序插件基于bootstrap表格,它表格列支持按英文字母或数字的升序和降序排列,支持在表格列中按关键字进行搜索,支持过滤不需要的表格列。
1、vue项目中的表格需要实现行拖拽功能 2、表格使用element组件库中el-table 方案介绍 Sortable.js 介绍:Sortable.js是一款轻量级的拖放排序列表的js插件 引用自官方文档:No jQuery required. Supports Meteor, ...
本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法,供大家参考,具体内容如下 此为网上资源demo自己做了修改,记录下方便日后的学习。 效果展示: 代码展示: <!doctype html> <...
link rel=stylesheet href=Public/css/jquery-ui.min.css> [removed][removed] 2.给元素附上sortable类 <tr></tr> <tr></tr> </tbody> 3.开启并配置 $(function() { $(.sortable).sortable({
想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置。 之前我有文章:,...
tablesorter 这个jQuery插件能够将带THEAD与TBODY标签的标准HTMLTable转换成一个可排序的表格。tablesorter能够排序多种数据类型包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型...
项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个Angular的插件:...我们要做的事情,加载数据,拖拽排序并输出当前顺序: js代码: [removed][removed] [removed][removed] [removed][removed] <scri
1.引入文件 ...link rel=stylesheet href=Public/css/jquery-ui.min.css> [removed][removed] 2.给元素附上sortable类 <tr></tr> <tr></tr> 3.开启并配置 $(function() { $(.sortable).sorta
XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子 <br>在网络上找到这个东西,感觉很不错,和大家分享下