jQuery EasyUI_Combo与Datagrid.2

首先看一下效果：

二、DataGrid数据表格组件，基本用法：

1、Class加载方式：

<table class="easyui-datagrid" data-options="width:290">
			<thead>
				<tr>
				<th data-options="field:'username'">角色名</th>
				<th data-options="field:'conten'">角色描述</th>
				<th data-options="field:'addtime'">添加时间</th>
				<th data-options="field:'status'">是否开启</th>
				</tr>
			</thead>
			<tbody>
				<tr>
				<td>超级管理员</td><td>最高权限</td><td>2015-1-1</td><td>开启</td>
				</tr>
				<tr>
				<td>普通管理员</td><td>除系统设置外</td><td>2015-1-2</td><td>开启</td>
				</tr>
				<tr>
				<td>编辑</td><td>仅能添加，修改</td><td>2015-1-3</td><td>开启</td>
				</tr>
			</tbody>
		</table>

2、JS加载方式：

JS部分：

<script type="text/javascript">
          $('#roleList').datagrid({
          		url:"{:U('SystManage/showRoleName')}",
				width : 400,
				title : '角色列表',
				iconCls : 'icon-search',
				columns : [[
					{
						field : 'rolename',
						title : '角色名',
					},
						{
						field : 'conten',
						title : '角色描述',
					},
					{
						field : 'addtime',
						title : '添加时间',
					},
					{
						field : 'status',
						title : '是否开启',
					},
				]],
			});
        </script>

这里的URL，为数据库中加载来的数据表转换为JSON串。（我这里用的Tinkphp框架写的路由）

也可以手写一个JSON格式的数据：fieldname.json或其他形式的

HTML中的部分同样在Head部分加载Easyui，在body里面只需要写：

<table id="roleList"></table>