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