接上篇 ： EasyUI 开发笔记(一) (http://www.cnblogs.com/yiayi/p/3485258.html)
这期就简单介绍下, easyui 的 list 展示， 在easyui中叫datagrid, 其实就是html中，放个<table>然后用easyui 的datagrid 为其绑定数据。
界面如图这样:
aspx 页面代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head runat="server"> 5 <title></title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd; margin-top: 4px;"> 9 <div style="padding-top: 5px;"> 10 <a href="javascript:void(0);" onclick="TabReload()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'" 11 style="float: left;">刷新</a> 12 <div class="tools_separator"> 13 </div> 14 <a href="javascript:void(0);" onclick="addRole()" class="easyui-linkbutton" 15 data-options="plain:true,iconCls:'icon-z_add'" style="float: left;">新建角色</a> 16 <a href="javascript:void(0);" onclick="deleteRole()" class="easyui-linkbutton" 17 data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">删除</a> 18 <a href="javascript:void(0);" onclick="Edit()" class="easyui-linkbutton" 19 data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">编辑</a> 20 <a href="javascript:void(0);" onclick="fpqx()" class="easyui-linkbutton" 21 data-options="plain:true,iconCls:'icon-z_edit'" style="float: left;">分配权限</a> 22 <div style="clear: both;"> 23 </div> 24 </div> 25 <div class="hr"> 26 </div> 27 <div id="qx_RoleListWindow"></div> 28 29 30 31 <table id="qx_roleList"> 32 </table> 33 <script> 34 $(function () { 35 36 $('#qx_roleList').datagrid({ 37 url: '/admin/system/systemHandler.ashx?ajaxMethod=RoleList', 38 title: '角色管理', 39 40 height: 'auto', 41 fitColumns: true, 42 singleSelect: true, 43 pagination: true, 44 rownumbers: true, 45 idField: "RoleId", 46 pageSize:20, 47 pagePosition: 'both', 48 columns: [[ 49 { field: 'RoleId', title: '角色编号', width: 10 }, 50 { field: 'RoleName', title: '角色名称', width: 80 }, 51 { field: 'RoleDesc', title: '角色备注', width: 80 } 52 53 ]], 54 onDblClickRow: function (rowIndex, rowData) { 55 $('#qx_RoleListWindow').window({ width: 300, height: 150, collapsible: false, title: "编辑角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx?RoleId=' + rowData.RoleId); 56 } 57 }); 58 }) 59 function addRole() { 60 $('#qx_RoleListWindow').window({ width: 300, height: 150, collapsible: false, title: "添加角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx'); 61 } 62 function deleteRole() { 63 var row = $('#qx_roleList').datagrid('getSelected'); 64 if (row) { 65 $.messager.confirm("智能提示", "确定要删除该角色吗？", function (r) { 66 if (r) { 67 $.get("/admin/system/systemHandler.ashx?ajaxMethod=deleteRole&RoleId=" + row.RoleId, function (data) { 68 if(data=="true") 69 $('#qx_roleList').datagrid('load'); 70 }) 71 } 72 }) 73 } else { 74 showException('请先选择数据行！'); 75 } 76 } 77 function Edit() { 78 var row = $('#qx_roleList').datagrid('getSelected'); 79 if (row) { 80 $('#qx_RoleListWindow').window({ width: 300, height: 150, collapsible: false, title: "编辑角色", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/RoleEdit.aspx?RoleId=' + row.RoleId); 81 } else { 82 showException('请先选择数据行！'); 83 } 84 } 85 function fpqx() { 86 var row = $('#qx_roleList').datagrid('getSelected'); 87 if (row) { 88 $('#qx_RoleListWindow').window({left:300,top:80,width: 900, height: 600, collapsible: false, title: "分配权限", minimizable: false, iconCls: 'icon-z_SysModule', maximizable: false, closable: true, modal: true, closed: false }).panel('refresh', '/admin/system/PermissionSet.aspx?RoleId=' + row.RoleId); 89 } else { 90 showException('请先选择数据行！'); 91 } 92 } 93 </script> 94 </div> 95 </body> 96 </html>