这么一来在取得 DataGrid 的 Checkbox 有勾选的数据值就可以沿用方式一的程序,





view sourceprint?



​1.​​​​$(​​​​'#ButonGetCheck'​​​​).click(​​​​function​​​​(){​


​2.​​​​var​​ ​​checkedItems = $(​​​​'#dg'​​​​).datagrid(​​​​'getChecked'​​​​);​


​3.​​​​var​​ ​​names = [];​


​4.​​​​$.each(checkedItems, ​​​​function​​​​(index, item){​


​5.​​​​names.push(item.productname);​


​6.​​​​});               ​


​7.​​​​console.log(names.join(​​​​","​​​​));​


​8.​​​​});​


执行结果:

 

easyui DataGrid 的 Checkbox  选择多行_数据值


easyui DataGrid 的 Checkbox  选择多行_数据值_02


easyui DataGrid 的 Checkbox  选择多行_json_03

 

完整 Javascript 程序如下:


 






​01.​​​​$(​​​​function​​​​(){​


​02.​​​​$(​​​​'#dg'​​​​).datagrid({​


​03.​​​​title: ​​​​'CheckBox Selection on DataGrid'​​​​,​


​04.​​​​url: ​​​​'datagrid_data3.json'​​​​,​


​05.​​​​width: ​​​​'700'​​​​,​


​06.​​​​rownumbers: ​​​​true​​​​,​


​07.​​​​columns:[[​


​08.​​​​{field:​​​​'checked'​​​​,formatter:​​​​function​​​​(value,row,index){​


​09.​​​​if​​​​(row.checked){​


​10.​​​​return​​ ​​'<input type="checkbox" name="DataGridCheckbox" checked="checked">'​​​​;​


​11.​​​​}​


​12.​​​​else​​​​{​


​13.​​​​return​​ ​​'<input type="checkbox" name="DataGridCheckbox">'​​​​;​


​14.​​​​}​


​15.​​​​}},​


​16.​​​​{ field: ​​​​'productid'​​​​, title: ​​​​'productid'​​ ​​},​


​17.​​​​{ field: ​​​​'productname'​​​​, title: ​​​​'productname'​​ ​​},​


​18.​​​​{ field: ​​​​'unitcost'​​​​, title: ​​​​'unitcost'​​ ​​},​


​19.​​​​{ field: ​​​​'status'​​​​, title: ​​​​'status'​​ ​​},​


​20.​​​​{ field: ​​​​'listprice'​​​​, title: ​​​​'listprice'​​ ​​},​


​21.​​​​{ field: ​​​​'itemid'​​​​, title: ​​​​'itemid'​​ ​​}​


​22.​​​​]],​


​23.​​​​singleSelect: ​​​​true​


​24.​​​​});​


​25.​​ 


​26.​​​​$(​​​​'#ButonGetCheck'​​​​).click(​​​​function​​​​(){​


​27.​​​​var​​ ​​checkedItems = $(​​​​'#dg'​​​​).datagrid(​​​​'getChecked'​​​​);​


​28.​​​​var​​ ​​names = [];​


​29.​​​​$.each(checkedItems, ​​​​function​​​​(index, item){​


​30.​​​​names.push(item.productname);​


​31.​​​​});               ​


​32.​​​​console.log(names.join(​​​​","​​​​));​


​33.​​​​});​


​34.​​​​});​


​35.​​ 


​36.​​​​$.extend($.fn.datagrid.methods, {​


​37.​​​​getChecked: ​​​​function​​ ​​(jq) {​


​38.​​​​var​​ ​​rr = [];​


​39.​​​​var​​ ​​rows = jq.datagrid(​​​​'getRows'​​​​);​


​40.​​​​jq.datagrid(​​​​'getPanel'​​​​).find(​​​​'div.datagrid-cell input:checked'​​​​).each(​​​​function​​ ​​() {​


​41.​​​​var​​ ​​index = $(​​​​this​​​​).parents(​​​​'tr:first'​​​​).attr(​​​​'datagrid-row-index'​​​​);​


​42.​​​​rr.push(rows[index]);​


​43.​​​​});​


​44.​​​​return​​ ​​rr;​


​45.​​​​}​


​46.​​​​});​