DataGrid Selection

来源：互联网发布：最新版广联达预算软件编辑：程序博客网时间：2024/06/02 04:23

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>DataGrid Selection - jQuery EasyUI Demo</title>
<linkrel="stylesheet"type="text/css"href="../../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../../themes/icon.css">
<linkrel="stylesheet"type="text/css"href="../demo.css">
<scripttype="text/javascript"src="../../jquery.min.js"></script>
<scripttype="text/javascript"src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>DataGrid Selection</h2>
<divclass="demo-info">
<divclass="demo-tip icon-tip"></div>
<div>Choose a selection mode and select one or more rows.</div>
</div>
<divstyle="margin:10px0;">
<ahref="#"class="easyui-linkbutton"onclick="getSelected()">GetSelected</a>
<ahref="#"class="easyui-linkbutton"onclick="getSelections()">GetSelections</a>
</div>
<tableid="dg"class="easyui-datagrid"title="DataGrid Selection"style="width:700px;height:250px"
data-options="singleSelect:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<thdata-options="field:'itemid',width:80">Item ID</th>
<thdata-options="field:'productid',width:100">Product</th>
<thdata-options="field:'listprice',width:80,align:'right'">List Price</th>
<thdata-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<thdata-options="field:'attr1',width:250">Attribute</th>
<thdata-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<divstyle="margin:10px0;">
<span>Selection Mode:</span>
<selectonchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
<optionvalue="0">Single Row</option>
<optionvalue="1">Multiple Rows</option>
</select>
</div>
<scripttype="text/javascript">
function getSelected(){
var row= $('#dg').datagrid('getSelected');
if(row){
$.messager.alert('Info', row.itemid+":"+row.productid+":"+row.attr1);
}
}
function getSelections(){
var ss=[];
var rows= $('#dg').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
var row= rows[i];
ss.push('<span>'+row.itemid+":"+row.productid+":"+row.attr1+'</span>');
}
$.messager.alert('Info', ss.join('<br/>'));
}
</script>
</body>
</html>

0 0