esayui-ajax(不同的状态展示不同的按钮)

最新推荐文章于 2021-08-05 13:34:24 发布

特李谱

最新推荐文章于 2021-08-05 13:34:24 发布

阅读量496

点赞数 1

CC 4.0 BY-SA版权

分类专栏： esayu 文章标签： javascript java

本文链接：https://blog.youkuaiyun.com/qq_35995940/article/details/78339183

esayu 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用EasyUI实现表格操作栏的方法，通过不同状态显示不同的操作按钮，如继续、暂停等，并展示了前端JS代码和后端处理逻辑。

1.效果图
这里写图片描述

2.js代码

field : 'expireDate',
    title : '结束时间',
    align:"center",
    width : 50
},{
    field : 'action',
    title : '动作',
    width : 50,
    formatter : function(value, row, index) {
        if(row.status=='暂停'){
            return formatString(
                    '<img onclick="rafficStatus_edit(\'{0}\');" src="{1}" title="{2}"/>' +
                    ' &nbsp<a onclick="rafficStatus_next(\'{3}\');" href="#" >{4}</a> ' +
                    ' &nbsp<a onclick="rafficStatus_stop(\'{5}\');" href="#" >{6}</a> ' 
                    ,
                    row.itemsId,'${pageContext.request.contextPath}/jslib/jquery-easyui-1.3.1/themes/icons/search.png','详情', 
                    row.itemsId, '继续',
                    row.itemsId, '停止'
                );
        }else if(row.status=='执行中'){
            return formatString(
                '<img onclick="rafficStatus_edit(\'{0}\');" src="{1}" title="{2}"/>' +
                ' &nbsp;<a onclick="rafficStatus_break(\'{3}\');" href="#" >{4}</a> '+
                ' &nbsp<a onclick="rafficStatus_stop(\'{5}\');" href="#" >{6}</a> ' 
                ,
                row.itemsId,'${pageContext.request.contextPath}/jslib/jquery-easyui-1.3.1/themes/icons/search.png','详情', 
                row.itemsId, '暂停',
                row.itemsId, '停止'
            );
        }else if(row.status=='待发'){
            return formatString(
                    '<img onclick="rafficStatus_edit(\'{0}\');" src="{1}" title="{2}"/>' +
                    ' &nbsp;<a onclick="rafficStatus_break(\'{3}\');" href="#" >{4}</a> '+
                    ' &nbsp<a onclick="rafficStatus_stop(\'{5}\');" href="#" >{6}</a> ' 
                    ,
                    row.itemsId,'${pageContext.request.contextPath}/jslib/jquery-easyui-1.3.1/themes/icons/search.png','详情', 
                    row.itemsId, '暂停',
                    row.itemsId, '停止'
                );
            }else if(row.status=='加载中'){
                return formatString(
                        '<img onclick="rafficStatus_edit(\'{0}\');" src="{1}" title="{2}"/>' +
                        ' &nbsp;<a onclick="rafficStatus_break(\'{3}\');" href="#" >{4}</a> '+
                        ' &nbsp<a onclick="rafficStatus_stop(\'{5}\');" href="#" >{6}</a> ' 
                        ,
                        row.itemsId,'${pageContext.request.contextPath}/jslib/jquery-easyui-1.3.1/themes/icons/search.png','详情', 
                        row.itemsId, '暂停',
                        row.itemsId, '停止'
                    );
                }else if(row.status=='完成'){
            return formatString(
                    '<img onclick="rafficStatus_edit(\'{0}\');" src="{1}" title="{2}"/>' 
                    ,
                    row.itemsId,'${pageContext.request.contextPath}/jslib/jquery-easyui-1.3.1/themes/icons/search.png','详情' 

                );
        }





    }
}]],
toolbar : [
    {

3.点击按钮修改状态
比如继续按钮:定义一个function方法

//继续按钮
function rafficStatus_next(itemsId){    
    $.messager.confirm('确认', '您确认要修改'+itemsId+'吗？', function(r) {
    if (r) {
            $.ajax({
                url : '${pageContext.request.contextPath}/rafficManagerController/editStatusButton.action',
                data : {
                    itemsId : itemsId,
                    status : 0
                },
                dataType : 'json',
                success : function(result) {
                    if (result.success) {
                        $('#rafficManager_datagrid').datagrid('load');
                        $('#rafficManager_datagrid').datagrid('uncheckAll').datagrid('unselectAll').datagrid('clearSelections');
                    }
                    $.messager.show({
                        title : '提示',
                        msg : result.msg
                    });
                }
            });
        }
    });
}

4.后台方法

//继续按钮
@RequestMapping("/editStatusButton")
@ResponseBody
public Json editStatusButton(int itemsId,int status){
    Json j = new Json();
    boolean a = trafficManager.updateTrafficItemStatus(itemsId,status);
    if(a=true){
        j.setSuccess(true);
        j.setMsg("操作成功！");
    }else{
        logger.info("继续状态修改失败");
        j.setSuccess(false);
        j.setMsg("操作失败！");
    }
    return j;
}