asp.net mvc + dwz 分页查询的详细使用方法

现在的位置: 首页 > 综合 > 正文

asp.net mvc + dwz 分页查询的详细使用方法

2013年06月17日 ⁄ 综合 ⁄ 共 15587字 ⁄ 字号小中大 ⁄ 评论关闭

-, -献给开头:

找工作关键字:应届 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是用来存查询条件的

<form id="pagerForm" action="xxx" method="post">
      <input type="hidden" name="pageNum" value="1" />/><!--【必须】value=1可以写死-->
      <input type="hidden" name="numPerPage" value="20" /><!--【可选】每页显示多少条-->
      <input type="hidden" name="orderField" value="xxx" /><!--【可选】查询排序-->
      <input type="hidden" name="orderDirection" value="asc" /><!--【可选】升序降序-->
      <!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数。
      也可以在searchForm上设置属性rel=”pagerForm”，js框架会自动把searchForm搜索条件复制到pagerForm中 -->
<input type="hidden" name="name" value="xxx" />
      <input type="hidden" name="status" value="active" />    ……
</form>

分页组件处理分页流程：
1) pagerForm中缓存了当前的查询条件，加上一个pageNum字段
2) 点击分页时动态修改pageNum,重新提交pagerForm

分页组件使用方法：

<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>

测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：

<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="2"></div>

参数说明:
targetType: navTab或dialog，用来标记是navTab上的分页还是dialog上的分页
totalCount: 总条数
numPerPage: 每页显示多少条
pageNumShown: 页标数字多少个
currentPage: 当前是第几页

注意：
服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。

找到一个表单页:

<form id="pagerForm" method="post" action="demo_page1.html">
	<input type="hidden" name="status" value="${param.status}">
	<input type="hidden" name="keywords" value="${param.keywords}" />
	<input type="hidden" name="pageNum" value="1" />
	<input type="hidden" name="numPerPage" value="${model.numPerPage}" />
	<input type="hidden" name="orderField" value="${param.orderField}" />
</form>

<div class="pageHeader">
	<form onsubmit="return navTabSearch(this);" action="demo_page1.html" method="post">
	<div class="searchBar">
		<!--<ul class="searchContent">
			<li>
				<label>我的客户：</label>
				<input type="text"/>
			</li>
			<li>
			<select class="combox" name="province">
				<option value="">所有省市</option>
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="天津">天津</option>
				<option value="重庆">重庆</option>
				<option value="广东">广东</option>
			</select>
			</li>
		</ul>
		-->
		<table class="searchContent">
			<tr>
				<td>
					我的客户：<input type="text" name="keyword" />
				</td>
				<td>
					<select class="combox" name="province">
						<option value="">所有省市</option>
						<option value="北京">北京</option>
						<option value="上海">上海</option>
						<option value="天津">天津</option>
						<option value="重庆">重庆</option>
						<option value="广东">广东</option>
					</select>
				</td>
				<td>
					建档日期：<input type="text" class="date" readonly="true" />
				</td>
			</tr>
		</table>
		<div class="subBar">
			<ul>
				<li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li>
				<li><a class="button" href="demo_page6.html" target="dialog" mask="true" title="查询框"><span>高级检索</span></a></li>
			</ul>
		</div>
	</div>
	</form>
</div>
<div class="pageContent">
	<div class="panelBar">
		<ul class="toolBar">
			<li><a class="add" href="demo_page4.html" target="navTab"><span>添加</span></a></li>
			<li><a class="delete" href="demo/common/ajaxDone.html?uid={sid_user}" target="ajaxTodo" title="确定要删除吗?"><span>删除</span></a></li>
			<li><a class="edit" href="demo_page4.html?uid={sid_user}" target="navTab"><span>修改</span></a></li>
			<li class="line">line</li>
			<li><a class="icon" href="demo/common/dwz-team.xls" target="dwzExport" targetType="navTab" title="实要导出这些记录吗?"><span>导出EXCEL</span></a></li>
		</ul>
	</div>
	<table class="table" width="100%" layoutH="138">
		<thead>
			<tr>
				<th width="80"></th>
				<th width="120">客户号</th>
				<th>客户名称</th>
				<th width="100">客户类型</th>
				<th width="150">证件号码</th>
				<th width="80" align="center">信用等级</th>
				<th width="80">所属行业</th>
				<th width="80">建档日期</th>
			</tr>
		</thead>
		<tbody>
			<tr target="sid_user" rel="1">
				<td>天津农信社</td>
				<td>A120113196309052434</td>
				<td>天津市华建装饰工程有限公司</td>
				<td>联社营业部</td>
				<td>29385739203816293</td>
				<td>5级</td>
				<td>政府机构</td>
				<td>2009-05-21</td>
			</tr>
			<tr target="sid_user" rel="2">
				<td>天津农信社</td>
				<td>A120113196309052434</td>
				<td>天津市华建装饰工程有限公司</td>
				<td>联社营业部</td>
				<td>29385739203816293</td>
				<td>5级</td>
				<td>政府机构</td>
				<td>2009-05-21</td>
			</tr>
		</tbody>
	</table>
	<div class="panelBar">
		<div class="pages">
			<span>显示</span>
			<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
			</select>
			<span>条，共${totalCount}条</span>
		</div>
		
		<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>


	</div>
</div>

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

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

<div class="panelBar">
		<div class="pages">
			<span>显示</span>
			<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
			</select>
			<span>条，共${totalCount}条</span>
		</div>
		
		<div class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>

	</div>

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

<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">

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

<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
			</select>

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

于是咱在<table>外加了一层div

<div id="table-content">
<table class="table" width="100%" layoutH="138">
		<thead>
			<tr>
				<th width="80"></th>
				<th width="120">客户号</th>
				<th>客户名称</th>
				<th width="100">客户类型</th>
				<th width="150">证件号码</th>
				<th width="80" align="center">信用等级</th>
				<th width="80">所属行业</th>
				<th width="80">建档日期</th>
			</tr>
		</thead>
		<tbody>
			<tr target="sid_user" rel="1">
				<td>天津农信社</td>
				<td>A120113196309052434</td>
				<td>天津市华建装饰工程有限公司</td>
				<td>联社营业部</td>
				<td>29385739203816293</td>
				<td>5级</td>
				<td>政府机构</td>
				<td>2009-05-21</td>
			</tr>
		</tbody>
	</table>
</div>

又将

<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">

改成了

<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value},'table-content')">

运行, 点击却没有反应, 加断点调试, 发现它里面还取了一个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的表单!
找到这个表单

<form id="pagerForm" method="post" action="demo_page1.html">
	<input type="hidden" name="status" value="${param.status}">
	<input type="hidden" name="keywords" value="${param.keywords}" />
	<input type="hidden" name="pageNum" value="1" /> 这个就是第几页
	<input type="hidden" name="numPerPage" value="${model.numPerPage}" /> 此乃每页显示数量
	<input type="hidden" name="orderField" value="${param.orderField}" />
</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});
		}
	}
}

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

于是改变结构

<div id="table-content">
<form id="pagerForm" method="post" action="@Url.Action("UniversityPage", "Background")">
<input type="hidden" name="pageNum" value="@ViewData["pageNum"]" />
<input type="hidden" name="numPerPage" value="@ViewData["numPerPage"]" />
<input type="hidden" name="count" value="@ViewData["count"]" />
</form>
<table layouth="170" class="table">
    <thead>
        <tr>
            <th width="80">
                学校ID
            </th>
            <th width="100">
                学校名
            </th>
            <th width="100">
                简拼
            </th>
            <th width="200">
                图片地址
            </th>
            <th width="100">
                状态
            </th>
        </tr>
    </thead>
    <tbody>
        @if (universities != null)
        {
            foreach (var u in universities)
            {
            <tr target="UniversityID"rel="@u.UniversityID">
                <td>
                    @u.UniversityID
                </td>
                <td>
                    @u.Name
                </td>
                <td>@u.Spell
                </td>
                <td>@u.Pic <a>点击查看</a>
                </td>
                <td>
                    @if(u.Status == true)
                {
                        <span>启用</span>
                }
                else
                {
                        <span>停用</span>
                }
                </td>
            </tr> 
            } 
        }
    </tbody>
</table>

再次运行, 交互成功.

献上前后台代码

前台

UniversityMain.cshtml

<div class="pageHeader">
    <form onsubmit="return navTabSearch(this);" action="@Url.Action("UniversityMain","Background")" method="post">
    <div class="searchBar">
        <table class="searchContent">
            <tr>
                <td>
                    我的客户：<input type="text" name="keyword" />
                </td>
                <td>
                    <select class="combox" name="province">
                        <option value="">所有省市</option>
                    </select>
                </td>
                <td>
                    建档日期：<input type="text" class="date" readonly="true" />
                </td>
            </tr>
        </table>
        <div class="subBar">
            <ul>
                <li>
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="submit">
                                检索</button></div>
                    </div>
                </li>
                <li><a class="button" href="demo_page6.html" target="dialog" mask="true" title="查询框">
                    <span>高级检索</span></a></li>
            </ul>
        </div>
    </div>
    </form>
</div>
<div class="pageContent">
    <div class="panelBar">
        <ul class="toolBar">
            <li><a class="add" href="demo_page4.html" target="navTab"><span>添加</span></a></li>
            <li><a class="delete" href="demo/common/ajaxDone.html?uid={UniversityID}" target="ajaxTodo"
                title="确定要删除吗?"><span>删除</span></a></li>
            <li><a class="edit" href="demo_page4.html?uid={UniversityID}" target="navTab"><span>修改</span></a></li>
            <li class="line">line</li>
        </ul>
    </div>
    @RenderPage("UniversityPage.cshtml")
   
</div>

UniversityPage.cshtml

@using Model
@{
    var universities = ViewData["universities"] as IQueryable<University>;
    int pagenumshown =(int)Math.Ceiling(Double.Parse(ViewData["count"].ToString()) / Double.Parse(ViewData["numPerPage"].ToString()));
}
<div id="table-content">
<form id="pagerForm" method="post" action="@Url.Action("UniversityPage", "Background")">
<input type="hidden" name="pageNum" value="@ViewData["pageNum"]" />
<input type="hidden" name="numPerPage" value="@ViewData["numPerPage"]" />
<input type="hidden" name="count" value="@ViewData["count"]" />
</form>
<table layouth="170" class="table">
    <thead>
        <tr>
            <th width="80">
                学校ID
            </th>
            <th width="100">
                学校名
            </th>
            <th width="100">
                简拼
            </th>
            <th width="200">
                图片地址
            </th>
            <th width="100">
                状态
            </th>
        </tr>
    </thead>
    <tbody>
        @if (universities != null)
        {
            foreach (var u in universities)
            {
            <tr target="UniversityID"rel="@u.UniversityID">
                <td>
                    @u.UniversityID
                </td>
                <td>
                    @u.Name
                </td>
                <td>@u.Spell
                </td>
                <td>@u.Pic <a>点击查看</a>
                </td>
                <td>
                    @if(u.Status == true)
                {
                        <span>启用</span>
                }
                else
                {
                        <span>停用</span>
                }
                </td>
            </tr> 
            } 
        }
    </tbody>
</table>


<div class="panelBar">
    <div class="pages">
        <span>显示</span>
        <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value},'table-content')">
        @{
            int[] nums = new int[] { 20, 50, 100, 200 };
            int a=0;
            foreach(var num in nums)
            {
                if(Int32.Parse(ViewData["numPerPage"].ToString()) ==num)
                {
            <option value="@num" selected="selected">@num</option>     
                }
                else
                {<option value="@num">@num</option>    }
             
            }
            }
            
            
        </select>
        <span>条，共 @ViewData["count"] 条</span>
    </div>
    <div class="pagination" targettype="navTab" totalcount="@ViewData["count"]" numperpage="@ViewData["numPerPage"]" pagenumshown="@pagenumshown"
            currentpage="@ViewData["pageNum"]" rel="table-content">
    </div>
    </div>
</div>

后台:

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();
        }

【上篇】win xp/2k3自动登录的方法~
【下篇】学生信息管理系统总结（一）

作者: xjbymhd

该日志由 xjbymhd 于11年前发表在综合分类下，最后更新于 2013年06月17日.
转载请注明: asp.net mvc + dwz 分页查询的详细使用方法 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

asp.net mvc + dwz 分页查询的详细使用方法

作者: xjbymhd

书签

最新文章New

本站推荐

返回首页