打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jqGrid 多选复选框 编辑列
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);}}    




本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
jqGrid的若干种用法
jqGrid行编辑DEMO
jqGrid 使用总结
grid
JQGRID 基本用法及示例、换肤等
jqGrid点滴
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服