ASP.NET使用jQuery EasyUI Grid实例,easyUI中datatGrid操作例子
2014-09-25 09:40:58 By: shinyuu
最近在使用EasyUI、特此和大家分享一下我的使用心得、希望对一些哥们有帮助
jQuery EasyUI是一个轻量级的Web前端开发框架
提供了很多的现成组件帮助程序员减轻前端代码开发量
之前有个项目中就用到了其中的DataGrid、
jQuery EasyUI框架的官方主页：http://www.jeasyui.com/demo/main/index.php
可以下载完整开发包、里面有示例代码可以参考
由于我使用的是ASP.NET webform技术、下面我就贴出主要的代码以供参考
在页面中首先要引用相关的css以及js文件、这样才能使用该组件
css和js部分：
<link href="./jQueryEasyUI/theme/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="./jQueryEasyUI/theme/icon.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="../Css/datagrid.css" /> <script src="/jQueryEasyUI/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="/jQueryEasyUI/jquery.easyui.min.js" type="text/javascript"></script> <script src="/jQueryEasyUI/jquery.pagination.js" type="text/javascript"></script>
由于jQuery EasyUI基于jQuery、所以必需要先引入jQuery文件、而pagination.js是EasyUI的分页插件、后面会看到分页的效果
$(function () {
var qParams = { mode: ´Query´, hfjia: $("#<%=hfjia.ClientID %>").val(),
sfz: $("#sfz").val() }; //取得查询参数
var oldRowIndex;
var opt = $("#grid");
opt.datagrid({
width: ´780´,
height: ´440´,
nowrap: false,
striped: true,
fitColumns: true,
singleSelect: true,
queryParams: qParams, //参数
url: ´../Service/ServiceHanlder.ashx´,
//idField: ´id´, //主索引
//frozenColumns: [[{ field: ´ck´, checkbox: true}]],
pageSize: 20,
pageList: [20, 25, 30],
pagination: true, //是否启用分页
rownumbers: true, //是否显示列数
onClickRow: function (rowIndex) {
if (oldRowIndex == rowIndex) {
opt.datagrid(´clearSelections´, oldRowIndex);
}
var selectRow = opt.datagrid(´getSelected´);
oldRowIndex = opt.datagrid(´getRowIndex´, selectRow);
},
columns: [[
{
title: "浏览档案", width: 20, align: "center",
formatter: function (value, rowData, rowIndex) {
return "<font onclick=searchDA(´" + rowData.PersonIdNum + "´);
color=´blue´ > 查看档案 </font>";
}
},
{ field: ´DAGInPosition´, title: "档案位置", width: 40, align: "center" },
{ field: ´PersonIdNum´, title: "身份证号", width: 80, align: "center" },
{ field: ´PersonName´, title: "姓名", width: 40, align: "center" },
{ field: ´PersonSex´, title: "性别", width: 30, align: "center" },
{ field: ´DAId´, title: "档案编号", width: 60, align: "center" }
//{ field: ´DAGInOrg´, title: "业务经办机构", width: 60, align: "center" }
]]
}).datagrid("getPager").pagination({
beforePageText: ´第´, //页数文本框前显示的汉字
afterPageText: ´页/{pages}页´,
displayMsg: ´共{total}条记录´,
onBeforeRefresh: function () {
return true;
}
});
});
请注意这段长长的js代码、这是该页面的核心代码。里面的参数设置请注意、主要就是通过js动态的构造datagird
该页面的Body部分：
<div style="float:left;width: 780px;"> <table id="grid"> </table> </div>
只要你表格里面有数据即可实现GRID功能了哈、感谢你的访问、祝你成功
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）
或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
