jquery分页渲染（js大数据量如何实现页面的局部渲染（不是局部刷新）--解决方法）

本文目录

• js大数据量如何实现页面的局部渲染（不是局部刷新）--解决方法
• 怎样给Jquery动态添加的标签添加或渲染Jquery方法
• jquery.mobile对ul列表的样式渲染
• 关于jquery的分页jqgrid

js大数据量如何实现页面的局部渲染（不是局部刷新）--解决方法

把看到的区域当画布，创建足够能展现界面的Dom就够了。比如一个屏幕的高度一般是800像素左右，假设一条记录占用的高度是20像素，我们只用创建40个对象即可。接下来就是对这40个对象进行数据填充，通过滚动条调整填充数据的起始下标。10W条记录，IE下有些卡 《style type="text/css"》 .panel{ overflow:scroll; width:200px; height:80%; } .panel .scroll{ } .item{ width:500px; height:20px; } .odd{ background-color:#ccc; } .items{ overflow:hidden; position:absolute; } .red{ color:red; } .green{ color:green; } 《/style》 《script》 window.console = window.console || { log: function() {} }; function absolutePoint(element) { var result = ; element = element.offsetParent; while (element) { result += element.offsetLeft; result += element.offsetTop; element = element.offsetParent; } return result; } function ListView(options){ options = options || {}; var self = this, $C = function(tagName) { return document.createElement(tagName); }, // 创建节点 p, height, item_height, // 项高 view_count, // 可见项条数 parent = options.parent || document.body, // 容器 height, // 面板历史高度 div_panel = $C("div"), div_scroll = $C("div"), div_items = $C("div"), div_items_list = , freed = ; // 可释放的对象 div_panel.className = "panel"; parent.appendChild(div_panel); div_items.className = "items"; document.body.appendChild(div_items); div_scroll.className = "scroll"; div_panel.appendChild(div_scroll); div_panel.onscroll = function() { doChange(); } div_panel.onresize = function() { doChange(); } div_items_list.className = "item"; div_items.appendChild(div_items_list); div_scroll.style.width = div_items_list.clientWidth + "px"; item_height = div_items_list.clientHeight; p = absolutePoint(div_panel); with(div_items.style) { left = p + "px"; top = p + "px"; width = div_panel.clientWidth; height = div_panel.clientHeight; } /** * 界面改变 */ function doChange() { if (!item_height) return; var i, div; if (height != div_panel.clientHeight) { height = div_panel.clientHeight; view_count = parseInt(height / item_height); for (i = div_items_list.length; i 《 view_count; i++) { div = $C("div"); div.className = "item" + (i % 2 == 0 ? "" : " odd"); div_items.appendChild(div); div_items_list.push(div); } for (i = 0; i 《 div_items_list.length; i++) { div_items_list.style.display = i 《 view_count ? "" : "none"; } div_scroll.style.height = div_panel.clientHeight + options.count - view_count + "px"; console.log(); } div_items.scrollLeft = div_panel.scrollLeft; if (!options.ondrawitem) return; i = Math.min(view_count, div_items_list.length); while(i--) { // 重新绘制 options.ondrawitem(i + div_panel.scrollTop, div_items_list); } } doChange(); this.doChange = doChange; /** * 释放Dom对象 */ this.dispose = function() { var i = freed.length; while(i--) { freed); } i = freed.length; while(i--) { div_items_list); } } } function format(template, json) { if (!json) return template; return template && template.replace(/\$\{(.+?)\}/g, function() { return json; }) } window.onload = function() { var i = 100000, data = new Array(i); while(i--) { data = { index: i, random: Math.random(), key: (+new Date()).toString(36) }; } var listview = new ListView({ count: data.length, ondrawitem: function(i, div) { div.innerHTML = format(" 《em》${index} 《/em》  《span class=\"red\"》${random} 《/span》  《span class=\"green\"》${key} 《/span》", data); } }); }; 《/script》

怎样给Jquery动态添加的标签添加或渲染Jquery方法

$(’.popBtn’).click(function(){var popMain=’内容内容内容内容’;Pop(popMain);});function Pop(popMain){var html=’’;html +=’《div class="pop-div"》’+popMain+’《/div》’;}

jquery.mobile对ul列表的样式渲染

楼主你好 很乐意为你解答。《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"***隐藏网址*** ***隐藏网址*** 《head》***隐藏网址*** 《title》Sample《/title》 《link rel="stylesheet"***隐藏网址*** 《script type="text/javascript"***隐藏网址*** 《script type="text/javascript"***隐藏网址*** ***隐藏网址******隐藏网址*** 《/head》 《body》 《div id="home" data-role="page"》 《div data-role="header"》 《h1》Hello《/h1》 《/div》 《div data-role="content"》 《div id="tabs"》 《ul》 《li》《a href="#tab1"》No,1《/a》《/li》 《li》《a href="#tab2"》No,2《/a》《/li》 《/ul》 《div id="tab1" style="height:100px;"》1111111111《/div》 《div id="tab2" style="height:100px;"》222222222《/div》 《/div》 《/div》 《script type="text/javascript"》 $(’#tabs’).tabs({selected:0}); 《/script》 《/div》 《/body》《/html》

关于jquery的分页jqgrid

jqgrid的官方demo大部分都是后台分页的。你可以一次性传到客户端进行分页。不过数据量大还是后台分页的好。至于排序会传递个sidx参数代表排序的字段，传递sord参数值为asc或者desc为升排序还是降排序