位置: 编程技术 - 正文
jQuery EasyUI之DataGrid使用实例详解
编辑：rootadmin推荐整理分享jQuery EasyUI之DataGrid使用实例详解，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
jQuery EasyUI是一个轻量级的Web前端开发框架，提供了很多的现成组件帮助程序员减轻前端代码开发量，之前有个项目中就用到了其中的DataGrid。jQuery EasyUI框架的官方主页,可以下载完整开发包，里面有示例代码可以参考。
运行效果图：
由于我使用的是ASP.NET webform技术，下面我就贴出主要的代码以供参考。在页面中首先要引用相关的css以及js文件，这样才能使用该组件。css部分：
js部分：
由于jQuery EasyUI基于jQuery，所以必需要先引入jQuery文件。而pagination.js是EasyUI的分页插件，后面会看到分页的效果。
请注意这段长长的js代码，这是该页面的核心代码。里面的参数设置请注意，主要就是通过js动态的构造datagird。该页面的Body部分：
其中id为grid的table部分，与上面的js部分中grid对应。该页面的后台代码部分：
很简单就是给前台存放的一个隐藏域赋值，以在页面刷新时保持状态（记录档案架的位置）。后台的数据源地址为ServiceHanlder.ashx，看看这里面的详细代码。
这里面也没什么好说的，就是为前端页面提供数据。代码完全可以进一步精简、处理，这里就不修正了。里面用到的一个实体类：
下一篇：实例详解jQuery结合GridView控件的使用方法(jquery示例)