jqGrid 多选复选框编辑列

最新推荐文章于 2022-12-06 23:14:06 发布

xuanwuziyou

最新推荐文章于 2022-12-06 23:14:06 发布

阅读量3.9w

点赞数 1

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/26495349

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

1.首先看一下效果

2.html代码

<table id="grid-table"></table>

3.在$(function (){...} 方法中，写如下方法，用json数据填充jqGrid，实现多选复选框，和编辑列

 jQuery("#grid-table").jqGrid({
                datatype: "local",
                data: mydata,
                colNames: ['编号', '字段名称', '字段描述', '字段类型', '主Guid', '子Guid'],
                colModel: [
                     { name: 'ID', index: 'ID', width: 35, align: 'center', key: 'true' },
                     { name: 'fieldName', index: 'fieldName', width: 100 },
                     { name: 'fieldDisc', index: 'fieldDisc', width: 327, editable: true, editoptions: { maxlength: "20" } },
                     { name: 'fieldType', index: 'fieldType', width: 100 },
                     { name: 'mainGuid', index: 'mainGuid', width: 100, hidden: true },
                     { name: 'subGuid', index: 'subGuid', width: 100, hidden: true }
                ],
                width: 580,
                height: 'auto',
                rowNum: 10,
                rowList: [10, 20, 30],
                recordpos: 'left',
                viewrecords: true,
                multiselect: true,//复选框   
                //ondblClickRow 双击字段描述列可编辑，编辑完毕按Enter就保存在页面上了             
                ondblClickRow: function (id) {
                    if (id && id !== lastsel) {
                        jQuery('#grid-table').jqGrid('restoreRow', lastsel);
                        jQuery('#grid-table').jqGrid('editRow', id, true);
                        lastsel = id;
                    }
                },
                editurl: "JqGridHandler.ashx?sign=singleEdit"//这个文件需要有，但里面无需写任何处理代码
                
            });

4.获得选中的行的方法

function getSelecteds(){
//获取多选到的id集合
var ids = $("#grid-table").jqGrid("getGridParam", "selarrrow");
//遍历访问这个集合
$(ids).each(function (index, id){
     //由id获得对应数据行
var row = $("#grid-table").jqGrid('getRowData', id);
alert("row.ID:"+row.ID+"  "+"row.fieldName:"+row.fieldName);
}
}