从这篇博客,我会一步步的为大家讲解,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" />
到此为止,页面部分的代码就完成了。页面的制作非常的简单,后面几篇博客的内容才是重头戏,下次再见。
========================================================================================================================
基于asp.net+easyui框架的系列博文:
使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI的简介
Asp.net之真假分页大揭秘、使用AspNetPager实现真分页
Asp.Net构架(Http请求处理流程)、Asp.Net 构架(Http Handler 介绍)、Asp.Net 构架(HttpModule 介绍)
基于asp.net + easyui框架,js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载
基于asp.net+ easyui框架,js提交图片,实现先上传图片再提交表单
基于asp.net + easyui框架,一步步学习easyui-datagrid——界面(一)
基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
基于asp.net + easyui框架,一步步学习easyui-datagrid——实现添加、编辑、删除(三)
基于asp.net + easyui框架,一步步学习easyui-datagrid——完成,总结(四)
=========================================================================================================================
相关推荐
数据库管理系统,不管是桌面版,还是网页版,我觉得最重要的功能是:增删改查+分页。文档里面的例子就是asp.net web form + easy ui 的datagrid。简单的演示了这五个重要功能。请用vs2010运行,数据库没有给出。
我们要搭建的框架是企业级开发框架,适用用企业管理信息系统的开发,如:OA、HR等 1、框架名称:sampleFrame。...<table id=dataGrid class=easyui-datagrid url=getList toolbar=#toolbar> <th
(例子涉及两张表(用户表+权限表),datagrid分页有两种方式,请参考 UserInfoDAL.cs页面方法: getPage2005和getPage2012 ) EasyUI 1.5中文版文档下载地址:http://download.csdn.net/detail/jx_521/9647628
落阳-利用NPOI将EasyuiDatagrid数据导出到Excel-ASP.NET MVC Demo
1. ASP.NET MVC 基础 为什么选择MVC,假如您是个有梦想的人,那么你也应该喜欢极致的东西,而不顾一切付出 表现层的性能可以优化到极致 强迫学习前端语言html以及css、JavaScript 关注点分离 原生态url routing,...
EasyUI版本比较旧,请下载新的版本更新,最新版本测试通过。
他是一个并的关系,我们现在要做的也是这样的效果,下面我们将利用EasyUI的DataGrid为例来扩展(就算是其他组件也是可以的,同样的实现方式!) 实现思路 1.前台通过查询组合json 2.后台通过反射拆解json 3.进行...
本资源主要是使用easyui控件,并结合ASP。net实现datagrid与数据库的连接,数据的增,删,改,分页操作,完成tree加载数据库数据,希望对开发初学者有所帮助
最近项目中需要跨域调用其他项目的数据,其他项目也是使用的EasyUI的datagrid组件,开始以为直接在datagrid的url属性定义为其他项目的url地址即可,可是测试下发现的确是返回了json数据但是json数据提示“invalid ...
ASP.NET MVC使用EasyUI的datagrid多选提交保存教程,需要的朋友可以参考下。
内含数据库 及存储过程 主要以easyUI+JQuery+Ajax 实现后台数据交互的tree 及DataGrid 希望能帮到你的学习!
项目实现了权限登陆管理 项目以EasyUI为主 实现DataGrid 及tree 与后台交互 有HTML+JS+Ajax 也有ASP.net 的easyUI控件
详细讲述了jquery easyui中datagrid 在asp.net程序的使用!
详细代码展现了如何在Easyui中使用DataGrid的单元格的编辑功能并扩展
DataGridExport将DataGrid的数据导出为各种文件格式
jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid。 jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以...
采用三层架构开发,涉及技术有Ajax,Jquery等! 系统采用jquery easyui 里面的datagrid进行增删改查绑定数据! 提供给初学者或需要借鉴的一个良好的模板.
asp.net Easy Ui datagird分页