DWZ的几个常用组件

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", "北京市"]

]