jqGrid 多选

html代码

<div>
    <table id="list"></table>
    <div id="pager"></div>
</div>

<div class="choose-btn-fr">
    <a href="javascript:void(0)" onclick="select()">选择</a>
</div>

js代码

<script>
    jQuery("#list").jqGrid({

        url : 'watchPoint/json/all', 
        datatype : "json", 
        autowidth : true,
        height : 'auto',
        shrinkToFit : true,
        multiselect : true,//第一步:允许多选
        pgbuttons : false,//是否显示用于翻页的按键,默认为true 
        pginput : false,//是否显示用于输入目标页码的输入框,默认为true
        colNames : [ '序号', '线路', '行别', '区间', '起讫里程', '防洪等级' ],//jqGrid的列显示名字
        colModel : [  
        {
            name : 'myrn',
            index : 'myrn',
            width : 80,
            sortable : false,
            align : "left"

        }, {
            name : 'section.railway.name',
            index : 'section.railway.name',
            width : 100,
            align : "left"
        }, {
            name : 'side',
            index : 'side',
            width : 100,
            align : "left"
        }, {
            name : 'section.name',
            index : 'section.name',
            width : 200,
            align : "left"
        }, {
            name : 'rangeMileage',
            index : 'rangeMileage',
            width : 100,
            align : "left"
        }, {
            name : 'floodLevel',
            index : 'floodLevel',
            width : 80,

        } ],

        rowNum : 0,  //不分页
        /*  rowList : [ 10, 20, 30 ], */
        pager : '#pager', 
        sortname : 'id',  
        sortorder : "desc", 
        mtype : "post", 
        viewrecords : true,
        jsonReader : {
            root : "content",  
            page : "",  
            total : "totalPages",  
            records : "totalElements", 
            repeatitems : false,
            id : "id"
        },
        gridComplete : function() {  
            var ids = jQuery("#list").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var id = ids[i];

                jQuery("#list").jqGrid('setRowData', ids[i], {

                    myrn : i + 1,

                });
            } 
        }, 
        loadComplete : function(data) { 

        },
        caption : ""//表格的标题名字
    });

    jQuery("#list").jqGrid('navGrid', '#pager', {
        edit : false,
        add : false,
        del : false,
        search : false
    });

    /*获取已选择的防洪看守点,并填入新增表格*/
    function select() {
        /*第二步:获取选中行的所有id*/
        var ids = $("#list").jqGrid('getGridParam', 'selarrrow');
        if (null == ids || ids.length == 0) {
            alert("至少选择一个防洪看守点");
        } else {
            for (var i = 0; i < ids.length; i++) {
                /*第三步:获取某一条选中行的数据*/
                var rowData = $("#list").jqGrid('getRowData', ids[i]);
                /*第四步:获取某一条选中行的某一列值*/
                alert(rowData['section.railway.name']);
                alert(rowData['side']);



    }

</script>
posted on 2017-06-12 17:42  dreamstar  阅读(295)  评论(0编辑  收藏  举报