位置: 编程技术 - 正文
推荐整理分享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 EasyUI之DataGrid使用实例详解
本文链接地址:https://www.jiuchutong.com/biancheng/379260.html 转载请保留说明!友情链接: 武汉网站建设