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，看看这里面的详细代码。

这里面也没什么好说的，就是为前端页面提供数据。代码完全可以进一步精简、处理，这里就不修正了。里面用到的一个实体类：

本文链接地址:https://www.jiuchutong.com/biancheng/379260.html 转载请保留说明！