JQuery easyUI datagrid为啥查出来只有10条,而且只有一页 ，总的也只有10条
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery easyUI datagrid为啥查出来只有10条,而且只有一页 ，总的也只有10条相关的知识，希望对你有一定的参考价值。
//加载表格
function table()
$("#TABLE_SWRY").datagrid(
title : '税务人员管理',
rownumbers : true,
pagination:true,
pageSize :PAGE_SIZE,
showPageList:true,
cls : "search-list",
fitColumns : true,
idField : "SWRY_DM",
singleSelect : false,
columns : [[
title : '税务人员代码',
field : 'SWRY_DM',
align : 'center',
sortable : true,
width : 30
,
title : '税务人员名称',
field : 'SWRY_MC',
align : 'center',
width : 40
,
title : '所属税务机关',
field : 'SWJG_MC',
align : 'center',
width : 40
,
title : ' 出生日期',
field : 'CCRQ',
align : 'center',
width : 40
,
title : ' 家庭住址',
field : 'JTZZ',
align : 'center',
width : 40
,
title : ' 手机号码',
field : 'SSHM',
align : 'center',
width : 40
,
title : ' 工资',
field : 'GZ',
align : 'center',
width : 40
,
title : ' 职位',
field : 'ZW_MC',
align : 'center',
width : 40
]],toolbar: [
id:"insertid",
text:"增加",
iconCls: 'icon-add',
handler: function()
add2();
,
id:"ud",
text:"修改",
iconCls: 'icon-edit',
handler: function()
//修改
updateswry()
,
id:"de",
text:"删除",
iconCls: 'icon-delete',
handler: function()
deteleswry()
]
);
//初始化分页组件
var page = $("#TABLE_SWRY").datagrid("getPager");
if (page)
$(page).pagination(
onSelectPage : function(pageNumber, pageSize)
alert(pageNumber+","+pageSize);
PAGE_NUMBER = pageNumber;
PAGE_SIZE = pageSize;
queryswry();
,
onBeforeRefresh : function(pageNumber, pageSize)
alert("word");
PAGE_NUMBER = pageNumber;
PAGE_SIZE = pageSize;
,
onChangePageSize : function(pageSize)
PAGE_SIZE = pageSize;
queryswry();
);
url: "/ExMember/HuiYuanTongJi/CommonHandler.aspx?rnd=" + Math.random(),//後台地址
queryParams: "fuwuqibiaoshi": fuwuqibiaoshi ,//查询条件
sortName: 'parentcode', //排序字段
sortOrder: 'asc',//排序方式
idField: 'DEPT_CODE',//关键字段
pagination: true,//是否分页
rownumbers: true,//显示序号
pageNumber: 1, //每次都要初始化为1,否则默认为上一次页面
pageSize: 20,//分页大小
当点击下一页，上一页，或者页面大小改变时，datagrid会自动异步去后台查询数据的。所以关键在后台，在获得传过来参数后怎么处理的。当然后台传回来的数据格式要符合。 参考技术B 你看返回的json，截图 参考技术C 先看一下你的json数据吧
jQuery EasyUI---DataGrid
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jquery.easyui.min.js" type="text/javascript"></script> <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../themes/icon.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() { $(\'#test\').datagrid({ title: \'jQuery EasyUI---DataGrid\', iconCls: \'icon-save\', width: 500, height: 350, nowrap: false, striped: true, url: \'../Data/datagrid_data.json\', sortName: \'ID\', sortOrder: \'desc\', idField: \'ID\', frozenColumns: [[ { field: \'ck\', checkbox: true }, { title: \'ID\', field: \'ID\', width: 80, sortable: true } ]], columns: [[ { title: \'基本信息\', colspan: 2 }, { field: \'opt\', title: \'操作\', width: 100, align: \'center\', rowspan: 2, formatter: function(value, rec) { return \'<span style="color:red">编辑 删除</span>\'; } } ], [ { field: \'name\', title: \'Name\', width: 120 }, { field: \'addr\', title: \'Address\', width: 120, rowspan: 2, sortable: true } ]], pagination: true, rownumbers: true, singleSelect: false, toolbar: [{ text: \'添加\', iconCls: \'icon-add\', handler: function() { alert(\'添加数据\') } }, \'-\', { text: \'保存\', iconCls: \'icon-save\', handler: function() { alert(\'保存数据\') } }] }); }); </script> </head> <body> <table id="test"></table> </body> </html>
效果：jQuery EasyUI---DataGrid
jQuery EasyUI---Accordion
手风琴效果
代码 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Accordion</title> <script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jquery.easyui.min.js" type="text/javascript"></script> <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../themes/icon.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"></script> </head> <body> <div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;"> <div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;"> <div title="Title1" style="overflow:auto;padding:10px;"> <h3>Accordion1</h3> </div> <div title="Title2" style="padding:10px;"> <h3>Accordion2</h3> </div> <div title="Title3"> <h3>Accordion3</h3> </div> </div> </div> </body> </html>
效果：这里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。
jQuery EasyUI---Dialog 弹窗
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dialog</title> <script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jquery.easyui.min.js" type="text/javascript"></script> <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../themes/icon.css" rel="stylesheet" type="text/css" /> <script> $(function(){ $(\'#dd\').dialog({ toolbar:[{ text:\'添加\', iconCls:\'icon-add\', handler:function(){ alert(\'添加数据\') } },\'-\',{ text:\'保存\', iconCls:\'icon-save\', handler:function(){ alert(\'保存数据\') } }], buttons:[{ text:\'提交\', iconCls:\'icon-ok\', handler:function(){ alert(\'提交数据\'); } },{ text:\'取消\', handler:function(){ $(\'#dd\').dialog(\'取消\'); } }] }); }); </script> </head> <body> <div id="dd" style="padding:5px;width:400px;height:200px;"> <p>jQuery EasyUI---Dialog</p> </div> </body> </html>
效果：
jQuery EasyUI---Tabs
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Tabs</title> <script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jquery.easyui.min.js" type="text/javascript"></script> <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../themes/icon.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> <h1>Tab1 Content</h1> </div> <div title="Tab5" closable="true" style="padding:10px;display:none;"> <div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;"> <div title="Title1">Content 1</div> <div title="Title2">Content 2</div> <div title="Title3">Content 3</div> </div> </div> </div> </body> </html>
效果：
jQuery EasyUI---Messager
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Messager</title> <script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jquery.easyui.min.js" type="text/javascript"></script> <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../themes/icon.css" rel="stylesheet" type="text/css" /> <script> function show1() { $.messager.show({ title: \'提示信息1\', msg: \'信息1\', showType: \'show\' }); } function show2() { $.messager.show({ title: \'提示信息2\', msg: \'信息5分钟后消失.\', timeout: 5000, showType: \'slide\' }); } function show3() { $.messager.show({ title: \'渐进显示信息3\', msg: \'渐进显示信息3\', timeout: 0, showType: \'fade\' }); } </script> </head> <body> <h1>信息提示</h1> <div> <a href="javascript:void(0)" onclick="show1()">显示</a> | <a href="#" onclick="show2()">滑动</a> | <a href="#" onclick="show3()">渐进显示</a> | </div> </body> </html>
效果：
jQuery EasyUI---ValidateBox
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ValidateBox</title> <script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jquery.easyui.min.js" type="text/javascript"></script> <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../themes/icon.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <table> <tr> <td>姓名:</td> <td><input class="easyui-validatebox" required="true" validType="length[1,3]"></td> </tr> <tr> <td>电子邮件:</td> <td><input class="easyui-validatebox" required="true" validType="email"></td> </tr> <tr> <td>URL:</jquery easyui datagrid 的分页,为啥总是显示所有的数据啊，哪位大虾帮忙看看啊，下面是代码