JqGrid一些使用方法的总结

项目管理系统用的表格都是用JqGrid实现的，现在对项目中用到的功能进行总结，方便后续工作中使用时查看。

注：代码中所有的tabId指的是jqGrid表格的id,即：

<table id="tabId"></table>

1.获取选中行id：

var ids=$("#tabId").jqGrid("getGridParam",'selarrrow');//获取选中行id,得到的结果是一个数组
var ids = $("#tabId").jqGrid("getGridParam", 'selrow');//获取结果是行id,数字

2.获取选中行信息：

var ids = $("#tabId").jqGrid("getGridParam", 'selarrrow');
if (ids || ids.length > 0) {
    for (var i = 0; i < ids.length; i++) {
        var id = $("#tabId").getRowData(ids[i]).id;
        var name = $("#tabId").getRowData(ids[i]).name;
        ...
        //todo 表格里有什么信息继续在for循环里写自己需要得到的数据即可
    }
}

3.弹框的使用：

//警告提示框，其中type: 'warn'也可以修改为type: 'error'/type: 'success'
if($("#inputWaitTime").val() != ""){
    var flag = /^[1-9]\d*$/.test($("#inputWaitTime").val());
    if (!flag) {
        $.confirmBox({type: 'warn', msg: "请输入正整数!", defaultCloseBtnName: '确认'})
        return;
    }
}

//出现几秒后自己消失
$.messageBox("编辑成功！");

$.confirmBox({
    msg: "请谨慎操作！",
    type: "warn",
    height: 200,
    width: 400,
    buttons: {
        "确定": function () {
            $.confirmBox("close");
        }
    }
});

//可以在提示后，执行相关请求
$.confirmBox2({
    msg: "请确定删除？",
    height: 200,
    width: 400,
    type: "warn",
    addDefaultCloseBtn: true,
    buttons: {
    "确定": function () {
        $.ajax({
            url: '',
            type: 'post',
            data: data,
            success: function (res) {
                if (res.code > 200) {
                    $.confirmBox({type: 'warn', msg: res.msg, defaultCloseBtnName: '确定'});
                    return;
                }
                $.confirmBox2("close");
                $.messageBox("删除成功");
               }
            })
          }
        }
});

//点击按钮的时候，弹出弹框页面
$("#basicInformation").on('click',function () {
    if ($(this).isTRDisable()) {
        return;
    }
    $("#alertDialog").createDialog({
        title: "弹框页面",
        width: 400,
        height: 240,
        url: "alertDialog.jsp",
        buttons: {
            "确定": function () {
                $("#alertDialog").closeDialog();
            }
        }
    })
    return false;
});

 4.弹框“确定”，“取消”按钮的禁用与启用

//启用
$(".ui-dialog .ui-dialog-buttonpane button:first-child").removeAttr("disabled");
$(".ui-dialog .ui-dialog-buttonpane button:first-child").css("background", "#286090").css("color", '#fff').css("cursor", "pointer");

//禁用
$(".ui-dialog .ui-dialog-buttonpane button:first-child").attr("disabled", "true");
$(".ui-dialog .ui-dialog-buttonpane button:first-child").css("background", "#efefef").css("color", '#999').css("cursor", "default");

5.点击“取消”或"X",关闭弹框时，中断ajax请求

$(".ui-dialog .ui-dialog-buttonpane button:last-child").on('click', function () {
    request.abort();
});
$(".ui-dialog .ui-dialog-titlebar-close").on('click', function () {
    request.abort();
});

6.关闭弹框，根据弹框打开的方式，选择对应关闭弹框的方法：

$("#alertDialog").closeDialog();


$.confirmBox2("close");


$.confirmBox("close");