zoukankan      html  css  js  c++  java
  • 点击jqGrid表格,弹出需要的表格的数据

    首先,我们先定义一个函数,然后在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'
            },
            auto 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);
                }
            }
        }
        );
    });
  • 相关阅读:
    2021软件工程-第一周作业01准备工作
    String.matches()的用法
    Idea使用JSP出现404问题---已解决
    如何解决Tomcat启动闪退现象(环境配置没问题)
    解决启动java的web项目时端口占用问题
    IntelliJ IDEA 连接数据库 详细过程-包含使用jdbc连接数据库
    ApplicationContextAware接口认识
    RestTemplate 服务间接口调用
    maven相关
    FastJson:json字符串与Java对象转换
  • 原文地址:https://www.cnblogs.com/hebo/p/5011191.html
Copyright © 2011-2022 走看看