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。只要把这个页面碎片组装好就行。


找到一个表单页:

	
	
	
	
	



	

	

		
		

			

				

					我的客户：
				
				

					
						所有省市
						北京
						上海
						天津
						重庆
						广东
					
				
				

					建档日期：
				
			
		
		

			

				
检索
				
高级检索
			
		
	
	


	

		

			
添加
			
删除
			
修改
			
line
			
导出EXCEL
		
	
	

		

			

				

				
客户号
				
客户名称
				
客户类型
				
证件号码
				
信用等级
				
所属行业
				
建档日期
			
		
		

			

				
天津农信社
				
A120113196309052434
				
天津市华建装饰工程有限公司
				
联社营业部
				
29385739203816293
				
5级
				
政府机构
				
2009-05-21
			
			

				
天津农信社
				
A120113196309052434
				
天津市华建装饰工程有限公司
				
联社营业部
				
29385739203816293
				
5级
				
政府机构
				
2009-05-21
			
		
	
	

		

			显示
			
				20
				50
				100
				200
			
			条，共${totalCount}条
		
		
		



	

这里我相当困惑, 最后注意只说了一个思路, 却没有给出具体说明, 也没有具体的例子给咱.
咱运行了下界面, 没看出个名堂来.


于是咱找上分页组件的代码:

		

			显示
			
				20
				50
				100
				200
			
			条，共${totalCount}条
		
		
		


	

虽然从1,2,3,4选页那里看不出个名堂来, 却能发现

这句话里调用了一个js函数

 根据这个



				20
				50
				100
				200
			

我们可以发现这段代码是改变每页显示的数据个数的
既然如此, 只要是一部分一部分那样取数据的话, 应该是需要和后台进行交互的.
咱们就去看看 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号了


于是咱在外加了一层div

	客户号	客户名称	客户类型	证件号码	信用等级	所属行业	建档日期
天津农信社	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
 


于是改变结构

        @if (universities != null)
        {
            foreach (var u in universities)
            {
             
            } 
        }
    

    

        

            

                学校ID
            
            

                学校名
            
            

                简拼
            
            

                图片地址
            
            

                状态
            
        
    
    

                

                    @u.UniversityID
                
                

                    @u.Name
                
                
@u.Spell
                
                
@u.Pic 点击查看
                
                

                    @if(u.Status == true)
                {
                        启用
                }
                else
                {
                        停用
                }
                
            

再次运行, 交互成功.




献上前后台代码


前台


UniversityMain.cshtml

    

    

        

            

                

                    我的客户：
                
                

                    
                        所有省市
                    
                
                

                    建档日期：
                
            
        
        

            

                

                    

                        

                            
                                检索
                    
                
                

                    高级检索
            
        
    
    


    

        

            
添加
            
删除
            
修改
            
line
        
    
    @RenderPage("UniversityPage.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()));
}







        @if (universities != null)
        {
            foreach (var u in universities)
            {
             
            } 
        }
    

    

        

            

                学校ID
            
            

                学校名
            
            

                简拼
            
            

                图片地址
            
            

                状态
            
        
    
    

                

                    @u.UniversityID
                
                

                    @u.Name
                
                
@u.Spell
                
                
@u.Pic 点击查看
                
                

                    @if(u.Status == true)
                {
                        启用
                }
                else
                {
                        停用
                }
                
            




    

        显示
        
        @{
            int[] nums = new int[] { 20, 50, 100, 200 };
            int a=0;
            foreach(var num in nums)
            {
                if(Int32.Parse(ViewData["numPerPage"].ToString()) ==num)
                {
            @num     
                }
                else
                {@num    }
             
            }
            }
            
            
        
        条，共 @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();
        }