2016-10-30 17:13:58 +08:00
parent 6c2a372179
commit a67629d0f7
530 changed files with 63963 additions and 0 deletions
--- a/WebRoot/js/easyui-1.3.5/demo/treegrid/clientpagination.html
+++ b/WebRoot/js/easyui-1.3.5/demo/treegrid/clientpagination.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
+	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
+	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
+	<link rel="stylesheet" type="text/css" href="../demo.css">
+	<script type="text/javascript" src="../../jquery.min.js"></script>
+	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
+</head>
+<body>
+	<h2>Client Side Pagination in TreeGrid</h2>
+	<div class="demo-info">
+		<div class="demo-tip icon-tip"></div>
+		<div>This sample shows how to implement client side pagination in TreeGrid.</div>
+	</div>
+	<div style="margin:10px 0;"></div>
+	<table id="tg" class="easyui-treegrid" title="Client Side Pagination" style="width:700px;height:250px"
+			data-options="
+				iconCls: 'icon-ok',
+				rownumbers: true,
+				animate: true,
+				collapsible: true,
+				fitColumns: true,
+				url: 'treegrid_data2.json',
+				method: 'get',
+				idField: 'id',
+				treeField: 'name',
+				loadFilter: pagerFilter,
+				pagination: true,
+				pageSize: 2,
+				pageList: [2,5,10]
+			">
+		<thead>
+			<tr>
+				<th data-options="field:'name',width:180">Task Name</th>
+				<th data-options="field:'persons',width:60,align:'right'">Persons</th>
+				<th data-options="field:'begin',width:80">Begin Date</th>
+				<th data-options="field:'end',width:80">End Date</th>
+				<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
+			</tr>
+		</thead>
+	</table>
+	<script type="text/javascript">
+		function formatProgress(value){
+	    	if (value){
+		    	var s = '<div style="width:100%;border:1px solid #ccc">' +
+		    			'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
+		    			'</div>';
+		    	return s;
+	    	} else {
+		    	return '';
+	    	}
+		}
+		
+		function pagerFilter(data){
+            if ($.isArray(data)){    // is array  
+                data = {  
+                    total: data.length,  
+                    rows: data  
+                }  
+            }
+            var dg = $(this);  
+			var state = dg.data('treegrid');
+            var opts = dg.treegrid('options');  
+            var pager = dg.treegrid('getPager');  
+            pager.pagination({  
+                onSelectPage:function(pageNum, pageSize){  
+                    opts.pageNumber = pageNum;  
+                    opts.pageSize = pageSize;  
+                    pager.pagination('refresh',{  
+                        pageNumber:pageNum,  
+                        pageSize:pageSize  
+                    });  
+                    dg.treegrid('loadData',data);  
+                }  
+            });  
+            if (!data.topRows){  
+            	data.topRows = [];
+            	data.childRows = [];
+            	for(var i=0; i<data.rows.length; i++){
+            		var row = data.rows[i];
+            		row._parentId ? data.childRows.push(row) : data.topRows.push(row);
+            	}
+				data.total = (data.topRows.length);
+            }  
+            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);  
+            var end = start + parseInt(opts.pageSize);  
+			data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows));
+			return data;
+		}
+	</script>
+</body>
+</html>