共计 2343 个字符，预计需要花费 6 分钟才能阅读完成。
这是一个表格，将来展示数据一行一行的标识。
UI 框架 - 表格数据展示阐明
外围：JS 中须要什么数据，后端程序员就封装什么数据！！
门 Demo
大抵浏览浏览。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-3- 菜单按钮 </title>
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">
/* 通过 js 创建表格 */ $(function(){$("#table3").datagrid({
/* 定义工具栏 */ toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert("点击工具栏")}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('帮忙工具栏')}
},'-',{
iconCls: 'icon-save',
handler: function(){alert('保留工具栏')}
}],
columns:[[{field:'itemIds',checkbox:true},
{field:'itemId',title:'商品 Id',width:100},
{field:'itemName',title:'商品名称',width:100},
{field:'itemDesc',title:'商品形容',width:100,align:'right'}
]],
fitColumns:true, // 主动适应
url:"datagrid_item.json", // 申请数据的地址
method:"get", // 提交形式
striped:true, // 有条纹的行
nowrap:true, // 进步加载性能
loadMsg:"正在加载", // 加载数据时打印
pagination:true, // 分页加载
rownumbers:true, // 显示行号
//singleSelect:true, // 只容许选中一行数据
})
})
</script>
</head>
<body>
<h1>Easy- 表格数据 1 </h1>
<div>
<table class="easyui-datagrid" style="width:400px;height:250px">
<thead>
<tr>
<th data-options="field:'code'">Code</th>
<th data-options="field:'name'">Name</th>
<th data-options="field:'price'">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>
<tr>
<td>003</td>
<td>name3</td>
<td>4612</td>
</tr>
</tbody>
</table>
</div>
<hr/>
<h1> 通过数据申请创建表格 </h1>
<div>
看到 URL: 属性 在背地解析时就是一个 AJAX $.GET(XXXX)
定义表格，并且通过 url 拜访 json 数据，fitColumns:true 示意主动适应，singleSelect:true 示意选中单个
<table class="easyui-datagrid" style="width:500px;height:300px"
data-options="url:'datagrid_data.json',method:'get',
fitColumns:true,singleSelect:false,pagination:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table>
</div>
<hr/>
<h1> 通过 js 创建表格 </h1>
<table id="table3" style="width:700px">
</table>
</body>
</html> 次要代码局部截图：
fitColumns 自适应
singleSelect 单选
pagination 分页
分页成果
发动 ajax 申请
返回值
页面解析数据
正文完
