jqGrid 多选

最新推荐文章于 2023-03-28 09:47:22 发布

dream_heheda

最新推荐文章于 2023-03-28 09:47:22 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： # jQuery控件文章标签： jquery

本文链接：https://blog.youkuaiyun.com/dreamstar613/article/details/73123524

jQuery控件专栏收录该内容

11 篇文章

订阅专栏

这篇博客详细介绍了如何在jqGrid中实现多选功能，通过HTML和JavaScript代码示例，展示了设置复选框、配置jqGrid参数以及处理选定行的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>