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

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();
    });
    
});

就是如此简单,欢迎观看!!!

 

转载于:https://www.cnblogs.com/heshaoxu/p/7721808.html