您的位置:首页 > Web前端 > JQuery

jquery 操作table使tr(数据)整行上移下移

2017-10-24 08:50 531 查看
1:ajax请求数据到页面


function GetWorkSpaceList()
{
GetServerData("get", GetEnterpriseUrl() + "Organization/GetOrganAll",
{
userID: GetUserID()
}, function (d) {
if (d.status == -1) {
artDialog.alert("系统提示:" + d.message);
return;
}
console.log(d.data);
$("#ulWorkSpace").html("");
var data = "";
for(i=0;i<d.data.length;i++)
{
var trName ="tr_" + Math.round(Math.random() * 999) + 3000;
data += "<tr id='" + trName + "' class=\"work_righttr\" OrganType=\"" +d.data[i].OrganType+ "\" EnterpriseID=\"" +d.data[i].EnterpriseID+ "\" ><td class=\"work_right_2\">";
data += "<img src=\"../images/";

if (d.data[i].OrganType == 1)  //企业
data += "QiYe.png";
else if(d.data[i].OrganType == 2) //项目
data += "GongCheng.png";
else if(d.data[i].OrganType == 3) //医院
data += "YiYuan.png";
else if(d.data[i].OrganType == 4) //学校
data += "XueXiao.png";
else if(d.data[i].OrganType == 5) //宗教
data += "ZongJiao.png";
else if(d.data[i].OrganType == 6) //团队
data += "TuanDui.png";
else if(d.data[i].OrganType == 7) //政府机构
data += "ZhengFu.png";

data +="\" style=\" width:30px; height:30px; margin-right:10px; margin-bottom:5px;\">";
if (d.data[i].StatusName == null || d.data[i].StatusName == "")
data += d.data[i].EnterpriseName;
else
data += d.data[i].EnterpriseName + "<span style='color:red;'>(" + d.data[i].StatusName + ")</span>";

data += "</td><td class=\"work_right_2i CloseWorkSpace\" trName=\"" +trName+ "\" OrganType=\"" +d.data[i].OrganType+ "\" EnterpriseID=\"" +d.data[i].EnterpriseID+ "\" ><img src=\"../images/delete.png\"  style=\"margin-right:5px;\" />关闭</td>";
data += "<td class=\"work_right_2i GoWorkSpace\" OrganType=\"" +d.data[i].OrganType+ "\" EnterpriseID=\"" +d.data[i].EnterpriseID+ "\" style=\" width:11%;\"><img src=\"../images/right.png\"  style=\"margin-right:5px;\" />进入</td>";
data += "<td class=\"work_right_2i \" OrganType=\"" +d.data[i].OrganType+ "\" EnterpriseID=\"" +d.data[i].EnterpriseID+ "\" style=\" width:11%;\"><img class=\"moveUp\" src=\"../images/moveUp.png\"  style=\"margin-right:10px;\" /><img class=\"moveDown\" src=\"../images/moveDown.png\"  style=\"margin-right:10px;\" /></td>";
data += "</tr>";
}
$("#ulWorkSpace").html(data);

});
}


如图所示:



2:用事件委托写上移下移事件,代码如下

//点击上移和下移按钮
$(document).on('click','.moveUp',function(){

//将这一排的tr向上移动
var objParentTR = $(this).parent().parent();
var prevTR = objParentTR.prev();
if(prevTR.length > 0) {
prevTR.insertAfter(objParentTR);
}

//循环每一个tr并获取其所需要的值
var trList=[];
var len=$('tr.work_righttr').length;

for(var i=0;i<len;i++){
trList[i]={};
trList[i].OrganID= $('tr.work_righttr').eq(i).attr('EnterpriseID');
trList[i].OrganType= $('tr.work_righttr').eq(i).attr('OrganType');
trList[i].OrganSort= i-1;
}

//提交接口
GetServerData("post", GetEnterpriseUrl() + "/Organization/SetOrganSort", { UserID: GetUserID(), OrganListJson: JSON.stringify(trList) }, function (d) {
if (d.status == -1) {
artDialog.alert("系统提示:" + d.message);
return;
}
//重新刷新列表
GetWorkSpaceList();
});

});

$(document).on('click','.moveDown',function(){

//将img所在的一行tr向下移动
var objParentTR = $(this).parent().parent();
var nextTR = objParentTR.next();
if(nextTR.length > 0) {
nextTR.insertBefore(objParentTR);
}

//循环每一个tr并获取其所需要的值
var trList=[];
var len=$('tr.work_righttr').length;
for(var i=0;i<len;i++){
trList[i]={};
trList[i].OrganID= $('tr.work_righttr').eq(i).attr('EnterpriseID');
trList[i].OrganType= $('tr.work_righttr').eq(i).attr('OrganType');
trList[i].OrganSort= i+1;
}

//提交接口
GetServerData("post", GetEnterpriseUrl() + "/Organization/SetOrganSort", { UserID: GetUserID(), OrganListJson: JSON.stringify(trList) }, function (d) {
if (d.status == -1) {
artDialog.alert("系统提示:" + d.message);
return;
}
//重新刷新列表
GetWorkSpaceList();
});

});


就是如此简单,欢迎观看!!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: