asp.net mvc + dwz 分页查询的详细使用方法
-, -献给开头:
找工作 关键字:应届 MM .net 可转php及python
擅长c# 擅长.net的web开发 调试，解决问题能力较强,能熟练使用.net开发工具c#有着较为扎实的基础功底，了解新技术
擅长asp.net mvc(3),ado.net,ado.net entity(ORM),linq,winform等
擅长sql server
熟悉Web开发基础 HTML,CSS,Javascript 熟悉JQuery 了解HTML5
使用过众多第三分组件:Spring.net,log4net,Json.net等等.net组件以及UI组件JQuery UI,树型组件ZTree,文本编辑器KingEditor等等
能清晰地描述出分层架构 mvc原理 B/S开发模式
具体良好的面向对象思想 实践过多种设计模式
曾参加过高强度acm集训，学习能力较强，心理素质良好
由于猫猫比较偷懒, 毕设的后台实在不高兴自己折腾.
于是选择了dwz这个富框架.
dwz: http://j-ui.com/
首先这篇blog可能写得有点乱, 因为里面包含了我是怎么去解决问题的思路, 并不是单纯的blog. 而是记录了我学习使用的一个过程.
直接想看完整代码的童鞋, 请使劲
点击此处
下了文档后小看了把, 不知道是我看得不仔细还是本身文档的问题, 总之感觉就是: 实在是太简洁了!
放开文档, 猫猫就直接开写了.
先说说猫猫以前分页是怎么写的:
咱用了一个叫PagedList的分页插件, 那个插件还是比较好的. 提供了很多样式.
每次点击一个页面时, 用ajax去取数据, QueryString里存有第几页和每次数据个数.
然后再把数据传回.
咱是返回一整div, 然后把原div里的东西替换掉就行了.
dwz文档里是这样描述分页的:
分页组件
分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。
因为如果数据量很大，比如有好几百页，存js分页就是悲剧了，存js分页是必须一次载入所有数据，性能很慢。
分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage
框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的
分页组件处理分页流程：
1) pagerForm中缓存了当前的查询条件，加上一个pageNum字段
2) 点击分页时动态修改pageNum,重新提交pagerForm
分页组件使用方法：
测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：
参数说明:
targetType: navTab或dialog，用来标记是navTab上的分页还是dialog上的分页
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页
注意：
服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。
找到一个表单页:
这里我相当困惑, 最后注意只说了一个思路, 却没有给出具体说明, 也没有具体的例子给咱.
咱运行了下界面, 没看出个名堂来.
于是咱找上分页组件的代码:
显示
条，共${totalCount}条
虽然从1,2,3,4选页那里看不出个名堂来, 却能发现
这句话里调用了一个js函数
根据这个
我们可以发现这段代码是改变每页显示的数据个数的
既然如此, 只要是一部分一部分那样取数据的话, 应该是需要和后台进行交互的.
咱们就去看看 navTabPageBreak()这个函数
通过firebug调试, 发现navTabPageBreak()存在于dwz.ajax.js中
/**
* 处理navTab中的分页和排序
* @param args {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}
* @param rel： 可选 用于局部刷新div id号
*/
function navTabPageBreak(args, rel){
dwzPageBreak({targetType:"navTab", rel:rel, data:args});
}于是跑去看 dwzPageBreak()
/**
* 处理navTab中的分页和排序
* targetType: navTab 或 dialog
* rel: 可选 用于局部刷新div id号
* data: pagerForm参数 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}
* callback: 加载完成回调函数
*/
function dwzPageBreak(options){
var op = $.extend({ targetType:"navTab", rel:"", data:{pageNum:"", numPerPage:"", orderField:"", orderDirection:""}, callback:null}, options);
var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();
if (op.rel) {
var $box = $parent.find("#" + op.rel);
var form = _getPagerForm($box, op.data);
if (form) {
$box.ajaxUrl({
type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){
$box.find("[layoutH]").layoutH();
}
});
}
} else {
var form = _getPagerForm($parent, op.data);
var params = $(form).serializeArray();
if (op.targetType == "dialog") {
if (form) $.pdialog.reload($(form).attr("action"), {data: params, callback: op.callback});
} else {
if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback});
}
}
}这里看到看到一条很重要的信息,
rel: 可选 用于局部刷新div id号
之前这个就是ajax成功后, 替换掉的div的id号了
于是咱在
| 客户号 | 客户名称 | 客户类型 | 证件号码 | 信用等级 | 所属行业 | 建档日期 | |
|---|---|---|---|---|---|---|---|
| 天津农信社 | A120113196309052434 | 天津市华建装饰工程有限公司 | 联社营业部 | 29385739203816293 | 5级 | 政府机构 | 2009-05-21 |
又将
改成了
运行, 点击却没有反应, 加断点调试, 发现它里面还取了一个form的值
/**
* 处理navTab中的分页和排序
* targetType: navTab 或 dialog
* rel: 可选 用于局部刷新div id号
* data: pagerForm参数 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}
* callback: 加载完成回调函数
*/
function dwzPageBreak(options){
var op = $.extend({ targetType:"navTab", rel:"", data:{pageNum:"", numPerPage:"", orderField:"", orderDirection:""}, callback:null}, options);
var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();
if (op.rel) {
var $box = $parent.find("#" + op.rel);
var form = _getPagerForm($box, op.data);
if (form) {
$box.ajaxUrl({
type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){
$box.find("[layoutH]").layoutH();
}
});
}
} else {
var form = _getPagerForm($parent, op.data);
var params = $(form).serializeArray();
if (op.targetType == "dialog") {
if (form) $.pdialog.reload($(form).attr("action"), {data: params, callback: op.callback});
} else {
if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback});
}
}
}
查看_getPagerForm()函数
function _getPagerForm($parent, args) {
var form = $("#pagerForm", $parent).get(0);
if (form) {
if (args["pageNum"]) form[DWZ.pageInfo.pageNum].value = args["pageNum"];
if (args["numPerPage"]) form[DWZ.pageInfo.numPerPage].value = args["numPerPage"];
if (args["orderField"]) form[DWZ.pageInfo.orderField].value = args["orderField"];
if (args["orderDirection"] && form[DWZ.pageInfo.orderDirection]) form[DWZ.pageInfo.orderDirection].value = args["orderDirection"];
}
return form;
}
喔喔! 原来是一个id是pagerForm的表单!
找到这个表单
继续看这个函数
/**
* 处理navTab中的分页和排序
* targetType: navTab 或 dialog
* rel: 可选 用于局部刷新div id号
* data: pagerForm参数 {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}
* callback: 加载完成回调函数
*/
function dwzPageBreak(options){
var op = $.extend({ targetType:"navTab", rel:"", data:{pageNum:"", numPerPage:"", orderField:"", orderDirection:""}, callback:null}, options);
var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();
if (op.rel) {
var $box = $parent.find("#" + op.rel);
var form = _getPagerForm($box, op.data);
if (form) {
$box.ajaxUrl({
type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){
$box.find("[layoutH]").layoutH();
}
});
}
} else {
var form = _getPagerForm($parent, op.data);
var params = $(form).serializeArray();
if (op.targetType == "dialog") {
if (form) $.pdialog.reload($(form).attr("action"), {data: params, callback: op.callback});
} else {
if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback});
}
}
}var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();这一句 很明显, 意图在于取一个节点. 于是找到 getCurrentPanel() (在dwz.navTab.js中)
getCurrentPanel: function() {
return this._getPanels().eq(this._currentIndex);
},再找到 _getPanels()
_getPanels: function(){
return this._panelBox.find("> div");
},原来是取第一个子div
然后在子div中查找table-content, 然后在table-content中查找paperForm
于是明了了 papgerForm要放在table-content中, 才能够取到ajax的url
于是改变结构
学校ID
学校名
简拼
图片地址
状态
@if (universities != null)
{
foreach (var u in universities)
{
@u.UniversityID
@u.Name
@u.Spell
@u.Pic 点击查看
@if(u.Status == true)
{
启用
}
else
{
停用
}
}
}
再次运行, 交互成功.
献上前后台代码
前台
UniversityMain.cshtml
UniversityPage.cshtml
@using Model
@{
var universities = ViewData["universities"] as IQueryable;
int pagenumshown =(int)Math.Ceiling(Double.Parse(ViewData["count"].ToString()) / Double.Parse(ViewData["numPerPage"].ToString()));
}
学校ID
学校名
简拼
图片地址
状态
@if (universities != null)
{
foreach (var u in universities)
{
@u.UniversityID
@u.Name
@u.Spell
@u.Pic 点击查看
@if(u.Status == true)
{
启用
}
else
{
停用
}
}
}
显示
条，共 @ViewData["count"] 条
后台:
public ActionResult Index()
{
return View();
}
public ActionResult UniversityMain()
{
UniversityManager universityManager = new UniversityManager();
int count = universityManager.UniversitiesCount();
var universities = DB.ChangeDoc.University.Select(n => n).OrderBy(n => n.UniversityID).Take(20);
ViewData["count"] = count;
ViewData["pageNum"] = 1;
ViewData["numPerPage"] = 20;
ViewData["universities"] = universities;
return View();
}
[HttpPost]
public ActionResult UniversityMain(FormCollection form)
{
return View();
}
[HttpPost]
public ActionResult UniversityPage(FormCollection form)
{
int p = Int32.Parse(form["pageNum"]);
int size = Int32.Parse(form["numPerPage"]);
UniversityManager universityManager = new UniversityManager();
var universities = DB.ChangeDoc.University.Select(n => n).OrderBy(n => n.UniversityID) .Skip((p-1)*size).Take(size);
ViewData["count"] = form["count"];
ViewData["universities"] = universities;
ViewData["pageNum"] = p;
ViewData["numPerPage"] = size;
//return View("UniversityMain");
return View();
}