jQuery实现表格拖动排序
原理就是利用mousedown、mouseover、mouseup事件实现拖动,并用Ajax实现保存结果。
JS代码如下:
<!--题目调序功能--> <script type="text/javascript"> var moveStart = false; //是否开始移动 var curTr; //待移动的tr var tarTr; //目标tr _run(function () { //鼠标按下 $("#tableDataList").find("tr").find("td:not(:last)").mousedown(function () { moveStart = true; curTr = $(this).parent(); curTr.find("td").addClass("highlightTd"); curTr.addClass("pointer"); }); //鼠标移入 $("#tableDataList").find("tr").mouseover(function () { var ch = "input[type=‘checkbox‘]"; if (moveStart == true && curTr.find(ch).attr("subid") != $(this).find(ch).attr("subid")) { if (curTr.offset().top > $(this).offset().top) { //上移 tarTr = $(this); tarTr.focus(); tarTr.before(curTr); } else { //下移 tarTr = $(this); tarTr.focus(); tarTr.after(curTr); } } }); //鼠标移出 $("#tableDataList").find("tr").mouseup(function () { if (moveStart == true) { moveStart = false; curTr.find("td").removeClass("highlightTd"); curTr.removeClass("pointer"); var subjectIds = ""; //存储ID集合 $("#tableDataList").find("input[type=‘checkbox‘][id!=‘checkAll‘]").each(function () { subjectIds += $(this).attr("subId") + ","; }); if (subjectIds != "") { //Ajax请求保存数据 $.ajax({ type: "POST", url: "#{ChangeSubjectsSortUrl}", data: "subjectIds=" + subjectIds.substr(0, subjectIds.length - 1), //传参 success: function (data) { if (data == "ok") { var i = 0; $("#tableDataList").find("tr:not(:first)").each(function () { i++; $(this).find("td:eq(3)").html(i); //更新题目序号显示 }); } } }); } } }); }); </script>
HTML代码如下(说明:框架会自动把<!-- BEGIN list -->和<!-- END list -->之间的内容绑定为列表):
<div class="Activity_Select_Index_Con"> <b class="Activity_Select_Index_Title">题目 <a href="#{viewAllLink}" title="预览所有题目" class="frmBox"> <img src="~img/edit.gif" />预览问卷</a> <a href="#{addLink}" title="添加题目" class="frmLink" loadto="divEdit" nolayout="999"> <img src="~img/add.gif" />添加</a> <a href="javascript:void(0);" onclick="batchDeleteClick()"> <img src="~img/delete.gif" /> 删除</a></b> <div class="SIMPO_Table" style="width: 100%"> <table id="tableDataList" border="0" cellspacing="0" cellpadding="0" style="-moz-user-select: none;" onselectstart="javascript:return false;"> <tr> <th width="36"> <input type="checkbox" name="checkbox" id="checkAll" onclick="checkAllClick(this)" /> </th> <th width="131"> <b>题目名称</b> </th> <th width="131"> <b>题目类型</b> </th> <th width="114"> <b>题目顺序</b> </th> <th width="114"> <b>题目分值</b> </th> <th width="100" align="center"> <b>操作</b> </th> </tr> <!-- BEGIN list --> <tr> <td align="center" valign="middle"> <input type="checkbox" name="checkbox" id="checkbox" subid="#{edu_QnSubject.Id}" /> </td> <td align="center" valign="middle"> <a href="#{PreviewItemLink}" class="SIMPO_Table_Name frmBox">#{edu_QnSubject.Title}</a> </td> <td align="center" valign="middle"> #{edu_QnSubject.TypeId} </td> <td align="center" valign="middle"> #{edu_QnSubject.Sort} </td> <td align="center" valign="middle"> #{edu_QnSubject.Score} </td> <td align="center" valign="middle"> <a href="#{edu_QnSubject.EditLink}" title="修改题目" class="frmLink" loadto="divEdit" nolayout="999"> <img src="~img/edit.gif" />修改</a> <a href="javascript:void(0)" onclick="delSubject(this)"> <img src="~img/delete.gif" />删除</a> <form name="frmDelete" method="post" action="#{edu_QnSubject.DeleteLink}"> <input type="hidden" name="templateId" value="#{templateId}" /> </form> </td> </tr> <!-- END list --> </table> </div> </div>
Controller代码如下:
/// <summary> /// 调整题目顺序 /// </summary> public void ChangeSubjectsSort(int templateId) { string subjectIds = ctx.Post("subjectIds"); string[] subjectIdArray = subjectIds.Split(‘,‘); for (int i = 0; i < subjectIdArray.Length; i++) { Edu_QnSubject qnSubject = edu_QnSubjectService.findById<Edu_QnSubject>(int.Parse(subjectIdArray[i])); qnSubject.Sort = i + 1; Result result = edu_QnSubjectService.update(qnSubject); //保存 } echoText("ok"); }
效果图(静态图片看不到动态效果,这里示意一下):
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。