JQuery UI flexgrid 应用
本实例利用Jquery Ui Flexgrid插件来实现如下图的表格功能:
一、首先导入必要的JS文件和Css文件:
<link rel="stylesheet"type="text/css"href="css_grid/flexigrid.css"/>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript"src="js/flexigrid.js"></script>
二、客户端实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"content="text/html;charset=iso-8859-1" />
<title>Flexigrid</title>
<link rel="stylesheet"type="text/css"href="css_grid/flexigrid.css"/>
<script type="text/javascript"src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript"src="js/flexigrid.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#flex1").flexigrid
(
{
url: 'datapage.aspx',
dataType: 'json',
colModel: [
{display: 'ID', name: 'id',width: 40, sortable: true, align: 'center' },
{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'}
],
buttons: [
{name: 'Add', bclass: 'add',onpress: test }, //添加一条记录时执行test函
{name:'Delete', bclass: 'delete',onpress: test }, //删一条记录时执行test函数
{separator:true },
{name: 'A', onpress: sortAlpha },
{name: 'B', onpress: sortAlpha },
{name: 'C', onpress: sortAlpha },
{name: 'D', onpress: sortAlpha },
{name: 'E', onpress: sortAlpha },
{name: 'F', onpress: sortAlpha },
{name: 'G', onpress: sortAlpha },
{name: 'H', onpress: sortAlpha },
{name: 'I', onpress: sortAlpha },
{name: 'J', onpress: sortAlpha },
{name: 'K', onpress: sortAlpha },
{name: 'L', onpress: sortAlpha },
{name: 'M', onpress: sortAlpha },
{name: 'N', onpress: sortAlpha },
{name: 'O', onpress: sortAlpha },
{name: 'P', onpress: sortAlpha },
{name: 'Q', onpress: sortAlpha },
{name: 'R', onpress: sortAlpha },
{name: 'S', onpress: sortAlpha },
{name: 'T', onpress: sortAlpha },
{name: 'U', onpress: sortAlpha },
{name: 'V', onpress: sortAlpha },
{name: 'W', onpress: sortAlpha },
{name: 'X', onpress: sortAlpha },
{name: 'Y', onpress: sortAlpha },
{name: 'Z', onpress: sortAlpha },
{name: '#', onpress: sortAlpha }
],
searchitems: [
{display: 'ISO', name: 'iso' },
{display: 'Name', name: 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 700,
height: 255
}
);
});
function sortAlpha(com) {
jQuery('#flex1').flexOptions({ newp: 1, params: [{ name: 'letter_pressed', value: com }, { name: 'qtype', value: $('select[name=qtype]').val()}]});
jQuery("#flex1").flexReload();
}
function test(com, grid) {
if (com == 'Delete'){
alert('删除一条新记录');//此处省略
}
else if (com == 'Add') {
alert('添加一条新记录'); //此处省略
}
}
</script>
</head>
<body>
<h1>
FlexigridExample Page</h1>
<br />
<b>Demonstrating the flexgrid with search anddeletefunctionality</b><br />
<br />
<table id="flex1" style="display: none">
</table>
<br />
</body>
</html>
三、服务器端实现:
Datapage.aspx文件
<%@ PageLanguage="C#"%>
<%
stringjson;
json = "";
json += "{\n";
json += "page:" + 10 + ",\n";
json += "total:" + 10 + ",\n";
json += "rows:[";
bool rc = false;
//这里只是模拟了一些数据,实际应该从数据库查询或其它方式获取数据
for (int i = 0; i <= 20; i++)
{
if (rc)json += ",";
json += "\n{";
json += "id:'id"+ i + "',";
json += "cell:['id"+ i + "','iso" + i + "'";
json += ",'name"+ i + "'";
json += ",'printable_name"+ i + "'";
json += ",'iso3"+ i + "'";
json += ",'numcode"+ i + "']";
json += "}";
rc = true;
}
json += "]\n";
json += "}";
Response.Write(json);
%>
本实例只是简单演示了生成表格,对于表格的其它操作并没有实现,您可以根据自己的需要进行添加,本文希望能起到一个抛砖引玉的作用。