<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"
charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
<!-- 通过html的方式(不推荐) -->
<!-- <table class="easyui-datagrid"> -->
<!-- <thead> -->
<!-- <tr> -->
<!-- <th data-options="field:'code'">编码</th> -->
<!-- <th data-options="field:'name'">名称</th> -->
<!-- <th data-options="field:'price'">价格</th> -->
<!-- </tr> -->
<!-- </thead> -->
<!-- <tbody> -->
<!-- <tr> -->
<!-- <td>001</td> -->
<!-- <td>name1</td> -->
<!-- <td>2323</td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td>002</td> -->
<!-- <td>name2</td> -->
<!-- <td>4612</td> -->
<!-- </tr> -->
<!-- </tbody> -->
<!-- </table> -->
<table id="dg"></table>
<script type="text/javascript">
$('#dg').datagrid({
url : 'datagrid_data.json',
/* data: [
{productid:'value11', productname:'value12'},
{productid:'value21', productname:'value22'}
],
直接给出数据 */
width:500,
fitColumns:true,
/* 会自动让列宽平均分配来占满datagrid */
/* loadMsg:'正在加载数据...',
从远程站点加载数据时显示 */
rownumbers:true,
/*显示行列号*/
// singleSelect:true,
/* 只允许显示一行 */
pagination:true,
/*显示分页栏*/
// pageNumber:2,
/* 在设置分页属性的时候初始化页码 */
pageSize:5,
/*在设置分页属性的时候初始化页面大小*/
pageList:[5,15,20,25],
/* 在设置分页属性的时候 初始化页面大小选择列表(和上一个属性搭配使用) */
sortName:'unitcost',
sortOrder:'desc',
remoteSort:false,
/*某列排序的条件，设置上面三个属性，在列属性中开启sortable*/
rowStyler: function(index,row){
if (row.unitcost>20){
return 'background-color:#6293BB;color:#fff;';
}
},
/* 修改满足条件数据所在行的style */
//字段
columns : [ [
{field : 'cb',checkbox:true},/* 设置复选框需也需要一个字段*/
{field : 'productid',title : '产品编号',width : 100},
{field : 'productname',title : '产品名',width : 100},
{field : 'unitcost',sortable:true,title : '单价',width : 100,align : 'right'}
] ],
toolbar: [{ //工具条
iconCls: 'icon-add',
text:'添加',
handler: function(){
$('#dg').datagrid('appendRow',{
productid: '11',
productname: '最屌手机',
unitcost: 1000
});
}
},'-',{
iconCls: 'icon-edit',
text:'编辑',
handler: function(){
$('#dg').datagrid('updateRow',{
index: 0,
row: {
productid: '100',
productname: 'iphone',
unitcost:2000
}
});
}
},'-',{
iconCls: 'icon-remove',
text:'删除',
handler: function(){
//获取勾选项所在行
var rows = $("#dg").datagrid('getSelections');
for(var i=0;i<rows.length;i++){
//返回指定行的索引
var index = $("#dg").datagrid('getRowIndex');
//删除指定索引行
$("#dg").datagrid('deleteRow',index);
}
//取消选中所有行
$("#dg").datagrid('unselectAll');
}
},'-',{
iconCls: 'icon-search',
text:'<input type="text" value="">查询',
handler: function(){alert('查询')}
}],
//单击事件(rowData代表该行的信息)
onCheck:function(index,rowData){
alert(rowData.productid);
alert(rowData.productname);
alert(rowData.unitcost);
}
});
</script>
</body>
</html>
datagrid.gif
