这是一个表格，将来展示数据一行一行的标识。
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申请
返回值
页面解析数据
发表回复