首页 > 代码库 > SlickGrid example 6:Ajax加载
SlickGrid example 6:Ajax加载
Ajax加载。
代码：
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>SlickGrid example 6: AJAX Load</title> <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> <link rel="stylesheet" href="examples.css" type="text/css"/> <style> .cell-story { white-space: normal !important; line-height: 19px !important; } .loading-indicator { display: inline-block; padding: 12px; background: white; -opacity: 0.5; color: black; font-weight: bold; z-index: 9999; border: 1px solid red; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 0 0 5px red; -webkit-box-shadow: 0px 0px 5px red; -text-shadow: 1px 1px 1px white; } .loading-indicator label { padding-left: 20px; background: url(‘../images/ajax-loader-small.gif‘) no-repeat center left; } </style></head><body><div style="width:700px;float:left;"> <div class="grid-header" style="width:100%"> <label>Digg stories</label> <span style="float:right;display:inline-block;"> Search: <input type="text" id="txtSearch" value="apple"> </span> </div> <div id="myGrid" style="width:100%;height:600px;"></div> <div id="pager" style="width:100%;height:20px;"></div></div><div style="margin-left:750px;margin-top:40px;;"> <h2>Demonstrates:</h2> <ul> <li>loading data through AJAX</li> <li>custom row height</li> </ul> <h2>WARNING:</h2> <ul> <li>Digg API uses request rate limiting. You may occasionally get an error if you do a frequent scrolling/resorting/searching. </li> </ul></div><script src="../lib/firebugx.js"></script><script src="../lib/jquery-1.7.min.js"></script><script src="../lib/jquery-ui-1.8.16.custom.min.js"></script><script src="../lib/jquery.event.drag-2.0.min.js"></script><script src="../lib/jquery.jsonp-1.1.0.min.js"></script><script src="../slick.core.js"></script><script src="../slick.remotemodel.js"></script><script src="../slick.grid.js"></script><script> var grid; var loader = new Slick.Data.RemoteModel(); var storyTitleFormatter = function (row, cell, value, columnDef, dataContext) { return "<b><a href=http://www.mamicode.com/‘" + dataContext["link"] + "‘ target=_blank>" + dataContext["title"] + "</a></b><br/>" + dataContext["description"]; }; var columns = [ {id: "num", name: "#", field: "index", width: 40}, {id: "story", name: "Story", width: 580, formatter: storyTitleFormatter, cssClass: "cell-story"}, {id: "diggs", name: "Diggs", field: "diggs", width: 60, sortable: true} ]; var options = { rowHeight: 64, editable: false, enableAddRow: false, enableCellNavigation: false }; var loadingIndicator = null; $(function () { grid = new Slick.Grid("#myGrid", loader.data, columns, options); grid.onViewportChanged.subscribe(function (e, args) { var vp = grid.getViewport(); loader.ensureData(vp.top, vp.bottom); }); grid.onSort.subscribe(function (e, args) { loader.setSort(args.sortCol.field, args.sortAsc ? 1 : -1); var vp = grid.getViewport(); loader.ensureData(vp.top, vp.bottom); }); loader.onDataLoading.subscribe(function () { if (!loadingIndicator) { loadingIndicator = $("<span class=‘loading-indicator‘><label>Buffering...</label></span>").appendTo(document.body); var $g = $("#myGrid"); loadingIndicator .css("position", "absolute") .css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2) .css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2); } loadingIndicator.show(); }); loader.onDataLoaded.subscribe(function (e, args) { for (var i = args.from; i <= args.to; i++) { grid.invalidateRow(i); } grid.updateRowCount(); grid.render(); loadingIndicator.fadeOut(); }); $("#txtSearch").keyup(function (e) { if (e.which == 13) { loader.setSearch($(this).val()); var vp = grid.getViewport(); loader.ensureData(vp.top, vp.bottom); } }); // load the first page grid.onViewportChanged.notify(); })</script></body></html>
SlickGrid example 6:Ajax加载
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。