flexigrid
http://www.codeweblog.com/stag/flexigrid-jqmshow/
flexigrid页面
flexigrid页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!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=utf-8" />
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="resources/flexigrid/css/flexigrid/flexigrid.css" />
<script type="text/javascript" src="resources/js/jquery1.3.2.js"></script>
<script type="text/javascript" src="resources/flexigrid/flexigrid.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flex1").flexigrid
(
{
url: 'GetUsersList.action',
dataType: 'json',
colModel : [
//{display: '<input type="checkbox" alt=" Select All ">', name : 'getAll', width : 50, sortable : true, align: 'center'},
{display: ' No. ', name : 'id', width : 40, sortable : true, align: 'center'},
{display: ' Name ', name : 'name', width : 40, sortable : true, align: 'center'},
{display: ' Gender ', name : 'gender', width : 180, sortable : true, align: 'left'},
{display: ' Age ', name : 'age', width : 120, sortable : true, align: 'left'},
{display: ' Birthday ', name : 'birthday', width : 130, sortable : true, align: 'left', hide: true},
{display: ' Phone ', name : 'phone', width : 80, sortable : true, align: 'right'},
{display: ' Address ', name : 'address', width : 80, sortable : true, align: 'right'}
],
searchitems : [
{display: ' No. ', name : 'id'},
{display: ' Name ', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: ' User list ',
useRp: true,
checkbox : true,// Checkbox if you want
rowId : 'id',// Checkbox binding line id
rp: 10,
showTableToggleBtn: true,// Fold
resizable: true,
striped: true, // Speckle effect is displayed, the default is the parity in the form of interactive
width: 700,
height: 255
}
);
});
</script>
</head>
<body>
<h1>
Flexigrid Example Page
</h1>
<br />
<br />
<table></table>
<br />
<br />
</body>
</html>