溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

LigerUI中通過(guò)加載服務(wù)端數(shù)據(jù)進(jìn)行表格的分頁(yè)顯示

發(fā)布時(shí)間：2020-07-16 06:30:36 來(lái)源：網(wǎng)絡(luò) 閱讀：3284 作者：pangfc 欄目：web開發(fā)

前言：我的這一篇文章是緊接著上一篇關(guān)于LigerUI的文章（http://www.zifangsky.cn/379.html）寫的，因此在這里我就省略了相關(guān)的環(huán)境搭建，直接進(jìn)入正題


一 介紹

在LigerUI中顯示表格是用的ligerGrid，同時(shí)我們可以通過(guò)配置url參數(shù)就可以加載遠(yuǎn)程數(shù)據(jù)并顯示成表格形式。不僅如此，ligerGrid還可以進(jìn)行數(shù)據(jù)的排序和分頁(yè)顯示：

（1）排序：需要用到“sortname”和“sortorder”這兩個(gè)參數(shù)，分別表示按哪個(gè)字段排序以及排序方式，如：asc，desc

（2）分頁(yè)顯示：需要用到的是”Rows“:[] 和 “Total“:0這兩個(gè)參數(shù)，其中Rows表示頁(yè)面顯示的數(shù)據(jù)集，需要用一個(gè)數(shù)組進(jìn)行賦值；Total表示的是數(shù)據(jù)的總數(shù)


注：我在上一篇文章提到，實(shí)際上上面的這些參數(shù)都是定義在ligerUI/js/plugins/ligerGrid.js這個(gè)文件中，因此這些參數(shù)名我們是可以進(jìn)行自定義的，具體的示例可以參考那篇文章


二 使用服務(wù)端數(shù)據(jù)分頁(yè)顯示示例

（1）簡(jiǎn)單的前端頁(yè)面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="<%=basePath%>">
<title>ligerGrid Demo2</title>
<link href="scripts/ligerUI/skins/Aqua/css/ligerui-all.css"
	rel="stylesheet" type="text/css" />
<script src="scripts/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="scripts/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		
		var grid = $("#maingrid").ligerGrid({
			checkbox : true,  //每一行前面的選擇框
			enabledSort : false,//排序		
			url : "loadData.json",//從服務(wù)端加載數(shù)據(jù)
			columns : [ {
				name : 'username',
				display : '用戶名',
				width : 200

			}, {
				name : 'age',
				display : '年齡',
				width : 400

			} ],  //表格中每一列的字段
			pageSize : 10,  //默認(rèn)每一頁(yè)顯示多少數(shù)據(jù)
			pageSizeOptions : [ 10, 20, 50, 100 ],  //每頁(yè)顯示多少數(shù)據(jù)下拉選擇框
			width : 'auto',
			height : '95%'
		});
	});
</script>
</head>
<body >
	<div id="maingrid"></div>

</body>
</html>

從上面的代碼可以看出，使用了url這個(gè)參數(shù)請(qǐng)求”loadData.json”來(lái)獲取數(shù)據(jù)

（2）后臺(tái)處理controller：

package cn.zifangsky.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@Scope("prototype")
public class LoadDataController {
	private static final int Total = 256;

	@RequestMapping(value = "/loadData.json")
	@ResponseBody
	// pagesize和page分別表示每頁(yè)數(shù)據(jù)條數(shù)和當(dāng)前的頁(yè)碼
	public Map<String, Object> loadData(@RequestParam(value = "pagesize") int pagesize,
			@RequestParam(value = "page") int page) {

		List<User> lists = new ArrayList<User>(); // 返回?cái)?shù)據(jù)列表

		int start = pagesize * (page - 1); // 每一頁(yè)的起始數(shù)據(jù)
		// 模擬查詢一頁(yè)數(shù)據(jù)并添加到返回的數(shù)據(jù)列表中
		for (int i = 0; i < pagesize; i++) {
			int temp = start + i;
			// 如果超過(guò)總數(shù)則跳出循環(huán)
			if (temp < Total) {
				User user = new User();
				user.setUsername("員工-" + temp);
				user.setAge(temp);

				lists.add(user);
			} else
				break;
		}

		Map<String, Object> result = new HashMap<String, Object>();
		result.put("Rows", lists); // 數(shù)據(jù)集
		result.put("Total", Total); // 數(shù)據(jù)的總數(shù)

		return result;
	}
}

在這個(gè)controller中只定義了一個(gè)方法來(lái)處理前臺(tái)的請(qǐng)求，并且通過(guò)獲取前臺(tái)傳遞進(jìn)來(lái)的”pagesize”和”page”參數(shù)進(jìn)行模擬分頁(yè)查詢數(shù)據(jù)，代碼中有詳細(xì)注釋因此不多說(shuō)。最后就是將數(shù)據(jù)的List集合賦值給“Rows”參數(shù)，數(shù)據(jù)總數(shù)設(shè)置了一個(gè)固定的256條


注：上面controller中使用到的實(shí)體類User：

package cn.zifangsky.controller;

public class User {
	private String username;
	private int age;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	
}

（3）顯示效果：

LigerUI中通過(guò)加載服務(wù)端數(shù)據(jù)進(jìn)行表格的分頁(yè)顯示

LigerUI中通過(guò)加載服務(wù)端數(shù)據(jù)進(jìn)行表格的分頁(yè)顯示

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手