点击jqGrid表格,弹出需要的表格的数据

2015-12-6来源:Javascript教程人气:1143

首先,我们先定义一个函数,然后在JQuery里面直接引用就可以了,

function GetJqGridRowValue(jgrid, code) {
    var KeyValue = "";
    var selectedRowIds = $(jgrid).jqGrid("getGridParam", "selarrrow");
    if (selectedRowIds != "") {
        var len = selectedRowIds.length;
        for (var i = 0; i < len ; i++) {
            var rowData = $(jgrid).jqGrid('getRowData', selectedRowIds[i]);
            KeyValue += rowData[code] + ",";
        }
        KeyValue = KeyValue.substr(0, KeyValue.length - 1);
    } else {
        var rowData = $(jgrid).jqGrid('getRowData', $(jgrid).jqGrid('getGridParam', 'selrow'));
        KeyValue = rowData[code];
    }
    return KeyValue;
}//自定义GetJqGridRowValue函数

下面是显示表格的JS文件

$(function () {
    $("#group").jqGrid({
        url: '/Group/GetGroup',
        datatype: 'json',
        mtype: 'Get',
        colNames: ['GRP_ID', 'GRP_NAME', 'GRP_DESCRipTION'],//GROUP
        colModel: [
                   { key: true, hidden: true, name: 'GRP_ID', index: 'GRP_ID' },
                   { key: false, name: 'GRP_NAME', index: 'GRP_NAME', editable: true },
                   { key: false, name: 'GRP_DESCRIPTION', index: 'GRP_DESCRIPTION', editable: true },
        ],
        ondblClickRow: function (rowid) {
            var td_id = GetJqGridRowValue("#group", "GRP_ID");
            alert(td_id);
        },//点击获取gqgird的当前列的'GRP_ID'的值
        pager: jQuery('#pager1'),
        rowNum: 5,
        rowList: [5, 10, 15, 20],
        height: '19%',
        viewrecords: true,
        caption: 'Group_Table',
        emptyrecords: '没有记录显示',
        jsonReader: {
            rows: 'rows',
            page: 'page',
            total: 'total',
            records: 'records',
            repeatitems: false,
            id: '0',
            editurl: '/Group/EditGroup'
        },
        autowidth: true,
        multiselect: false,//是否多选
    });
    jQuery("#group").jqGrid('navGrid', "#pager1",
        { edit: true, add: true, del: true, position: 'left', alerttext: "请选择需要操作的数据行!" },
 {
     zIndex: 100,
     url: '/Group/EditGroup',
     cloSEOnEscape: true,
     closeAfterEdit: true,
     recreateForm: true,
     afterComplete: function (response) {
         if (response.responseText) {
             alert(response.responseText);
         }
     }
 },
    {
        zIndex: 100,
        url: '/Group/CreateGroup',
        closeOnEscape: true,
        closeAfterEdit: true,
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        zIndex: 100,
        url: '/Group/DeleteGroup',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        msg: "你确定要删除么?",
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    }
    );
});