easyui datagrid 建立帶複選框表格(2)
阿新 • • 發佈：2018-12-05
1.原始碼<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>建立帶複選框的datagrid</title> <link rel="stylesheet" type="text/css" href="./javascript/jquery-easyui-1.5.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="./javascript/jquery-easyui-1.5.1/themes/icon.css"> <link rel="stylesheet" type="text/css" href="./javascript/jquery-easyui-1.5.1/demo/demo.css"> <script type="text/javascript" src="./javascript/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="./javascript/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function() { $('#dg').datagrid({ url : "./javascript/jquery-easyui-1.5.1/datagrid_data.json", fitColumns : "true", striped : true, rownumbers:true, checkOnSelect : 'true', columns : [ [ { field : 'itemid', title : 'Order ID', width : 200, checkbox : true }, { field : 'productid', title : 'Quantity', width : 100, align : 'right' }, { field : 'unitcost', title : 'Unit Price', width : 100, align : 'right' }] ] }); }); </script> </head> <body> <h2>建立帶複選框的datagrid</h2> <div id="dg" style="width:650px;height:250px"></div> </body> </html>
2.效果
3.獲取選中行 var selectrow = $("#dg").datagrid("getChecked");//獲取的是陣列，多行資料
var idArry = [];
for(var i=0;i<selectrow.length;i++){
idArry.push(selectrow[i].userId);
}
false，選中該行將不會選中複選框
datagrid屬性設定selectOnCheck
5.datagrid屬性設定點選複選框將會選中該行。如果設定為
false，選中該行將不會選中複選框
datagrid屬性設定selectOnCheck