基于asp.net + easyui框架,一步步学习easyui-datagrid——界面(一)
从这篇博客,我会一步步的为大家讲解,easyui框架中最常用的一个控件datagrid。在使用easyui框架时,datagrid是使用最多的控件,它不仅好用,关键是实用。
我为大家建立一个博客更新的目录。
目录:
基于asp.net + easyui框架,一步步学习easyui-datagrid——界面(一)
基于asp.net + easyui框架,一步步学习easyui-datagrid——加载数据并分页(二)
基于asp.net + easyui框架,一步步学习easyui-datagrid——实现添加、编辑、删除和搜索(三)
基于asp.net + easyui框架,一步步学习easyui-datagrid——完成,总结(四)
我们先看一下,我们要使用easyui-datagrid实现的界面:
HTML
<%--表格显示区--%> <table id="tt" title="管理员设置" class="easyui-datagrid" style="width: auto; height: 400px;" idfield="itemid" pagination="true" data-options="iconCls:‘icon-save‘,rownumbers:true,url:‘SetAdmin.ashx/ProcessRequest‘,pageSize:5, pageList:[5,10,15,20],method:‘get‘,toolbar:‘#tb‘,striped:true" fitcolumns="true"> <%--striped="true"--%> <%-- 表格标题--%> <thead> <tr> <th data-options="field:‘AdminID‘,checkbox:true"></th> <th data-options="field:‘AdminName‘,width:100">用户名</th> <th data-options="field:‘AdminPassword‘,width:120,align:‘right‘">密码</th> <th data-options="field:‘AdminRightName‘,width:120,align:‘right‘">权限</th> <th data-options="field:‘ActiveDate‘,width:100">时间</th> </tr> </thead> <%--表格内容--%> </table> <%--功能区--%> <div id="tb" style="padding: 5px; height: auto"> <%-- 包括添加管理员,修改、删除管理员 --%> <div style="margin-bottom: 5px"> <a href="javascript:void(0)" onclick="newUser()" class="easyui-linkbutton" data-options="iconCls:‘icon-add‘,plain:true"></a> <a href="javascript:void(0)" onclick="editUser() " class="easyui-linkbutton" data-options="iconCls:‘icon-edit‘,plain:true"></a> <a href="javascript:void(0)" onclick="removeUser()" class="easyui-linkbutton" data-options="iconCls:‘icon-remove‘,plain:true"></a> </div> <%-- 查找管理员信息,根据时间、管理员名 --%> <div> 时间从: <input id="StartTime" class ="easyui-datebox" style="width: 100px" /> 到: <input id="EndTime" class="easyui-datebox" style="width: 100px" /> 管理员名: <input id="AdminName"/> 按权限: <select id="quanxian" class="easyui-combobox" name="state" datatextfield="AdminRightName" datavaluefield="AdminRightName" style="width: 150px;" panelheight="auto" runat="server"> </select> <a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘" onclick="reloadgrid()">Search</a> </div> </div>
需要引入的js
<%--基础js--%> <script src="../jquery.min.js"></script> <%--easyui 的js--%> <script charset="utf-8" src="../jquery.easyui.min.js"></script> <%--中文js--%> <script src="../locale/easyui-lang-zh_CN.js"></script> <%--基础样式--%> <link href="../themes/default/easyui.css" rel="stylesheet" /> <%--图标样式--%> <link href="../themes/icon.css" rel="stylesheet" />
到此为止,页面部分的代码就完成了。页面的制作非常的简单,后面几篇博客的内容才是重头戏,下次再见。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。