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(); }); });
就是如此简单,欢迎观看!!!