jQuery flexigrid使用说明 (二、静态数据)

最新推荐文章于 2024-03-30 02:56:37 发布

iteye_19583

最新推荐文章于 2024-03-30 02:56:37 发布

阅读量204

点赞数

文章标签： javascript xhtml json ViewUI

本文介绍如何使用静态数据配置Flexigrid插件以显示表格数据，并提供了完整的示例代码，包括JSON数据格式、JavaScript配置及HTML页面结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二、使用静态数据模拟flexigrid

不管是静态数据还是动态数据，它们都应该满足一个格式：

{

	"total":4, //总记录数

	"page":1, //页数

	"rows":[　//对象
		{"id":0,"cell":{"a":"测试1","b":"纯测试1"}}, //cell里面的才是真正的内容

		{"id":1,"cell":{"a":"测试2","b":"纯测试2"}},

		{"id":2,"cell":{"a":"测试3","b":"纯测试3"}},

		{"id":3,"cell":{"a":"测试3","b":"纯测试3"}}
	]

当你的数据满足以上条件时就可以显示出数据了

下面给一个非常简单的例子：

第一步建立一个数据源命名为user.json

{
	total:12,
	page:2,
	rows:[
		{id:1,cell:['admin','123','ddd','111','100']},
		{id:3,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']},
		{id:2,cell:['admin','123','ddd','111','100']}
	]
}

第二步写flexigrid的js文件

$(function(){
  $("#flex1").flexigrid({

	url: 'user.json',

	method: 'GET',
	dataType: 'json',
	colModel : [
		{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
		],
	searchitems : [
		{display: 'ISO', name : 'iso'},
		{display: 'Name', name : 'name', isdefault: true}
		],
	sortname: "iso",
	sortorder: "asc",
	usepager: true,
	title: 'Countries',
	useRp: true,
	rp: 15,
	showTableToggleBtn: true,
	width: 700,
	//onSubmit: addFormData,
	height: 200
	});
});

第三步写html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="./css/flexigrid.css">
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/flexigrid.js"></script>
</head>
<body>
<p>静态取数据</p>
<table id="flex1" style="display:none"></table>
</body>
</html>