Browser rendering ajax dynamic splicing element problem:
1. After the JS is executed, it will render the css for too long (not waiting for the asynchronous js to be issued, only waiting for the main js to complete), so if ajax is used, the data is loaded for a long time, which will cause the css style to fail. At this time, it is ajax. Just sync
The address spliced in the background including ${pageContext.request.contextPath} will not recognize this built-in object because it has been rendered and will think it is a general relative path, so the <a> tag will directly add the address of the text above.
But if the background is directly written as "http", then the browser will detect that the beginning of http is an absolute road.
function appendTable() {
var roleId=$("input[name='roleId']").val();
var leave=$("input[name='leave']").val();
var pId=$("input[name='pId']").val();
var id=$("input[name='id']").val();
var dataParent = {
roleId: "1",
leave:"2",
pId:"3",
id:"5"
};
$.ajax({
async: false,
type: "post",
url: "${pageContext.request.contextPath}/system/opmRole/menuInfo",
//data: dataParent,
// headers:"{\"id\": \"1\",\"leave\":\"2\",\"roleId\":\"3\",\"pId\":\"5\"}",
beforeSend: function(xhr){
xhr.setRequestHeader('id', id);
xhr.setRequestHeader('leave', leave);
xhr.setRequestHeader('roleId', roleId);
xhr.setRequestHeader('pId', pId);
xhr.setRequestHeader('fg', "1");
},
//dataType: 'json',
//contentType: "application/json",
success: function (data) {
if(data!=''&&data!=null){
//var ul=$("#treeul");
//var ul = document.createElement("ul"); collapse
var ul=$("<ul class=\"tree treeFolder\" id=\"tree1\"></ul>");
//ul.className = 'tree treeFolder collapse';
//ul.setAttribute('id','tree1');
var div1=$(".accordionContent");//document.getElementById("accordionContent");//
// var object = div1.appendChild(ul);
var arr = eval(data);
var s="<li><a>合同交割</a><ul id=\"160000\"><li><a href=\"${pageContext.request.contextPath}pactMarkChkAction.action?operate=A target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">异议处理"+
"</a></li><li><a href=\"${pageContext.request.contextPath}ContractPactUIAction!getContractList.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">合同查询</a></li><li><a href=\"${pageContext.request.contextPath}contractMendAction!list.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">合同补录</a></li><li><a href=\"${pageContext.request.contextPath}dataEnteringAction.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">数据录入</a></li><li><a href=\"${pageContext.request.contextPath}datumInforAction.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">资讯信息</a></li></ul></li>";
//ul.innerHTML=s;
for(j=0;j<arr.length;j++){
if(arr[j].leave=='1'&&arr[j].parentId=='100000'){
var li =$("<li></li>");
li.append($(arr[j].str));
var ul1 =$("<ul id='"+arr[j].ID+"'></ul>");
li.append(ul1);
ul.append(li);
}else if(arr[j].leave=='1'&&arr[j].parentId!='100000'){
var li =$("<li></li>");
var ul2 =$("<ul id='"+arr[j].ID+"'></ul>");
li.append($(arr[j].str));
li.append(ul2);
ul.find("ul[id='"+arr[j].parentId+"']").append(li);
}
if(arr[j].leave=='2'){
var li =$("<li></li>");
li.append($(arr[j].str));
ul.find("ul[id='"+arr[j].parentId+"']").append(li);
}
}
div1.html(ul);
}else{
alert("你输入的会员没有维护相应的权限信息！");
}
},
error:function(data){
alert("数据加载异常！");
}
});
}
可以用setTimeout测试
setTimeout(function(){
var ul = document.createElement("ul");
ul.className = 'tree treeFolder collapse';
ul.setAttribute('id','tree1');
var div1=document.getElementById("accordionContent");//$(".accordionContent");
var object = div1.appendChild(ul);
var s="<li><a>合同交割</a><ul id=\"160000\"><li><a href=\"${pageContext.request.contextPath}pactMarkChkAction.action?operate=A target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">异议处理"+
"</a></li><li><a href=\"${pageContext.request.contextPath}ContractPactUIAction!getContractList.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">合同查询</a></li><li><a href=\"${pageContext.request.contextPath}contractMendAction!list.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">合同补录</a></li><li><a href=\"${pageContext.request.contextPath}dataEnteringAction.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">数据录入</a></li><li><a href=\"${pageContext.request.contextPath}datumInforAction.action target=\" navtab\"=\"\" rel=\"Nav\" fresh=\"false\">资讯信息</a></li></ul></li>";
ul.innerHTML=s;
document.getElementById("tree1").className = 'tree treeFolder';
$.parser.parse(document.getElementById("tree1"));
alert(2);
},10);
@SuppressWarnings("rawtypes")
@RequestMapping(value="/system/opmRole/menuInfo")
@ResponseBody
public JSONArray menuInfo(@RequestHeader(value="fg") String fg,@RequestHeader(value="id") String id,@RequestHeader(value="leave") String leave,@RequestHeader(value="roleId") String roleId,@RequestHeader(value="pId") String pId,@RequestHeader(value="groupId",required=false) String groupId1,@RequestBody(required=false) List<OpmRolelimit> o,HttpServletRequest request){
request.getRequestURI();
String webPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
String path = request.getContextPath();
webPath += path;
List<String> strl= new ArrayList<String>();
String str="";
JSONArray JsonArray = new JSONArray();
Map<String,Object> param = new HashMap<String,Object>();
param.put("pId", pId);
//param.put("rId", roleId);
List<Map> map= opmMenufolderService.getfordMenuLimt(param);
if("1".equals(fg)&&id!=null&&!"".equals(id)){
System.out.println("==========查询角色权限表=======");
OpmRolelimit oo =new OpmRolelimit();
oo.setRoleid(id);
o=opmRolelimitService.getRoleLimt(oo);
fg="0";
}
Map<String,Object> param1 = new HashMap<String,Object>();
String groupId=groupId1;
for(Map p: map){
param1.put("pId", p.get("ID"));
String l= (String) p.get("LEAVE");
if("1".equals(l)){
if("100000".equals(p.get("PARENTID")+"")){
groupId=(String)p.get("ID");
str+="<label style=\"float:left\"><input type=\"checkbox\" class=\"checkboxCtrl\" value="+p.get("ID")+" group="+groupId+" selectType=\"invert\" />"+p.get("NAME")+"</label>"+"\n";
strl.add(str);
JSONObject Json = new JSONObject();
Json.put("ID", p.get("ID")+"");
Json.put("NAME", p.get("NAME")+"");
Json.put("groupId", groupId);
Json.put("parentId", p.get("PARENTID"));
Json.put("leave", l);
OpmMenuitem m= new OpmMenuitem();
m.setMenufolderid(p.get("ID")+"");
List<OpmMenuitem> ms= opmMenuitemService.getMenuItems(m);
boolean flag=false;
if(ms!=null&&o!=null){
for(OpmMenuitem mm :ms){
for(OpmRolelimit oo :o){
if(oo.getMenuitemid().equals(mm.getId())){
Json.put("str", "<a>"+p.get("NAME")+"</a>");
JsonArray.add(Json);
flag=true;
break;
}
}
if(flag){
break;
}
}
}
if(!flag){
OpmMenufolder folder= new OpmMenufolder();
folder.setParentid(p.get("ID")+"");
List<OpmMenufolder> folder2= opmMenufolderService.getOpmMenufolder(folder);
if(folder2!=null&&folder2.size()>0&&o!=null){
for(OpmMenufolder f: folder2){
OpmMenuitem fm= new OpmMenuitem();
fm.setMenufolderid(f.getId());
List<OpmMenuitem> fms= opmMenuitemService.getMenuItems(fm);
if(fms!=null&&fms.size()>0){
for(OpmMenuitem ffm: fms){
for(OpmRolelimit oo :o){
if(oo.getMenuitemid().equals(ffm.getId())){
Json.put("str", "<a>"+p.get("NAME")+"</a>");
JsonArray.add(Json);
flag=true;
break;
}
}
if(flag){
break;
}
}
}
if(flag){
break;
}
}
}
}
}else{
str+="<label><input type=\"checkbox\" value="+p.get("ID")+" name="+groupId+"/>"+p.get("NAME")+"</label>"+"\n";
strl.add(str);
JSONObject Json = new JSONObject();
Json.put("ID", p.get("ID")+"");
Json.put("NAME", p.get("NAME")+"");
Json.put("groupId",groupId);
Json.put("parentId", p.get("PARENTID"));
Json.put("leave", l);
OpmMenuitem m= new OpmMenuitem();
m.setMenufolderid(p.get("ID")+"");
List<OpmMenuitem> ms= opmMenuitemService.getMenuItems(m);
boolean flag=false;
if(ms!=null&&o!=null){
for(OpmMenuitem mm :ms){
for(OpmRolelimit oo :o){
if(oo.getMenuitemid().equals(mm.getId())){
Json.put("str","<a>"+p.get("NAME")+"</a>");
JsonArray.add(Json);
flag=true;
break;
}
}
if(flag){
break;
}
}
}
}
}
if("2".equals(l)){
if(Integer.valueOf(leave)<0){
if(Integer.valueOf(p.get("LEAVE1")+"") >=Integer.valueOf(leave)){
str+="<label><input type=\"checkbox\" value="+p.get("ID")+" name="+groupId+"/>"+p.get("NAME")+"</label>"+"\n";
strl.add(str);
JSONObject Json = new JSONObject();
Json.put("ID", p.get("ID")+"");
Json.put("NAME", p.get("NAME")+"");
Json.put("groupId", groupId);
Json.put("parentId", p.get("PARENTID"));
Json.put("leave", l);
String bs ="";
String rl="";
if(p.get("URI")!=null&&!"".equals(p.get("URI").toString())){
String[] re= p.get("URI").toString().split("/");
if(!"".equals(re)&&re!=null&&re.length>2){
rl=re[2];
}
}
if(o!=null){
for(OpmRolelimit k : o){
if( (p.get("ID")+"").equals(k.getMenuitemid())){
bs ="<a href=\""+webPath+""+p.get("URI")+"\" target='navTab' rel="+rl+"Nav fresh=\"false\">"+p.get("NAME")+"</a>";
Json.put("str",bs);
JsonArray.add(Json);
break;
}
}
}
}
}else{
Map<String,Object> param2 = new HashMap<String,Object>();
param2.put("menuItemId", p.get("ID"));
param2.put("menuItemLimitId", null);
param2.put("roleId", roleId);
param2.put("displayOrder", Integer.valueOf(-1));
List<OpmRolelimit> rl= opmRolelimitService.getRoleLimitByTJ(param2);
if(rl!=null&&rl.size()>0&&Integer.valueOf(p.get("LEAVE1")+"") >=Integer.valueOf(leave)){
str+="<label><input type=\"checkbox\" value="+p.get("ID")+" name="+groupId+"/>"+p.get("NAME")+"</label>"+"\n";
strl.add(str);
JSONObject Json = new JSONObject();
Json.put("ID", p.get("ID")+"");
Json.put("NAME", p.get("NAME")+"");
Json.put("groupId", groupId);
Json.put("parentId", p.get("PARENTID"));
Json.put("leave", l);
String bs ="<label style=\"width:150px;\"> <input type=\"checkbox\" value="+p.get("ID")+" name='"+groupId+"'/>"+p.get("NAME")+"</label>"+"\n";
String rl2="";
if(p.get("URI")!=null&&!"".equals(p.get("URI").toString())){
String[] re= p.get("URI").toString().split("/");
if(!"".equals(re)&&re!=null&&re.length>2){
rl2=re[2];
}
}
if(o!=null){
for(OpmRolelimit k : o){
if( (p.get("ID")+"").equals(k.getMenuitemid())){
bs ="<a href=\""+webPath+""+p.get("URI")+"\" target='navTab' rel="+rl2+"Nav fresh=\"false\">"+p.get("NAME")+"</a>";
Json.put("str",bs);
JsonArray.add(Json);
break;
}
}
}
//
}
}
}
if("3".equals(l)){
Map<String,Object> param2 = new HashMap<String,Object>();
param2.put("menuItemId", p.get("PARENTID"));
param2.put("menuItemLimitId", p.get("ID"));
param2.put("roleId", roleId);//当前登录用户角色Id
param2.put("displayOrder", null);
List<OpmRolelimit> rl2= opmRolelimitService.getRoleLimitByTJ(param2);
String tempg=groupId;
if(rl2!=null&&rl2.size()>0){
str+="<label><input type=\"checkbox\" value="+p.get("ID")+" name="+groupId+"/>"+p.get("NAME")+"</label>"+"\n";
strl.add(str);
JSONObject Json = new JSONObject();
Json.put("ID", p.get("ID")+"");
Json.put("NAME", p.get("NAME")+"");
Json.put("groupId", groupId);
Json.put("parentId", p.get("PARENTID"));
Json.put("leave", l);
String bs ="<label style=\"width:150px;\"><input type=\"checkbox\" value="+p.get("ID")+" name='"+groupId+"'/>"+p.get("NAME")+"</label>"+"\n";
if(o!=null){
for(OpmRolelimit k : o){
if( (p.get("ID")+"").equals(k.getMenuitemlimitid())){
bs ="<label style=\"width:150px;\">"+p.get("NAME")+"</label>"+"\n";
Json.put("str",bs);
JsonArray.add(Json);
break;
}
}
}
}
}
JsonArray.addAll(menuInfo(fg,id,leave,roleId,p.get("ID")+"",groupId,o,request));
}
return JsonArray;
}
select * from (select * from
(
select t.name name,t.id id,t.parentid parentid ,0 leave1,'1' leave ,null uri from opm_menufolder t
union all select o.name name,o.id id,o.menufolderid,o.level1 leave1,'2' leave, o.uri uri from opm_menuitem o
union all select l.name name,l.id id,l.menuitemid ,l.level1 leave1,'3' leave , l.uri uri from opm_menuitemlimit l
)
start with parentid is null connect by prior id=parentid ORDER SIBLINGS BY parentid)