km之路--004 easyui 二

接上一篇：

km之路--002 easyui 一

删除功能

先写这个功能是因为这个功能比较好做

对于删除功能而言，首先需要明白的是如下三个问题：

1. 如何判断是否选中了数据以及选中了几条数据？

2. 删除一条数据如何做？

3. 删除多条数据如何做？以及是否需要支持翻页选择的多条数据的删除？如果需要支持，如何做？

singleSelect属性

这个属性的解释为：如果为true，则只允许选择一行。默认为false。

也就是说默认是支持多行选择的。这里暂且不考虑只能选择一行的情况

删除按钮状态

在真正实现删除功能之前，先考虑一个小问题：delete按钮是否随时都是可点击状态的？即：

1. 先把删除按钮设置为disabled，当选中数据的时候再把删除按钮设置为可用

2. 删除按钮始终可点击，当点击删除按钮时，再去判断是否选中了数据，如果选中了，则进行删除操作，反之则提醒用户先选中数据

我选择第二种方式。

原因：选中数据不仅仅是选中一行或多行，也不仅仅是单击与双击，还有可能是选择datagrid前面的checkbox，或者选中的是一个单元格，又或者是支持键盘操作的datagrid。先不论键盘操作，单是如下四个事件处理起来就很麻烦了：

所以我选择比较简单的第二种方式【当然，主要是我比较菜】

合并问题

其实完全可以把删除一行的功能放到删除多行中进行。因为删除一行只是删除多行的特殊情况。

翻页选择

这样我们就只剩下一个问题了：是否支持翻页选择？如果需要支持，如何做？

根据如下博客：

关于easyui的datagrid翻页保存选中项 http://blog.csdn.net/li1441009033/article/details/40825267

可以得知只要设置了idField属性，就可以支持翻页选择了。既然如此，那么问题来了：支持翻页选择是否有必要？我倾向于没有必要。如果需要大批量的删除数据，我们可以直接做一个大批量删除数据的功能，没有必要进行一页一页的查找、选择、删除这样的操作。

 

删除功能实现

===流程

在前面的快速例子的基础上

1. 把student/list.html中的idField属性删除

2. 添加删除按钮的handler实现

　　2.1 判断是否已经选择数据

　　　　2.1.1 如果没有选择数据，则提示用户选择数据

　　　　2.1.2 如果已经选择数据，则进行删除操作

　　　　　　2.1.2.1 把所选择数据的ID拼接起来，形如：1,2,3

　　　　　　2.1.2.2 请求后台

　　　　　　2.1.2.3 根据后台返回结果进行相应提示　

　　　　　　2.1.2.4 reload datagrid　　　　　

3. 实现后台批量功能

===后台功能实现

===>>===controller

/**
 * 根据ID列表批量删除，参数规则为id1,id2,id3,...
 * @param ids 待删除对象的ID列表
 * @return 业务状态信息描述对象。
 * @see com.laolang.easyui.pojo.EasyuiResult 
 */
@RequestMapping(value = "delete/ids",method = RequestMethod.POST, produces = "application/json; charset=utf-8")
public ResponseEntity<EasyuiResult> delete(@RequestParam(value="ids") String ids){
    EasyuiResult easyuiResult = new EasyuiResult();
    try {
        List<Object> idList = KMStringUtils.getIdsStringArray(ids);
        Integer result = studentService.deleteByIds(Student.class, "id", idList);
        if( 0 >= result ) {
            easyuiResult.changeToFailed();
        }
        return ResponseEntity.ok(easyuiResult);
    }catch (Exception e) {
        e.printStackTrace();
    }
    easyuiResult.changeError();
    return ResponseEntity.status(HttpStatus.SC_INTERNAL_SERVER_ERROR).body(easyuiResult);
}

===>>===EasyuiResult

package com.laolang.easyui.one.pojo;

public class EasyuiResult {

    public EasyuiResult() {
        this.code = CODE_SUCCESS;
        this.desc = DESC_SUCCESSS;
    }

    public void changeToSuccess() {
        this.code = CODE_SUCCESS;
        this.desc = DESC_SUCCESSS;
    }

    public void changeToFailed() {
        this.code = CODE_FAILED;
        this.desc = DESC_FAILED;
    }
    
    public void changeError() {
        this.code = CODE_ERROR;
        this.desc = DESC_ERROR;
    }

    @Override
    public String toString() {
        return "EasyuiResult [code=" + code + ", desc=" + desc + "]";
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }

    public static final Integer CODE_SUCCESS = 200;

    public static final Integer CODE_FAILED = 300;

    public static final Integer CODE_ERROR = 400;

    public static final String DESC_SUCCESSS = "success";

    public static final String DESC_FAILED = "failed";

    public static final String DESC_ERROR = "error";

    /**
     * 业务状态码 <br />
     * 200 : 执行成功<br />
     * 300 : 执行失败<br />
     * 400 : 出错
     */
    private Integer code;

    /**
     * 业务状态描述<br />
     * success : 执行成功<br />
     * failed : 执行失败<br />
     * error : 出错 
     * 
     */
    private String desc;
}

具体的Service代码与KMStringUtils.getIdsStringArray方法不再列出

===前台 

===>>===删除按钮实现

{
text: '删除',
iconCls: 'icon-remove',
handler: function() {
    var rowsSelected = $('#studentListTable').datagrid('getSelections');
    if (rowsSelected.length <= 0) {
        $.messager.alert('提示', '请至少选择一条数据！');
        return;
    }
    for (var i = 0, idArray = []; i < rowsSelected.length; i++) {
        idArray[i] = rowsSelected[i].id;
    }
    var ids = idArray.join();
    $.ajax({
        url: SM.url.student.deleteids,
        type: 'post',
        data: 'ids=' + ids,
        dataType: 'json',
        success: function(msg) {
            var result = SM.judgeEasyuiResult.judge(msg);
            if (result.success) {
                $.messager.show({
                    title: '提示',
                    msg: '删除成功！',
                    timeout: 3000,
                    showType: 'slide'
                });
            } else if (result.failed) {
                $.messager.show({
                    title: '提示',
                    msg: '删除失败！',
                    timeout: 3000,
                    showType: 'slide'
                });
            } else if (result.error) {
                $.messager.show({
                    title: '提示',
                    msg: '未知错误！',
                    timeout: 3000,
                    showType: 'slide'
                });
            }
            $('#studentListTable').datagrid('reload');
        }
    });
}
}

===>>===SM.judgeEasyuiResult.judge

judgeEasyuiResult: {
    result : {
        success : false,
        failed : false,
        error : false
    },
    judge: function (msg) {
        SM.judgeEasyuiResult.result.success = false;
        SM.judgeEasyuiResult.result.failed = false;
        SM.judgeEasyuiResult.result.error = false;
        if( 200 === msg.code ){
            SM.judgeEasyuiResult.result.success = true;
        }else if( 300 === msg.code){
            SM.judgeEasyuiResult.result.failed = true;
        }else if( 400 === msg.code ){
            SM.judgeEasyuiResult.result.error = true;
        }
        return SM.judgeEasyuiResult.result;
    }
}

复杂查询

什么叫复杂查询呢？简而言之，我认为就是查询条件有不确定性、多样性。一个实际的例子，比如当当图书的高级查询：

那么针对到我们这个小demo中，如果要做复杂查询，只有一个表显示是不太够的，我们还需要如下两个表：

tb_classes : 班级表

tb_score : 成绩表

正常来说，班级信息与成绩信息都是要从数据库查询的，不过这里只做一个示意，暂时不做这两个表，因为我并不是实现完整的学生管理的功能。

查询条件暂时包括所属班级与性别两个条件。

实现

===前台代码

===>>===修改复杂查询面板

<div region="north" title="复杂查询" data-options="height:60,collapsible:false,collapsed:false">
    <select name="sex" id="sexSelect" class="easyui-combobox" data-options="panelHeight:'auto'" style="100px;">
        <option>---</option>
        <option value="MAIL">男</option>
        <option value="FAMAIL">女</option>
    </select>
    <select name="classesId" id="classesSelect" class="easyui-combobox" data-options="panelHeight:'auto'" style="100px;">
        <option>---</option>
        <option value="1">一班</option>
        <option value="2">二班</option>
        <option value="3">三班</option>
        <option value="4">四班</option>
    </select>
    <a id="stuSearchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
</div>

===>>===查询按钮功能实现

$('#stuSearchBtn').linkbutton({
    onClick: function() {
        
        var sex = null;
        var classesId = null;
        var param = {};
        sex = $('#sexSelect').combobox('getValue');
        classesId = $('#classesSelect').combobox('getValue');
        if( '---' != sex ){
            param.sex = sex;
        }
        if( '---' != classesId ){
            param.classesId = classesId;
        }
        
        
        console.log('sex:'+sex+'  classedId:'+classesId);
        $('#studentListTable').datagrid('load',param);
    }
});

===后台

/**
 * 分页查询
 * @param page 第几页
 * @param size 每页条数
 * @param record 查询条件
 * @return
 */
@RequestMapping(value="list",method = RequestMethod.GET, produces = "application/json; charset=utf-8")
public ResponseEntity<EasyuiGridListPojo<Student>> findPageList(@RequestParam(name = "page", defaultValue = "1") Integer page,
        @RequestParam(name = "rows", defaultValue = "10") Integer size,Student record){
    try {
        PageInfo<Student> pageInfo = studentService.findPageListByWhere(page, size, record);
        List<Student> students = pageInfo.getList();
        EasyuiGridListPojo<Student> easyuiGridListPojo = new EasyuiGridListPojo<>();
        easyuiGridListPojo.setRows(students);
        easyuiGridListPojo.setTotal(pageInfo.getTotal());
        return ResponseEntity.ok(easyuiGridListPojo);
    }catch(Exception e) {
        
    }
    
    return ResponseEntity.status(HttpStatus.SC_INTERNAL_SERVER_ERROR).body(null);
}   

其实后台代码根本没有修改，还是之前的代码

datagrid复杂查询的实现流程

实现复杂查询的输入面板

获取复杂查询的条件输入

条件的过滤【如空值或缺省值】

执行datagrid的load方法