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

    });

});

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