【JqGrid】jqGrid 多选复选框编辑列方法事件

今天药忘吃喽~ 2022-07-14 04:54 338阅读 0赞

1.首先看一下效果

![SouthEast][]

2.html代码

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****table** id="grid-table"**>****</****table****>**

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

**\[javascript\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

4.获得选中的行的方法

**\[csharp\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  function getSelecteds()\{  
2.  //获取多选到的id集合  
3.  var ids = $("\#grid-table").jqGrid("getGridParam", "selarrrow");  
4.  //遍历访问这个集合  
5.  $(ids).each(function (index, id)\{  
6.       //由id获得对应数据行  
7.  var row = $("\#grid-table").jqGrid('getRowData', id);  
8.  alert("row.ID:"\+row.ID+"  "\+"row.fieldName:"\+row.fieldName);  
9.  \}  
10. \}  
11.   
12.       
13.

[SouthEast]: /images/20220714/19dbacf1823f440b9591c489e2df233c.png
[view plain]: http://blog.csdn.net/xuanwuziyou/article/details/26495349#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/356879
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/356879/fork