词条统计
浏览次数:6050 次
编辑次数:1次 历史版本
最近更新:2013/6/20
创建者:掷鸡蛋者


我们先前的文章列表管理页面比较简单,只是演示一下基本原理和功能,在实际项目中基本没有用处。下面我们需要改造一下,让它支持如下功能:

1、逐项选取、全选
2、根据选取项删除
3、转移到分类
4、搜索

效果如如下:

 

步骤一、保证页面已经引入了js文件:wojilu.common.admin.js

引入的 wojilu.common.admin.js 对于全选、选定效果、工具栏操作命令等都做好了封装,有了它,您就不用写js代码了。

步骤二、我们修改Artilcle/Index.html 视图文件的 html 代码。分成2个部分:

第一部分:添加一个工具栏

关于这个工具栏,我们按功能逐一解释:

1、转移到分类
    adminDropCategoryList 是一个固定的名称,如果您不想自己写js管理分类转移,就要使用这个固定的名称,common.admin.js 中要用到

2、删除。这个命令有两个属性

     其中class="btnCmd"表明这是一个工具栏命令,cmd="delete"的值"delete"指出这个命令的内容就是"delete"

3、搜索

1、搜索表单使用的方法是get,而不是post。get可以让查询关键词出现在网址栏中,便于在分页的结果集中继续浏览

2、关键词文本框有一个值 #{key},这个变量是服务器根据当前查询获得的。让用户知道自己当前正在作何查询。

3、提交搜索按钮我们没有使用 type="submit"类型,而是使用了 type="button" 类型,是为了查询网址干净一点。

    为了让用户点击了这个button也能提交表单查询,您需要额外加一点js

 

第二部分:在列表中添加选择框

 这个选择框有两点需要注意:
1、请将name属性命名为 selectThis。也是因为 wojilu.common.admin.js 要用到
2、给checkBox设置一个ID,值为checkbox开头,附加上当前文章的ID号

当然,您还要添加一个全选按钮

这个全选框必须要用一个名叫 selectAll 的ID号。

虽然有点烦,但功能这么多,我们总得一一落实。

步骤三、我们来看服务器端代码实现。

首先,您需要在 ArticleController.Index 方法中增加如下代码,为工具栏绑定数据:

需要注意的是其中的 operationUrl ,它不在工具栏中,而是在数据表格中定义:


 好了,下面我们开始实现工具栏命令的功能

其实,您还要再加上验证功能,防止客户端恶意提交数据

 

validateInput 方法专门用于验证,其实现代码如下:

最后,我们完成搜索功能: