DWZ局部刷新实现

2023-11-23 16:58
文章标签 实现 刷新 局部 dwz

本文主要是介绍DWZ局部刷新实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题:我要刷新回收站页签的列表

当点击刷新的时候,我需要当前页面的数据进行刷新,而不是刷新整改页面


QQ截图20180823221136.png

分析:

使用DWZ自带框架的navTabPageBreak(args,rel)方法,需要传入两个参数。

    navTabPageBreak(args,rel)方法代码如下:

/**  

 * 处理navTab中的分页和排序  

 * @param args {pageNum:"n", numPerPage:"n", orderField:"xxx", orderDirection:""}  

 * @param rel: 可选 用于局部刷新div id号  

 */  

function navTabPageBreak(args, rel){  

        //实质上调用的 dwzPageBreak 方法,dwzPageBreak 是对navTab和dialog通用一个方法  

    dwzPageBreak({targetType:"navTab", rel:rel, data:args});  

}  

   

/**  

 * 处理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);  

        //获取默认的父容器,一般就是当前的dialog和当的navTab  

        var $parent = op.targetType == "dialog" ? $.pdialog.getCurrent() : navTab.getCurrentPanel();  

        //这里是局部的刷新, 流程就是通过Ajax请求获取到新的html片段,替换掉 指定的id (op.rel)节点,然后从新格式化布局。  

    if (op.rel) {  

        var $box $parent.find("#" + op.rel);  

                //获取当前页面的查询form 下面会重点讲解  

        var form = _getPagerForm($box, op.data);  

        if (form) {  

                        //获取新的html片段,替换掉原始的。  

            $box.ajaxUrl({                                         //获取查询表单里参数,所以刷新页面时表表单数据是一并发过去的   

                type:"POST", url:$(form).attr("action"), data: $(form).serializeArray(), callback:function(){  

                                        //重新格式化布局  

                    $box.find("[layoutH]").layoutH();  

                }  

            });  

        }  

         //刷新整个 navTab、或者 dialog  

         else {  

             //获取当前页面的查询form 下面会重点讲解  

             var form = _getPagerForm($parent, op.data);  

               

            //获取查询表单里参数,所以刷新页面时表表单数据是一并发过去的   

            var params = $(form).serializeArray();  

            //通过各个reload方法可以刷新  

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

            }  

         }  

}  

   

/**  

 *   

 * @param {Object} args {pageNum:"",numPerPage:"",orderField:"",orderDirection:""}  

 * @param String formId 分页表单选择器,非必填项默认值是 "pagerForm"  

 */  

   

//dwzPageBreak 方法调用这个方法   

function _getPagerForm($parent, args) {  

         //获取当前页面下查询Form节点  

         //#pagerForm Id 名字很重要 如果传递不了参数,可以检查一下 ID 名称         

        var form = $("#pagerForm"$parent).get(0);  

    if (form) {  

                //在这里会把你传递的参数附上。  

        if (args["pageNum"]) form[DWZ.pageInfo.pageNum].value = args["pageNum"];  

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

                //在这里附上值,从而达到你切换数量时刷新页面的效果  

        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;  

}

以上代码转载自:https://blog.csdn.net/java7star/article/details/9254569 

 

由此,我们给 navTabPageBreak(args,rel)函数传入页面内需要刷新的并且带有rel属性的标签

方法调用代码:

<li><div class="buttonActive"><div class="buttonContent"><button type="button" onclick="navTabPageBreak('','qd_showRecycle'); ">刷新</button></div></div></li>

rel参数(qd_showRecycle)指定(需要刷新)的标签:

<table id='table' class="list" width="100%" layoutH="170" rel="qd_showRecycle">

 

这样,我们就可以局部刷新指定的页签了。

这篇关于DWZ局部刷新实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/419385

相关文章

使用shardingsphere实现mysql数据库分片方式

《使用shardingsphere实现mysql数据库分片方式》本文介绍如何使用ShardingSphere-JDBC在SpringBoot中实现MySQL水平分库,涵盖分片策略、路由算法及零侵入配置... 目录一、ShardingSphere 简介1.1 对比1.2 核心概念1.3 Sharding-Sp

Java+AI驱动实现PDF文件数据提取与解析

《Java+AI驱动实现PDF文件数据提取与解析》本文将和大家分享一套基于AI的体检报告智能评估方案,详细介绍从PDF上传、内容提取到AI分析、数据存储的全流程自动化实现方法,感兴趣的可以了解下... 目录一、核心流程:从上传到评估的完整链路二、第一步:解析 PDF,提取体检报告内容1. 引入依赖2. 封装

Java实现复杂查询优化的7个技巧小结

《Java实现复杂查询优化的7个技巧小结》在Java项目中,复杂查询是开发者面临的“硬骨头”,本文将通过7个实战技巧,结合代码示例和性能对比,手把手教你如何让复杂查询变得优雅,大家可以根据需求进行选择... 目录一、复杂查询的痛点:为何你的代码“又臭又长”1.1冗余变量与中间状态1.2重复查询与性能陷阱1.

python 线程池顺序执行的方法实现

《python线程池顺序执行的方法实现》在Python中,线程池默认是并发执行任务的,但若需要实现任务的顺序执行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录方案一:强制单线程(伪顺序执行)方案二:按提交顺序获取结果方案三:任务间依赖控制方案四:队列顺序消

Redis实现分布式锁全过程

《Redis实现分布式锁全过程》文章介绍Redis实现分布式锁的方法,包括使用SETNX和EXPIRE命令确保互斥性与防死锁,Redisson客户端提供的便捷接口,以及Redlock算法通过多节点共识... 目录Redis实现分布式锁1. 分布式锁的基本原理2. 使用 Redis 实现分布式锁2.1 获取锁

Linux实现查看某一端口是否开放

《Linux实现查看某一端口是否开放》文章介绍了三种检查端口6379是否开放的方法:通过lsof查看进程占用,用netstat区分TCP/UDP监听状态,以及用telnet测试远程连接可达性... 目录1、使用lsof 命令来查看端口是否开放2、使用netstat 命令来查看端口是否开放3、使用telnet

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I

基于Java和FFmpeg实现视频压缩和剪辑功能

《基于Java和FFmpeg实现视频压缩和剪辑功能》在视频处理开发中,压缩和剪辑是常见的需求,本文将介绍如何使用Java结合FFmpeg实现视频压缩和剪辑功能,同时去除数据库操作,仅专注于视频处理,需... 目录引言1. 环境准备1.1 项目依赖1.2 安装 FFmpeg2. 视频压缩功能实现2.1 主要功

使用Python实现无损放大图片功能

《使用Python实现无损放大图片功能》本文介绍了如何使用Python的Pillow库进行无损图片放大,区分了JPEG和PNG格式在放大过程中的特点,并给出了示例代码,JPEG格式可能受压缩影响,需先... 目录一、什么是无损放大?二、实现方法步骤1:读取图片步骤2:无损放大图片步骤3:保存图片三、示php

使用Python实现一个简易计算器的新手指南

《使用Python实现一个简易计算器的新手指南》计算器是编程入门的经典项目,它涵盖了变量、输入输出、条件判断等核心编程概念,通过这个小项目,可以快速掌握Python的基础语法,并为后续更复杂的项目打下... 目录准备工作基础概念解析分步实现计算器第一步:获取用户输入第二步:实现基本运算第三步:显示计算结果进