当前位置: 首页 > 工具软件 > Dwz_group > 使用案例 >

DWZ的几个常用组件

苏麒
2023-12-01

checkbox全选、反选

checkbox全选、反选。(demo à 表单组件 à多选框/单选框)

<label><input type="checkbox" name="c1" value="1" />选择1</label>

<label><input type="checkbox" name="c1" value="2" />选择2</label>

<label><input type="checkbox" name="c1" value="3" />选择3</label> 

<input type="checkbox" class="checkboxCtrl" group="c1" />全选

<button type="button" class="checkboxCtrl" group="c1" selectType="invert">反选</button>

uploadify多文件上传

<div id="fileQueue" class="fileQueue"></div>

<input id="testFileInput" type="file" name="image" 

   uploader="uploadify/scripts/uploadify.swf"

   cancelImg="uploadify/cancel.png" 

   script="ajaxDone.html" 

   scriptData="{PHPSESSID:'xxx', ajax:1}"

   folder="/folder"

   fileQueue="fileQueue"

   [onComplete="uploadifyComplete"]

   [onAllComplete="uploadifyAllComplete"] />

参数说明:

uploader flash组件uploadify.swf的访问路径

cancelImg: 取消按钮使用的图片路径

script:    服务器端处理上传文件的路径

scriptData:上传文件时需要传递给服务器的其他参数,是json格式

folder:     是服务器存储文件的目录

fileQueue:是上传进度显示区域

onAllComplete:可选参数,单个文件上传完时触发,参数有:

      event event 事件对象

      Id     上传进度队列的id

      fileObj: 是一个包含上传文件信息的对象,包括的信息有:

                                name: 文件名

                                filePath: 上传文件在服务器端的路径

                                 size:      文件的大小     

                                creationDate:文件创建的时间

                                 modificationDate:文件最后更改的时间

                                 type:是以"."开始的文件扩展名

      response:服务器端处理完上传文件后返回的文本

      data:    包含有两个参数的对象,

                                fileCount:上传队列中还剩下的文件数

                                speed:KB/s为单位的文件上传平均速度

uploadifyAllComplete:可选参数,全部文件上传完成时调用的函数,参数有:

      event:event 事件对象

      data: 是一个包含以下信息的对象,

                                filesUploaded: 已经上传的文件总数

                                 errors:        上传出错的文件总数

                                 allBytesLoaded:已经上传文件的总大小

                                 speed:          KB/s为单位的上传文件的平均速度

以下3个方法是dwz.ajax.js中定义的用于文件上传的会调函数:

function uploadifyAllComplete(event, data){

      if (data.errors) {

            var msg = "The total number of files uploaded: "+data.filesUploaded+"\n"

                  + "The total number of errors while uploading: "+data.errors+"\n"

                  + "The total number of bytes uploaded: "+data.allBytesLoaded+"\n"

                  + "The average speed of all uploaded files: "+data.speed;

            alert("event:" + event + "\n" + msg);

      }

}

 

function uploadifyComplete(event, queueId, fileObj, response, data){

      DWZ.ajaxDone(DWZ.jsonEval(response));

}

 

function uploadifyError(event, queueId, fileObj, errorObj){

      alert("event:" + event + "\nqueueId:" + queueId + "\nfileObj.name:" 

            + fileObj.name + "\nerrorObj.type:" + errorObj.type + "\nerrorObj.info:" + errorObj.info);

}

 

combox组件

在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref。

ref 属性则是为了做级联定义的,ref所指向的则是当前combox值改变成引起联动的下一级combox,ref用下一级combox的id属性来赋值。

注意:一般combox没必要设置id属性,只要级联时需要设置子级id等于父级ref,不同navTab和dialog中combox组件id必须唯一

以下是级联示例:

<select class="combox" name="province" ref="combox_city" refUrl="city.do?code={value}">

      <option value="all">所有省市</option>

      <option value="bj">北京</option>

      <option value="sh">上海</option>

</select>

<select class="combox" name="city" id="combox_city" ref="combox_area" refUrl=" area.do?code={value}">

      <option value="all">所有城市</option>

</select>

<select class="combox" name="area" id="combox_area">

      <option value="all">所有区县</option>

</select>

服务器端返回json格式:

[

      ["all", "所有城市"],

      ["bj", "北京市"]

]

 

 类似资料: