<body>
<!-- 方式一：式直接将html加class改样式 -->
<table class="easyui-datagrid">
<thead>
<!-- th比直接用td多了文字居中和加粗 -->
<tr>
<!-- 使用easyui样式，必须加field不然数据不会显示 -->
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>90</td>
</tr>
</tbody>
</table>
<!-- 方式二：放松ajax请求json数据创建datagrid -->
<table data-options="url:'xxxxxxx'" class="easyui-datagrid" >
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
<!-- [
{"id":"001","name":"李四","age":"15"}
{"id":"001","name":"李四","age":"15"}
{"id":"001","name":"李四","age":"15"}
] -->
</table>
<!-- 方式三：使用easyUI提供的API,js代码来解决（重要） -->
<table id="mytable">
</table>
<script type="text/javascript">
$(function(){
$("#mytable").datagrid({
//定义标题行所有的列 checkbos:复选框
columns:[[
{title:'编号',field:'number',checkbox:true},
{title:'姓名',field:'name'},
{title:'年龄',field:'age'},
]],
//指定加载数据的地址，数据和上面的一样
url:'xxxxxx',
//加上行号
rownumbers:true,
//只能选一个
singleSelect:true,
//定义工具栏
toolbar:[
{text:'增加',iconCls:'icon-add',handler:function(){
//为按钮绑定单击事件
alert("增加");
}},
{text:'删除',iconCls:'icon-remove'},
{text:'查询',iconCls:'icon-search'}
],
//显示分页条(页面效果写完了)
pagination:true
//数据rows为当前页返回的数据
// {"total":123,
// "rows":[
// {"id":"001","name":"李四","age":"15"}
// {"id":"001","name":"李四","age":"15"}
// {"id":"001","name":"李四","age":"15"}
// ]}
})
})
</script>
<!-- 方式一：式直接将html加class改样式 -->
<table class="easyui-datagrid">
<thead>
<!-- th比直接用td多了文字居中和加粗 -->
<tr>
<!-- 使用easyui样式，必须加field不然数据不会显示 -->
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>90</td>
</tr>
</tbody>
</table>
<!-- 方式二：放松ajax请求json数据创建datagrid -->
<table data-options="url:'xxxxxxx'" class="easyui-datagrid" >
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
<!-- [
{"id":"001","name":"李四","age":"15"}
{"id":"001","name":"李四","age":"15"}
{"id":"001","name":"李四","age":"15"}
] -->
</table>
<!-- 方式三：使用easyUI提供的API,js代码来解决（重要） -->
<table id="mytable">
</table>
<script type="text/javascript">
$(function(){
$("#mytable").datagrid({
//定义标题行所有的列 checkbos:复选框
columns:[[
{title:'编号',field:'number',checkbox:true},
{title:'姓名',field:'name'},
{title:'年龄',field:'age'},
]],
//指定加载数据的地址，数据和上面的一样
url:'xxxxxx',
//加上行号
rownumbers:true,
//只能选一个
singleSelect:true,
//定义工具栏
toolbar:[
{text:'增加',iconCls:'icon-add',handler:function(){
//为按钮绑定单击事件
alert("增加");
}},
{text:'删除',iconCls:'icon-remove'},
{text:'查询',iconCls:'icon-search'}
],
//显示分页条(页面效果写完了)
pagination:true
//数据rows为当前页返回的数据
// {"total":123,
// "rows":[
// {"id":"001","name":"李四","age":"15"}
// {"id":"001","name":"李四","age":"15"}
// {"id":"001","name":"李四","age":"15"}
// ]}
})
})
</script>
</body>
// 取派员信息表格实例
$('#grid').datagrid( {
iconCls : 'icon-forward',
//自适应
fit : true,
//边框
border : false,
//行号
rownumbers : true,
//纹理效果
striped : true,
//分页条页数
pageList: [30,50,100],
//显示分页条
pagination : true,
toolbar : toolbar,
url : "json/staff.json",
//指定唯一表示字段
idField : 'id',
columns : columns,
//为数据表格绑定双击事件
onDblClickRow : doDblClickRow
});