原理就是利用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>
View Code
HTML代码如下(说明:框架会自动把<!-- BEGIN list -->和<!-- END list -->之间的内容绑定为列表):
<div class="Activity_Select_Index_Con">
<b class="Activity_Select_Index_Title">题目 <a href="https://www.ctyun.cn/portal/link.html?target=%23%7BviewAllLink%7D" title="预览所有题目"
class="frmBox">
<img src="~img/edit.gif" />预览问卷</a> <a href="https://www.ctyun.cn/portal/link.html?target=%23%7BaddLink%7D" title="添加题目" class="frmLink"
loadto="divEdit" nolayout="999">
<img src="~img/add.gif" />添加</a> <a href="https://www.ctyun.cn/portal/link.html?target=javascript%3Avoid%280%29%3B" onclick="batchDeleteClick()">
<img src="~img/delete.gif" />
删除</a></b>
<div class="SIMPO_Table" >
<table id="tableDataList" border="0" cellspacing="0" cellpadding="0"
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="https://www.ctyun.cn/portal/link.html?target=%23%7BPreviewItemLink%7D" 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="https://www.ctyun.cn/portal/link.html?target=%23%7Bedu_QnSubject.EditLink%7D" title="修改题目" class="frmLink" loadto="divEdit"
nolayout="999">
<img src="~img/edit.gif" />修改</a> <a href="https://www.ctyun.cn/portal/link.html?target=javascript%3Avoid%280%29" 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>
View Code
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");
}
View Code
效果图(静态图片看不到动态效果,这里示意一下):