easyui datagrid的使用

datagrid是easyui的数据表格展示，有三种使用方式

1、静态渲染

<!-- 方式一：将静态HTML渲染为datagrid样式 -->
	<table 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>
		<tbody>
			<tr>
				<td>001</td>
				<td>小明</td>
				<td>90</td>
			</tr>
			<tr>
				<td>002</td>
				<td>老王</td>
				<td>3</td>
			</tr>
		</tbody>
	</table>

注意，thead的th不能写成td

2、通过ajax请求去获得展示的数据

<!-- 方式二：发送ajax请求获取json数据创建datagrid -->
	<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'" 
			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>
	</table>

datagrid_data.json

                        [
			{"id":"001","name":"小丽","age":100,"address":"xxx"},
			{"id":"002","name":"小红","age":100,"address":"xxx"},
			{"id":"003","name":"小白","age":100,"address":"xxx"}
			]

3、通过easyui的api去渲染

<table id="myTable"></table>
	<script type="text/javascript">
	 $(function(){
		//页面加载完成就渲染表格
			$("#myTable").datagrid({
					columns:[[
					         {title:"编号",field:"id"},
					         {title:"姓名",field:"name"},
					         {title:"学号",field:"studentNumber"},
					         {title:"性别",field:"gender"}
					         
					         ]],
					 url:'${pageContext.request.contextPath}/json/datagrid_data.json'
			
			}); 
	 })
		
	 
	</script>

datagrid_data.json

{


	"rows":[
			{"id":"001","name":"小丽","studentNumber":311700182,"gender":"女"},
			{"id":"002","name":"小红","studentNumber":311700112,"gender":"女"},
			{"id":"003","name":"小白","studentNumber":311700181,"gender":"男"}
			]




}

效果：

4、其他效果：

    1）让某一列变成复选框

    

{title:"编号",field:"id",checkbox:true}

    2) 显示行号

rownumbers:true

    3) 绑定工具类

 toolbar:
						 [{
							text:'Add',
							iconCls:'icon-add',
							handler:function(){alert('add')}
						   },
						   {
							text:'Cut',
							iconCls:'icon-cut',
							handler:function(){alert('cut')}
						   },'-',
						   {
							text:'Save',
							iconCls:'icon-save',
							handler:function(){alert('save')}
							}]

4) 显示分页条

pagination:true

json加上total表示总数据数，

{
	"total":100,
	"rows":[
			{"id":"001","name":"小丽","studentNumber":311700182,"gender":"女"},
			{"id":"002","name":"小红","studentNumber":311700112,"gender":"女"},
			{"id":"003","name":"小白","studentNumber":311700181,"gender":"男"}
			]


}