123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- <!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>基本表格模板</title>
- <!--框架必需start-->
- <script type="text/javascript" src="../../libs/js/jquery.js"></script>
- <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
- <script type="text/javascript" src="../../libs/js/framework.js"></script>
- <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
- <link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY="false"/>
- <link rel="stylesheet" type="text/css" id="customSkin"/>
- <!--框架必需end-->
- <!--数据表格start-->
- <script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
- <!--数据表格end-->
- <!--分页start-->
- <script type="text/javascript" src="../../libs/js/nav/pageNumber.js"></script>
- <!--分页end-->
- </head>
- <body>
- <div class="red">此示例由后台支持</div>
- <div class="padding_right5">
- <div id="maingrid"></div>
- </div>
- <div id="pageContent" style="height:35px;"></div>
- <script type="text/javascript">
- var g_pageNo = 1;
- var g_pageSize = 10;
- //数据表格使用
- var g;
- var gridData;
- /*
- function initComplete(){
- g = $("#maingrid").quiGrid({
- columns: [
- { display: '姓名', name: 'userName', align: 'left', width: "20%"},
- { display: '所属部门', name: 'orgName', align: 'left', width: "20%"},
- { display: '性别', name: 'userSex', align: 'left', width: "20%"},
- { display: '入职时间', name: 'userEmployTime', align: 'left', width:"20%"} ,
- { display: '学历', name: 'userEducation', align: 'left', width:"20%"}
- ],
- data:[], sortName: 'userId',rownumbers:true,dataAction:'local',checkbox:true,usePager: false,
- height: '100%', width:"100%",heightDiff:-40,percentWidthMode:true,
- onChangeSort : function(){
- getData(g.options.sortName,g.options.sortOrder,g_pageNo,g_pageSize);
- return false;
- }
- });
- }
- */
- $(function(){
- /*
- g.options.sortName = "userId";
- g.options.sortOrder = "desc";
- getData(g.options.sortName,g.options.sortOrder,g_pageNo,g_pageSize);
- */
- })
-
- function getData(sort,direction,pageNo,pageSize){
- $.post("../../userAction.do?method=getUsers",
- {"sort":sort,
- "direction":direction,
- "pager.pageNo":pageNo,
- "pager.pageSize":pageSize
- },
- function(result){
- gridData = result;
- //刷新表格
- g.loadData(gridData);
-
- var $pager=$('<div class="pageNumber" showSelect="true"></div>');
- $pager.attr("total",gridData["pager.totalRows"]);
- var $pagerCon = $('<div class="float_left padding5">' + "共有" + gridData["pager.totalRows"] + "条记录" + '</div><div class="float_right padding5"></div><div class="clear"></div>');
- $pagerCon.eq(1).append($pager);
- $("#pageContent").append($pagerCon);
- $pager.render();
- $pager.bind("pageChange",function(e,index){
- g_pageNo = index + 1;
- getData2(g.options.sortName,g.options.direction,g_pageNo,g_pageSize);
- })
- $pager.bind("sizeChange",function(e,num){
- g_pageSize = num;
- getData2(g.options.sortName,g.options.sortOrder,g_pageNo,g_pageSize);
- })
- },"json");
- }
-
- function getData2(sort,direction,pageNo,pageSize){
- $.post("../../userAction.do?method=getUsers",
- {"sort":sort,
- "direction":direction,
- "pager.pageNo":pageNo,
- "pager.pageSize":pageSize
- },
- function(result){
- gridData = result;
- //刷新表格
- g.loadData(gridData);
- },"json");
- }
-
- </script>
- </body>
- </html>
|