DWZ框架的url变量替换

HTML扩展方式navTab, dialog, ajaxTodo 的url支持变量替换。例如：__URL__/edit/id/{xxx}

大括号内的xxx就是变量名，主要功能是结合table组件一起使用，下面是dwz_thinkphp中用户列表的示例：

下图中的删除、编辑、修改密码都是用了url变量替换：

 删除、编辑、修改密码使用了变量{sid_user}

<tbody>中<tr target="sid_user"rel="{$vo['id']}">

当选中一行时,tr上的rel值会自动替换到url变量中.

注意url变量名{sid_user}和tr的target="sid_user"保持一致.

代码示例：

<aclass="delete" href="__URL__/foreverdelete/id/{sid_user}/navTabId/__MODULE__"target="ajaxTodo" title="你确定要删除吗？" warn="请选择用户"><span>删除</span></a>
 
<aclass="edit" href="__URL__/edit/id/{sid_user}"target="dialog" mask="true"warn="请选择用户"><span>编辑</span></a>
 
<aclass="icon" href="__URL__/password/id/{sid_user}"target="dialog" mask="true"warn="请选择用户"><span>修改密码</span></a>
 
<tableclass="list" width="100%"layoutH="116">
    <thead>
    <tr>
       <th width="60">编号</th>
       <th width="100">用户名</th>
       <th>昵称</th>
       <th>Email</th>
       <th width="100">添加时间</th>
       <th width="120">上次登录</th>
       <th width="80">登录次数</th>
       <th width="80">状态</th>
    </tr>
    </thead>
    <tbody>
    <volist id="vo" name="list">
       <tr target="sid_user"rel="{$vo['id']}">
           <td>{$vo['id']}</td>
           <td>{$vo['account']}</td>
           <td>{$vo['nickname']}</td>
           <td>{$vo['email']}</td>
           <td>{$vo['create_time']|date="Y-m-d",###}</td>
           <td>{$vo['last_login_time']|date="Y-m-dH:i:s",###}</td>
           <td>{$vo['login_count']}</td>
           <td>{$vo['status']|showStatus=$vo['id']}</td>
       </tr>
    </volist>
    </tbody>
</table>

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 totalnumber of files uploaded: "+data.filesUploaded+"\n"
           + "The totalnumber of errors while uploading: "+data.errors+"\n"
           + "The totalnumber of bytes uploaded: "+data.allBytesLoaded+"\n"
           + "The averagespeed 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);
}