使用sigmaGrid实现分页、打印等功能
易书
该代码实现了使用sigmaGrid实现分页、打印等功能
js中：
//sigma grid定义部分
var myData = [];
var grid_demo_id = "myGrid1" ;
var dsOption= {
fields :[
{name : 'order_number' },
/* {name : 'owner_name' },*/
{name : 'plan_Year' } ],
recordType : 'array',
data: myData
};
var colsOption = [
{id: 'order_number' , header: "序号" , width :35, align: "center", headAlign: "center"},
/* {id: 'owner_name' , header: "姓名" , width :55, align: "center", headAlign: "center"}, */
{id: 'plan_Year' , header: "年度" , width :55, editable : false,align: "center", headAlign: "center" }
];
var gridOption={
id : grid_demo_id,
customHead : 'myHead2',
remotePaging : false ,
width: "1060",//"100%",
height: "350",//"100%",
container : 'mygrid_container',
resizable : true,
replaceContainer : true,
toolbarPosition : 'bottom',//'top',
toolbarContent : 'nav goto | print | state',
skin : 'mac',
pageSizeList : [10,20,30,50,100,200],
pageSize : 100,
dataset : dsOption ,
columns : colsOption ,
recountAfterSave : true ,
reloadAfterSave : true,
stripeRows : true,
lightOverRow: true,
showGridMenu: true
//showIndexColumn : true
};
var mygrid=new Sigma.Grid( gridOption );
Sigma.Utils.onLoad( function(){
mygrid.render();
} );
//获取数据部分
$.ajax({
url:"accountManagement!checkAnnuitySummaryForCompany",
data:{companyName:companyName,beginYear:beginYear,endYear:endYear},
type:"post",
dataType:"json",
success:function(data){
//traverse data
//var info = eval('('+data+')');
//console.log("+data+:" + data);
//console.log("info:" + info);
var i=0;
var j = 1;//序号
var ownerName = "";//姓名
var Card_ID_Number = "";//身份证号
var Mylist = new Array();
try {
for(var item in data["list"])
{
var alist = new Array();
alist.push(j);
alist.push(data["list"][item].personIdPlanYearPK.plan_Year);
Mylist.push(alist);
i++;
j++;
}
}catch (e)
{}
var grid = Sigma.$grid(grid_demo_id);
grid.dataset.data = Mylist;
grid.reload();
//sigma grid
}//end of data
});
//jsp页面部分：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="head.jsp" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="source/css/table.css">
<link rel="stylesheet" type="text/css" href="source/css/demo.css">
<script type="text/javascript" src="source/js/jquery.js"></script>
<script type="text/javascript" src="source/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="source/js/accountManagement.js"></script>
</head>
<style type="text/css">
.table thead tr{
background-image:url(images/tableth.jpg);
}
</style>
<body>
<table id="myHead2" style="display:none">
<tr>
<td colspan="14" align="center" style="height:20px">阿斯顿飞td>
</tr>
<tr>
<td id="td_currentDate" colspan="14" align="left" >阿斯顿飞 </td>
</tr>
<!-- <tr>
<td colspan="4" align="left" id="td_compName">所在公司:</td>
<td colspan="2" align="left" id="td_OwnerName">姓名:</td>
<td colspan="3" align="left" id="td_IDNumber">身份证号码:</td>
</tr> -->
<tr>
<td columnId='order_number' align="center">序号</td>
<td columnId='plan_Year' align="center">年度</td>
</tr>
</table>
<div id="mygrid_container" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;width:100%;" ></div>
</body>
</html>
类似资料：