ASP.NET使用jQuery EasyUI Grid实例,easyUI中datatGrid操作例子
2014-09-25 09:40:58  By: dwtedx

最近在使用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的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+