DWZ框架分页控件中遇到的问题
2016-03-29 10:24
633 查看
由于本文的老版编辑器阅读体验不好,已经将内容更新到这里,敬请移步:
http://blog.csdn.net/bcqtt/article/details/53909322
现在进行一个项目,后台用的是dwz框架,真的是很不错的框架,大大提高了效率。在使用过程中遇到一些小问题,在此记录下来,作为积累吧。
问题1:分页控件中<select><option>选择后跳转至初始页。
问题分析:将鼠标放到<option>的数字中,url会显示:http://localhost:8080/项目名/#,于是跟踪代码,在dwz.combox.js中,有下面一段代码影响了全局:
解决方法:将分页控件的代码修改如下
问题3:分页控件中点击下一页,或者点击分页数,或者跳转至指定页码,都会返回到登录页(用到了SpringSecurity),或者无效
问题分析:在列表页面有个form id="pagerForm",配置相应的action即可,解决方法如下
解决方法:修改dwz.ajax.js的dwzPageBreak()方法,在方法最后又这么一行
问题4:弹出的Diolag中的操作无法刷新列表的问题
处理方法:
在dwz.ajax.js中的dialogAjaxDone方法下入如下方法
问题5:更新了最新版的DWZ框架table中的值死活不能断行。
在最新版的dwz框架中,表格的单元格中多嵌套了一层<div>,无论如何使用"word-break:break-all;"都无效。只能去改源码了。
处理方法:在dwz.stable.js中找到这行:
吧包裹的div去掉,改为:
http://blog.csdn.net/bcqtt/article/details/53909322
现在进行一个项目,后台用的是dwz框架,真的是很不错的框架,大大提高了效率。在使用过程中遇到一些小问题,在此记录下来,作为积累吧。
问题1:分页控件中<select><option>选择后跳转至初始页。
问题分析:将鼠标放到<option>的数字中,url会显示:http://localhost:8080/项目名/#,于是跟踪代码,在dwz.combox.js中,有下面一段代码影响了全局:
$("option", $this).each(function(){ <span style="white-space:pre"> </span>var option = $(this); <span style="white-space:pre"> </span>options +="<li><a class=\""+ (value==option[0].value?"selected":"") +"\" href=\"#\" value=\"" + option[0].value + "\">" + option[0].text + "</a></li>"; });解决方法:修改上面这段代码如下
$("option", $this).each(function(){ <span style="white-space:pre"> </span>var option = $(this); <span style="white-space:pre"> </span>ptions +="<li><a class=\""+ (value==option[0].value?"selected":"") +"\" href=\"javascript:void;\" value=\"" + option[0].value + "\">" + option[0].text + "</a></li>"; });问题2:分页控件中<select><option>选择后,显示的数字不变。
解决方法:将分页控件的代码修改如下
<div class="pages"> <span>显示</span> <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> <option value="200">200</option> </select> <strong><script> $("select[name='numPerPage']").val('${page.numPerPage}'); </script></strong> <span>条,共${page.totalCount}条</span> </div>
问题3:分页控件中点击下一页,或者点击分页数,或者跳转至指定页码,都会返回到登录页(用到了SpringSecurity),或者无效
问题分析:在列表页面有个form id="pagerForm",配置相应的action即可,解决方法如下
<form id="pagerForm" <strong>method="GET"</strong> action="<strong>account/queryAccountPaper</strong>"> <input type="hidden" name="pageNum" value="${page.currentPage}" /> <input type="hidden" name="numPerPage" value="${page.numPerPage}" /> </form>这里的method,要用GET,否则,后台会报405 request method post not supported,我用到了SpringMVC才报这个吧估计,debug之后得出如下解决方法。
解决方法:修改dwz.ajax.js的dwzPageBreak()方法,在方法最后又这么一行
if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback});修改为:
if (form) navTab.reload($(form).attr("action"), {data: params, callback: op.callback},$(form).attr("method"));reload()方法加了一个参数$(form).attr("method"),就是form的属性method。传进去就要使用它,接着修改dwz.navTab.js的reload(),加一个参数method,并使用,修改后的代码如下:
reload: function(url, options,method){ var op = $.extend({data:{}, navTabId:"", callback:null}, options); var $tab = op.navTabId ? this._getTab(op.navTabId) : this._getTabs().eq(this._currentIndex); var $panel = op.navTabId ? this.getPanel(op.navTabId) : this._getPanels().eq(this._currentIndex); if ($panel){ if (!url) { url = $tab.attr("url"); } if (url) { if ($tab.hasClass("external")) { navTab.openExternal(url, $panel); } else { if ($.isEmptyObject(op.data)) { //获取pagerForm参数 var $pagerForm = $("#pagerForm", $panel); op.data = $pagerForm.size()>0 ? $pagerForm.serializeArray() : {} } $panel.ajaxUrl({ type:method, url:url, data:op.data, callback:function(response){ navTab._loadUrlCallback($panel); if ($.isFunction(op.callback)) op.callback(response); } }); } } } },
问题4:弹出的Diolag中的操作无法刷新列表的问题
处理方法:
在dwz.ajax.js中的dialogAjaxDone方法下入如下方法
/*在对话框中操作数据,并刷新对话框*/ function dialogAjaxDoneFather(json) { DWZ.ajaxDone(json); if (json.statusCode == DWZ.statusCode.ok) { if (json.navTabId) { var dialog = $("body").data(json.navTabId); $.pdialog.reload(dialog.data("url"), { data: {}, dialogId: json.navTabId, callback: null }) } if ("closeCurrent" == json.callbackType) { $.pdialog.closeCurrent(); } } }调用方式如下:
<a class="delete" href="adCls/deleteAdCls?resKey=ad_classify_manage&id={id_adc}" targetType="dialog" target="selectedTodo" callback="dialogAjaxDoneFather" rel="ids" title="确实要删除所选记录吗?" ><span>删除</span></a>分页时调用方式如下:
<select class="combox" name="numPerPage" onchange="dialogPageBreak({numPerPage:this.value})"> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> <option value="200">200</option> </select>
<div class="pagination" targetType="dialog" totalCount="${page.totalCount}" numPerPage="${page.numPerPage}" pageNumShown="5" currentPage="${page.currentPage}"></div>
问题5:更新了最新版的DWZ框架table中的值死活不能断行。
在最新版的dwz框架中,表格的单元格中多嵌套了一层<div>,无论如何使用"word-break:break-all;"都无效。只能去改源码了。
处理方法:在dwz.stable.js中找到这行:
if (nowrapTD != "false") $ftd.html("<div>" + $ftd.html() + "</div>");
吧包裹的div去掉,改为:
if (nowrapTD != "false") $ftd.html($ftd.html());这样,在页面中就可以使用"word-break:break-all;"
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享