浏览器渲染ajax动态拼接元素问题:
1JS执行完后会不过太久就渲染css（不等开出的异步js，只等主js完成）,所以如果使用ajax的话，数据加载过长时间，会导致css样式失效，此时是ajax的同步即可
包括${pageContext.request.contextPath}这种后台拼接过来的地址由于过了渲染都不会识别这个内置对象会以为是一般的相对路径，所以<a>标签会直接加上上写文地址
但是如果后台直接写成“http”那么浏览器会检测到这个http开头的是绝对路劲
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)
相关推荐
浏览器渲染过程及优化策略 浏览器渲染过程是一个复杂的过程，它涉及到多个进程和线程的协作。为了确保浏览器的稳定性和安全性，浏览器采取了多进程模型。每个进程都有其自己的内存空间，每个线程都是进程的一部分，...
浏览器原理
这可以通过使用setTimeout函数实现，它允许浏览器在等待AJAX请求的期间，先去渲染页面上的其他元素。 具体到本文中，开发者在第二次尝试中使用了setTimeout，将AJAX请求放入setTimeout所创建的函数中。这样做允许...
**Reflow（回流）**：在渲染过程中，当元素尺寸、位置或CSS样式发生改变，浏览器需要重新计算元素及其子孙元素的布局，这一过程称为回流。回流是性能瓶颈的主要来源，因为会导致浏览器重绘受影响的区域，甚至整个...
在本主题中，我们将深入探讨如何使用Ajax调用接口获取数据，并将这些数据动态渲染到网页上。 ### 一、Ajax 基础 1. **创建Ajax对象**: 在JavaScript中，我们通常使用XMLHttpRequest对象来实现Ajax通信。然而，由于...
浏览器默认样式表（Browser Default Stylesheet）是各个主流浏览器内置于其渲染引擎中的CSS样式规则，用于在网页未定义特定样式时提供基本的外观呈现。这些样式定义了HTML元素的基本表现，如字体、颜色、间距等，...
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式，它的作用是使得页面无需重新加载即可向服务器请求数据，并将数据动态地加载到页面中。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它...
浏览器性能优化-渲染性能1 浏览器性能优化是指为了提高浏览器的加载速度和响应能力所采取的一系列优化措施。其中，渲染性能是浏览器性能优化的关键部分，本文将详细介绍浏览器渲染性能优化的相关知识点。 Render ...
CSSOM与DOM结合，形成一个渲染树（Render Tree），渲染树包含了DOM中的所有可见元素以及它们的样式信息。 在渲染树构建完成之后，浏览器开始布局（Layout）过程，计算每个元素在屏幕上的确切位置。接着是绘制...
这个名为“selenium进行chrom浏览器渲染.zip”的压缩包，显然包含了与使用Selenium控制Chrome浏览器相关的资源，包括JDK（Java Development Kit）和使用说明。这里我们将详细探讨Selenium、Chrome浏览器渲染以及如何...
详细介绍浏览器接收请求，到响应过程中每一步实现，了解浏览器的工作原理
默认情况下，CSS被视为阻塞渲染的资源，浏览器会等待CSSOM构建完成才开始渲染，以确保正确应用样式。JavaScript的执行也会阻塞DOM的构建，因为JS可以修改DOM和CSSOM。因此，合理的资源加载策略很重要，比如将CSS放在...
Web性能优化：浏览器渲染机制与优化.docx
我们将来学习浏览器渲染原理这部分的知识
在构建完渲染树后，浏览器进入布局（Layout）阶段，确定每个元素在屏幕上的精确位置，这个过程也称为“重排”（reflow）。如果渲染树中的某部分发生变化，导致元素尺寸变化，就会触发重排。接着是绘制（Painting），...
3. 结合DOM和CSSOM：将DOM树与CSSOM树合并成渲染树，渲染树包含了页面上每一个可视元素及其样式。 4. 布局：计算渲染树中每个元素的位置和大小，形成布局信息。 5. 绘制：根据布局信息将渲染树的每个节点绘制到屏幕...
AJAX（异步JavaScript和XML）是一种用于创建交互式网页应用程序的技术，由Jesse James Gaiett创造。它使得Web应用能以桌面应用般的方式工作，通过后台与服务器进行数据交换，无需刷新整个页面。AJAX的核心是...
描述中提到的博文链接指向了一篇关于浏览器默认CSS样式的文章，虽然具体内容未给出，但可以推测这篇文章可能详细列举了不同浏览器（如Chrome、Firefox、Safari、Edge和Internet Explorer）对于CSS元素的默认渲染方式...